kd-aiot-frontend-wt/src/views/bpm/handleTask/components/changeManagement/create.vue

<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="create-form"
    >
      <el-row :gutter="15">
        <headerTitle style="margin-top: 15px" title="基本信息"></headerTitle>
        <questionInfo
          ref="info"
          v-if="form.objType == 1"
          :disabled="type == 'detail'"
        />
        <changeInfo
          ref="info"
          v-if="form.objType == 2"
          :disabled="type == 'detail'"
        />
        <noticeInfo
          ref="info"
          v-if="form.objType == 3"
          :disabled="type == 'detail'"
        />
      </el-row>
      <el-row :gutter="15">
        <headerTitle style="margin-top: 15px" title="关联变更"></headerTitle>

        <ele-pro-table
          ref="table"
          :columns="questionColumns"
          :datasource="this.form.relationObjList"
          height="10vh"
          :selection.sync="selection"
          :needPage="false"
        >
          <template v-slot:category="{ row }">
            <span v-for="item in row.category.split(',')" :key="item">
              {{ getDictValue('问题类型', item) }}</span
            >
          </template>
          <template v-slot:type="{ row }">
            <span>{{ getDictValue('变更类型', row.type + '') }}</span>
          </template>
          <template v-slot:toolbar>
            <el-button
              v-if="type != 'detail'"
              size="small"
              @click="del('selection', 'relationObjList')"
              >移除</el-button
            ></template
          >
        </ele-pro-table>
        <div
          class="add-product"
          v-if="type != 'detail'"
          @click="addEquipment('EquipmentDialogRef', 'relationObjList')"
        >
          <i class="el-icon-circle-plus-outline"></i>
        </div>
      </el-row>
      <el-row :gutter="15">
        <headerTitle style="margin-top: 15px" title="问题对象"></headerTitle>

        <ele-pro-table
          ref="table"
          :columns="objColumns"
          :datasource="this.form.problemObjList"
          height="10vh"
          :selection.sync="objSelection"
          :needPage="false"
        >
          <template v-slot:toolbar>
            <el-button
              v-if="type != 'detail'"
              size="small"
              @click="del('objSelection', 'problemObjList')"
              >移除</el-button
            ></template
          >
        </ele-pro-table>
        <div
          v-if="type != 'detail'"
          class="add-product"
          @click="addEquipment('objEquipmentDialogRef', 'problemObjList')"
        >
          <i class="el-icon-circle-plus-outline"></i>
        </div>
      </el-row>
      <el-row :gutter="15">
        <headerTitle style="margin-top: 15px" title="影响对象"></headerTitle>

        <ele-pro-table
          ref="table"
          :columns="objColumns"
          :datasource="this.form.influenceObjList"
          height="10vh"
          :selection.sync="influenceSelection"
          :needPage="false"
        >
          <template v-slot:toolbar>
            <el-button
              v-if="type != 'detail'"
              size="small"
              @click="del('influenceSelection', 'influenceObjList')"
              >移除</el-button
            ></template
          >
        </ele-pro-table>
        <div
          v-if="type != 'detail'"
          class="add-product"
          @click="addEquipment('objEquipmentDialogRef', 'influenceObjList')"
        >
          <i class="el-icon-circle-plus-outline"></i>
        </div>
      </el-row>
      <el-row :gutter="15">
        <headerTitle style="margin-top: 15px" title="参考对象"></headerTitle>
        <ele-pro-table
          ref="table"
          :columns="objColumns"
          :datasource="this.form.referenceObjList"
          height="10vh"
          :selection.sync="influenceSelection"
          :needPage="false"
        >
          <template v-slot:toolbar>
            <el-button
              size="small"
              v-if="type != 'detail'"
              @click="del('referenceSelection', 'referenceObjList')"
              >移除</el-button
            ></template
          >
        </ele-pro-table>
        <div
          v-if="type != 'detail'"
          class="add-product"
          @click="addEquipment('objEquipmentDialogRef', 'referenceObjList')"
        >
          <i class="el-icon-circle-plus-outline"></i>
        </div>
      </el-row>
    </el-form>

    <EquipmentDialog ref="EquipmentDialogRef" @choose="choose" />
    <objEquipmentDialog ref="objEquipmentDialogRef" @choose="choose" />
  </div>
</template>

<script>
import questionInfo from './questionInfo';
import changeInfo from './changeInfo';
import noticeInfo from './noticeInfo';

import EquipmentDialog from './EquipmentDialog';
import objEquipmentDialog from './objEquipmentDialog';
import dictMixins from '@/mixins/dictMixins';
import { questionDetails } from '@/api/bpm/components/changeManagement/question';
import { requestDetails } from '@/api/bpm/components/changeManagement/request';
import { noticeDetails } from '@/api/bpm/components/changeManagement/notice';
import { questionColumns, objColumns } from './data.js';

const defaultForm = function () {
  return {
    relationObjList: [],
    problemObjList: [],
    influenceObjList: [],
    referenceObjList: []
  };
};
export default {
  mixins: [dictMixins],

  components: {
    // workOrder,
    // produceOrder,
    questionInfo,
    // productionPlan,
    EquipmentDialog,
    objEquipmentDialog,
    changeInfo,
    noticeInfo
  },
  data() {
    //关联对象类型 objType 1：生产计划 2：生产订单 3：生产工单
    //关联变更类型 objType 1：问题报告 2：变更申请 3：变更通知
    return {

      questionColumns: questionColumns.filter(
        (item) => item.columnKey != 'action'
      ),
      objColumns,
      visible: false,
      loading: false,
      form: { ...defaultForm() },
      // 表单验证规则
      rules: {
        type: [{ required: true, message: '请选择', trigger: 'change' }],
        name: [{ required: true, message: '请选择', trigger: 'change' }],
        relationType: [{ required: true, message: '请选择', trigger: 'change' }]
      },
      activeList: '',
      type: '',
      title: '创建',
      selection: [],
      influenceSelection: [],
      objSelection: [],
      referenceSelection: []
    };
  },
  props: {
    businessId: {
      default: ''
    },
    processDefinitionId: {
      default: ''
    },
    taskDefinitionKey: {
      default: ''
    }
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created() {
    this.init();
  },
  methods: {
    del(selection, list) {
      let ids = this[selection].map((item) => item.id);
      this.form[list] = this.form[list].filter(
        (item) => !ids.includes(item.id)
      );
    },

    addEquipment(ref, list) {
      this.activeList = list;
      this.$refs[ref].open(this.form[list]);
    },
    async init() {
      let api = this.processDefinitionId.includes('change_notice_approve')
        ? noticeDetails
        : this.processDefinitionId.includes('change_request_approve')
        ? requestDetails
        : questionDetails;

      let data = await api(this.businessId);
      this.type = this.taskDefinitionKey == 'starter' ? 'edit' : 'detail';
      this.form = JSON.parse(JSON.stringify(data));
      this.form.category = this.form.category.split(',');
      this.form.type = this.form.type + '';
      this.$nextTick(() => {
        this.$refs.info.setValue(this.form);
      });
    },

    choose(data) {
      this.form[this.activeList] = data;
      if (this.activeList == 'relationObjList') {
        this.getChangeData();
      }
    },
    getChangeData() {
      ['problemObjList', 'influenceObjList', 'referenceObjList'].forEach(
        (key) => {
          this.form[key] = [];
        }
      );
      //获取关联数据
      this.form.relationObjList.forEach(async (item) => {
        let api =
          item.objType == 1
            ? questionDetails
            : item.objType == 2
            ? requestDetails
            : noticeDetails;
        const data = await api(item.id);
        ['problemObjList', 'influenceObjList', 'referenceObjList'].forEach(
          (key) => {
            this.form[key].push(...data[key]);
          }
        );
      });
    },
    /* 保存编辑 */
    async getTableValue() {
      // let data = JSON.parse(JSON.stringify(this.form));
      let infoData = await this.$refs.info.getValue();
      if (!infoData) {
        return;
      }
      infoData.category = infoData.category.toString();
      Object.assign(infoData, {
        relationObjList: this.form.relationObjList,
        problemObjList: this.form.problemObjList,
        influenceObjList: this.form.influenceObjList,
        referenceObjList: this.form.referenceObjList
      });
      return infoData;
    }
  }
};
</script>
<style lang="scss" scoped>
.add-product {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 30px;
  color: #1890ff;
  margin: 10px 0;
  cursor: pointer;
}

.create-form .el-form-item {
  margin-bottom: 15px !important;
}
</style>