element 行編輯

先上圖

源碼

<template>
  <div class="app-container" style="margin: 0 3%">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" :inline="true">
        <!-- 統計 -->
        <div style="margin: 1% 0">
          <el-tag type="success" size="default"  > 其他應收：{{sumFlowIn}} 元 </el-tag>&nbsp;
          <el-tag type="danger" size="default"> 其他應付：{{sumFlowOut}} 元 </el-tag>&nbsp;
          <el-tag type="blue"  size="default" > 利潤：{{flowTotal}} 元 </el-tag>
        </div>
        <el-row :gutter="50">
          <el-col :span="24" style="position:relative;">

            <!-- 添加按鈕 -->
            <el-button class="specBtn" type="primary" @click="addLine" circle><i class="el-icon-plus"></i></el-button>

            <el-table  :data="flowList" border>
              <el-table-column type="index" width="50"></el-table-column>
              <el-table-column label="貨源方" align="center">
                <template scope="scope">
                  <el-select v-model="scope.row.companyId" filterable clearable placeholder="請選擇 客戶">
                    <el-option
                      v-for="item in opCompany"
                      :key="item.id"
                      :label="item.fullName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="司機" align="center">
                <template scope="scope">
                  <el-select v-model="scope.row.driverId" filterable clearable placeholder="請選擇 司機"  >
                    <el-option
                      v-for="dict in opOwner"
                      :key="dict.id"
                      :label="dict.name"
                      :value="dict.id"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="費用類型" align="center">
                <template scope="scope">
                  <el-cascader placeholder="請選擇流水類型編号"
                               v-model="scope.row.flowType"
                               :options="opFlowTypeList"
                               :props="{ expandTrigger: 'hover',children:'children' }"

                               filterable>
                  </el-cascader>
                </template>
              </el-table-column>
              <el-table-column label="核銷狀态" align="center">
                <template scope="scope">
                  <el-select v-model="scope.row.status" filterable clearable placeholder="請選擇 核銷狀态"  >
                    <el-option
                      v-for="dict in opStatus"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column label="金額" align="center">
                <template scope="scope">
                  <el-input-number  :precision="2" :step="0.1" v-model="scope.row.amount" style="width: 100%" placeholder="請輸入金額" @change="sumFlow" ></el-input-number>
                </template>
              </el-table-column>

              <el-table-column label="流水日" align="center" min-width="100">
                <template scope="scope">
                  <el-date-picker
                    v-model="scope.row.flowDate"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="選擇接流水日">
                  </el-date-picker>
                </template>
              </el-table-column>

              <el-table-column label="備注" align="center">
                <template scope="scope">
                  <el-input v-model="scope.row.remark" placeholder="請輸入備注" ></el-input>
                </template>
              </el-table-column>

              <el-table-column label="删除" align="center" width="80">
                <template scope="scope">
                  <el-button type="danger" @click="delLine(scope.$index, scope.row, 1)" icon="el-icon-delete" circle></el-button>
                </template>
              </el-table-column>
            </el-table>
<!--               <br>資料:{{flowList}}-->
          </el-col>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center; margin-top: 1%">
        <el-button type="primary" @click="submitForm" :disabled="disable">确 定</el-button>
        <el-button @click="cancel">清 空</el-button>
      </div>
  </div>
</template>

<script>
import { getCompanyList, getOwnerList, getFlowType} from "@/api/tws/order";
import { saveFlow} from "@/api/tws/diyFlowBatch";
import { getNowTime } from "@/utils/func";

export default {
  name: "diyFlowBatch",
  components: {},
  data() {
    return {
      // 表單參數
      form: {},
      // 表單校驗
      rules: {},
      disable:false,
      // 流水應收表格資料
      flowList: [ //預設5條資料
        {companyId:null, driverId:null, flowType:null, amount:null, flowDate:getNowTime(), status:null},
        {companyId:null, driverId:null, flowType:null, amount:null, flowDate:getNowTime(), status:null},
        {companyId:null, driverId:null, flowType:null, amount:null, flowDate:getNowTime(), status:null},
        {companyId:null, driverId:null, flowType:null, amount:null, flowDate:getNowTime(), status:null},
        {companyId:null, driverId:null, flowType:null, amount:null, flowDate:getNowTime(), status:null},],

      /** 清單字典*/
      //貨源方
      opCompany:[],
      //司機
      opOwner:[],
      //核銷狀态
      opStatus:[],
      //費用類型
      opFlowTypeList: [{
        value: '5',
        label: '其他應收',
        children: []
      }, {
        value: '6',
        label: '其他應付',
        children: []
      }],

      /** 統計 */
      //應收
      sumFlowIn:0.00,
      //應付
      sumFlowOut:0.00,
      //利潤
      flowTotal:0.00,

      // 查詢流水類型用
      queryFlowTypeParams: {
        isUsed: 1,//是否常用1常用0不常用
        status:1,//1 可用 2禁用
        type:null,//5其他應收 6其他應付
      },

      rowData:{},//行資料
      flowData:[],//發送資料

    };
  },
  created() {
    //核銷狀态
    this.getDicts("flow_diyFlow_status").then(response => {
     // console.log(response.data)
      this.opStatus = response.data;
    });
  },

  mounted() {
    /**  貨源方 */
    getCompanyList().then(res => {
      if(res.code == 200){
        this.opCompany = res.data;
      }
    });

    /** 司機資訊 */
    getOwnerList("all").then(res => {
      if(res.code == 200){
        this.opOwner = res.data;
      }
    });

    /** 查詢流水類型 */
    this.getFlowTypeOptions();
  },
  methods: {

    /** 查詢流水類型 **/
    getFlowTypeOptions() {
      this.queryFlowTypeParams.type = 5;      //應收
      getFlowType(this.queryFlowTypeParams).then(response => {
        response.rows.forEach(element => {
            let com = {
              label:element.name,
              value:element.id
            };
            this.opFlowTypeList[0].children.push(com);
          });
      });

      this.queryFlowTypeParams.type = 6;      //應付
      getFlowType(this.queryFlowTypeParams).then(response => {
        response.rows.forEach(element => {
          let com = {
            label:element.name,
            value:element.id
          };
          this.opFlowTypeList[1].children.push(com);
        });
      });
    },

    /** 清單添加資料 */
    addLine() {
      let newLine = {companyId:null, driverId:null, flowType:null, amount:null, flowDate:getNowTime(), status:null};
      //添加新的行數
      this.flowList.push(newLine);
    },

    /** 清單删除資料 */
    delLine:function(index, row, i){//删除行數
      this.flowList.splice(index, 1)
      this.msgSuccess("删除成功");

      //重新計算統計
      this.sumFlow();
    },

    /** 統計 */
    sumFlow:function (){
      this.$nextTick(() => {//時機似乎有點問題 -- 處理下
        this.sumFlowIn = 0.00;
        this.sumFlowOut = 0.00;

        // TODO 因類型問題 未完

        this.flowList.forEach(element => {
          if( !isNaN(element.amount) ){
              if(element.flowType && element.flowType[0] == 5){ //應收
                this.sumFlowIn += Number(element.amount);
              }else if(element.flowType && element.flowType[0] == 6){ //應付
                this.sumFlowOut += Number(element.amount);
              }
          }
        });
        this.sumFlowIn = this.sumFlowIn.toFixed(2);
        this.sumFlowOut =  this.sumFlowOut.toFixed(2);

        //利潤
        this.flowTotal = (this.sumFlowIn - this.sumFlowOut).toFixed(2);
      })

    },

    // 取消按鈕
    cancel() {
      this.flowList = [{companyId:null, driverId:null, flowType:null, amount:null, flowDate:getNowTime(), status:null},
        {companyId:null, driverId:null, flowType:null, amount:null, flowDate:getNowTime(), status:null},
        {companyId:null, driverId:null, flowType:null, amount:null, flowDate:getNowTime(), status:null},
        {companyId:null, driverId:null, flowType:null, amount:null, flowDate:getNowTime(), status:null},
        {companyId:null, driverId:null, flowType:null, amount:null, flowDate:getNowTime(), status:null},],
      this.sumFlowIn = 0.00;
      this.sumFlowOut = 0.00;
      this.flowTotal = 0.00;
    },


    /** 送出按鈕 */
    submitForm() {
      this.disable = true;
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.flowData = [];//減少無效資料傳輸   --沒有金額資料
          this.rowData = {};

          this.flowList.forEach(element => {
            if(element.amount){                //有金額再儲存
              this.rowData = element;
              if(element.flowType[0] == 5){       //應收
                this.rowData.flag = 1;          //收入
              }else if(element.flowType[0] == 6){ //應付
                this.rowData.flag = 2;          //支出
              }
              this.rowData.type = element.flowType[0];
              this.rowData.flowType = element.flowType[1];
              this.flowData.push(this.rowData);
            }
          })
          //console.log( this.flowData);
          saveFlow( this.flowData).then(response => {
            this.msgSuccess("新增成功");
            this.flowList = [ //預設5條資料
              {flowDate:getNowTime()},
              {flowDate:getNowTime()},
              {flowDate:getNowTime()},
              {flowDate:getNowTime()},
              {flowDate:getNowTime()}];

            this.sumFlowIn = 0.00;
            this.sumFlowOut = 0.00;
            this.flowTotal = 0.00;

            this.disable = false;
        }).catch(()=>{
            this.disabled = false;
          });
        }
      });
    },
  }
};
</script>

<style>
.specBtn {
  position: absolute;
  left: 32px;
  top: 5px;
  z-index: 99;
}

</style>