jonhon-mes-web/src/views/processManagement/components/handleDaialog.vue

<template>
  <vd-dialog v-drag :title="$t('craft.handle')" :visible.sync="isOpen" :before-close="cancel" :def-width="'65%'" @opened="open">

    <!-- <div class="leftAndRight"> -->
    <div class="leftTable">
      <el-form ref="form" label-width="80px" class="vd-form-row">
        <el-form-item :label="$t('global.memo')">
          <el-input v-model="fillMemo" type="textarea" />
        </el-form-item>
      </el-form>
      <div style="padding-bottom:10px;">
        <vd-btn-add @click="insertEvent()">{{ $t("global.insertRow") }}</vd-btn-add>
        <vd-btn-remove-row type="danger" size="mini" @click="$vxeTableUtil.deleteRow($refs.xTable)">{{ $t("global.deleteRow") }}</vd-btn-remove-row>
        <vd-btn-submit slot="right" @click="submit" />
      </div>
      <vxe-table ref="xTable" :loading="btnLoading" :data="list" :edit-config="{trigger: 'click', mode: 'cell', showStatus: true}" :mouse-config="{selected:true}" :edit-rules="gridRules" keep-source border show-overflow class="vxe-table-element" size="mini" stripe height="400" highlight-current-row align="center" row-id="rowIndex">
        <vxe-table-column type="checkbox" width="40" />
        <vxe-table-column :edit-render="{name: 'ElInput'}" :title="$t('global.matter')" field="matter" min-width="150">
          <template v-slot:edit="scope">
            <el-input v-model="scope.row.matter" type="String" />
          </template>
        </vxe-table-column>
        <vxe-table-column :edit-render="{name: 'ElInput'}" :title="$t('global.describe')" field="process" min-width="150">
          <template v-slot:edit="scope">
            <el-input v-model="scope.row.process" type="String" />
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
    <!-- 附件 -->
    <!-- <div class="rightBox">
        <vd-upload
          ref="docUpload"
          :data="{ theId:tbId,theTag:'DsTaskDillDetail',subTag:'doc'}"
          :auto-upload="true"
          except="exe"
        />
      </div> -->
    <!-- </div> -->
  </vd-dialog>
</template>
<script>
export default {
  components: {},
  props: {
    isOpen: {
      type: Boolean,
      default: false
    },
    tbId: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      btnLoading: false,
      list: [],
      gridRules: {
        matter: [this.$validation.required],
        process: [this.$validation.required]
      },
      fillMemo: ''
    };
  },
  methods: {
    open() {},
    insertEvent(row = -1) {
      // 新增一行
      const record = {};
      this.$refs.xTable.insertAt(record, row);
    },
    submit() {
      this.$refs.xTable.fullValidate((errMap) => {
        if (errMap) {
          return;
        }
        let submitList = [];
        const deleteIds = [];
        const { insertRecords, updateRecords, removeRecords } =
          this.$refs.xTable.getRecordset();
        if (insertRecords.length > 0) {
          insertRecords.forEach((item) => {
            submitList.push(item);
          });
        }
        if (updateRecords.length > 0) {
          submitList = submitList.concat(updateRecords);
        }
        if (removeRecords.length > 0) {
          removeRecords.forEach((obj) => {
            if (obj.fdId) {
              deleteIds.push(obj.fdId);
            }
          });
        }
        this.btnLoading = true;
        this.$ajax
          .post('dsTaskBill/handleDsTaskBill', {
            tbId: this.tbId,
            fillMemo: this.fillMemo,
            submitList,
            deleteIds
          })
          .then((res) => {
            if (res.code === 0) {
              this.$message.success(this.$t('quality.successComplete'));
              // this.$refs.docUpload.clearFiles();
              this.cancel(true);
            }
            this.btnLoading = false;
          });
      });
    },
    cancel(isRefresh) {
      this.$emit('cancel', isRefresh === true);
    }
  }
};
</script>
<style lang="scss" scoped>
.leftAndRight {
  display: flex;
  .leftTable {
    width: 70%;
  }
  .rightBox {
    width: 30%;
    display: flex;
    justify-content: center;
    margin-top: 60px;
  }
}
</style>