kd-aiot-frontend/src/views/technology/productParam/components/user-edit.vue

<template>
  <ele-modal
    width="1160px"
    :visible="visible"
    v-if="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    :title="isUpdate ? '修改参数' : '添加参数'"
    @update:visible="updateVisible"
    :maxable="true"
  >
    <header-title title="基本信息"></header-title>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="产品名称:" prop="categoryName">
            <el-input
              @click.native="chooseProduct"
              v-model="form.categoryName"
              :disabled="isProduct"
              readonly
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="产品编码:" prop="categoryCode">
            <el-input
              disabled
              v-model="form.categoryCode"
              placeholder="自动带入"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="牌号:" prop="categoryBrandNum">
            <el-input
              disabled
              v-model="form.categoryBrandNum"
              placeholder="自动带入"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="型号:" prop="categoryModelType">
            <el-input
              disabled
              v-model="form.categoryModelType"
              placeholder="自动带入"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="规格:" prop="categorySpecification">
            <el-input
              disabled
              v-model="form.categorySpecification"
              placeholder="自动带入"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="工艺类型:" prop="produceVersionId">
            <el-select
              v-model="form.produceVersionId"
              filterable
              placeholder="请选择"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in versionList"
                :key="item.id"
                :label="item.code + '-' + item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="成型剂:" prop="moldingAgent">
            <DictSelection
              dictName="成型剂类别"
              clearable
              filterable
              v-model="form.moldingAgent"
            >
            </DictSelection>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="舟皿名称:" prop="palletName">
            <el-input @click.native="chooseMolding" v-model="form.palletName" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="舟皿编码:" prop="palletCode">
            <el-input
              disabled
              placeholder="自动带入"
              v-model="form.palletCode"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="舟血型号:" prop="palletModelType">
            <el-input
              disabled
              placeholder="自动带入"
              v-model="form.palletModelType"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="舟皿规格:" prop="palletSpecification">
            <el-input
              disabled
              placeholder="自动带入"
              v-model="form.palletSpecification"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="加工要求:" prop="processingRequirement">
            <el-input v-model="form.processingRequirement" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="备注:" prop="remark">
            <el-input v-model="form.remark" />
          </el-form-item>
        </el-col>
      </el-row>

      <header-title title="产品参数"></header-title>

      <el-row>
        <div class="ele-body">
          <ele-pro-table
            ref="table"
            :datasource="tableList"
            :columns="columns"
            row-key="id"
          >
            <!-- 表头工具栏 -->
            <template v-slot:toolbar>
              <el-button
                size="small"
                icon="el-icon-plus"
                class="ele-btn-icon"
                type="primary"
                @click.native="openParam"
                >添加参数</el-button
              >
            </template>

            <template v-slot:sort="{ row }">
              <el-input v-model="row.sort"></el-input>
            </template>

            <!-- 默认值 -->
            <template v-slot:defaultValue="{ row }">
              <el-input
                v-if="
                  row.textType == 1 ||
                  row.textType == 4 ||
                  row.textType == 3 ||
                  row.textType == 5
                "
                v-model="row.defaultValue"
                placeholder="请输入"
              ></el-input>
              <el-select
                v-if="row.textType == 2"
                v-model="row.defaultValue"
                placeholder="请选择"
              >
                <el-option label="TRUE" :value="'TRUE'" />
                <el-option label="FALSE" :value="'FALSE'" />
              </el-select>
            </template>

            <!-- 上限 -->
            <template v-slot:maxValue="{ row }">
              <el-input
                v-if="row.textType == 3"
                v-model="row.maxValue"
                placeholder="请输入"
              ></el-input>
            </template>
            <!-- 下限 -->
            <template v-slot:minValue="{ row }">
              <el-input
                v-if="row.textType == 3"
                v-model="row.minValue"
                placeholder="请输入"
              ></el-input>
            </template>

            <!-- 单位 -->
            <template v-slot:unitName="{ row }">
              <DictSelection
                v-if="row.textType != 2 && row.textType != 5"
                dictName="工艺参数单位"
                clearable
                filterable
                v-model="row.unitName"
              >
              </DictSelection>

              <span v-if="row.textType == 5"> h(小时)</span>
            </template>

            <!-- 操作列 -->
            <template v-slot:action="{ row }">
              <el-popconfirm
                class="ele-action"
                title="确定要删除当前参数吗？"
                @confirm="remove(row)"
              >
                <template v-slot:reference>
                  <el-link
                    type="danger"
                    :underline="false"
                    icon="el-icon-delete"
                  >
                    删除
                  </el-link>
                </template>
              </el-popconfirm>
            </template>
          </ele-pro-table>
        </div>
      </el-row>

      <!-- <header-title title="添加工序"></header-title> -->
    </el-form>

    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>

    <!-- 选择产品弹窗 -->
    <ProductModal ref="productRefs" @changeProduct="determineChoose" />

    <!-- 选择产品参数 -->
    <ParamModal ref="paramRefs" @chooseModal="chooseModal"></ParamModal>

    <!-- 选择工序 -->
    <!-- <Process @chooseProcess="chooseProcess" :taskParam="taskParam"></Process> -->
  </ele-modal>
</template>

<script>
  import parameter from '@/api/technology/productParam';
  import ProductModal from './ProductModal.vue';
  import Process from './process.vue';
  import ParamModal from './ParamModal.vue';

  import { pageList } from '@/api/technology/version/version.js';
  import { log } from 'bpmn-js-token-simulation';
  export default {
    components: {
      ProductModal,
      ParamModal,
      Process
    },
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object,
      paramData: Object
    },
    data() {
      const defaultForm = {
        id: null,
        categoryId: '',
        categoryName: '',
        categoryCode: '',
        categoryModelType: '',
        categoryBrandNum: '',
        categorySpecification: '',
        produceVersionId: '',
        moldingAgent: '',

        palletId: null,
        palletName: '',
        palletCode: '',
        palletSpecification: '',
        palletModelType: '',
        processingRequirement: '',
        remark: '',
        taskParam: [],
        produceParam: []
      };
      return {
        defaultForm,
        // 表单数据
        form: { ...defaultForm },

        versionList: [],

        // 表单验证规则
        rules: {
          categoryName: [
            { required: true, message: '请输入产品名称', trigger: 'blur' }
          ],
          code: [{ required: true, message: '请输入工序编码', trigger: 'blur' }]
        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        tableData: [],
        removeList: [],

        taskParam: [],

        // 表格列配置
        columns: [
          {
            prop: 'sort',
            slot: 'sort',
            label: '排序',
            minWidth: 60
          },
          {
            prop: 'code',
            label: '参数编码',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            prop: 'name',
            label: '参数名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            align: 'center',
            prop: 'description',
            label: '文本描述',
            showOverflowTooltip: true,
            minWidth: 110
          },

          {
            prop: 'maxValue',
            slot: 'maxValue',
            label: '参数上限',
            align: 'center'
          },
          {
            prop: 'minValue',
            slot: 'minValue',
            label: '参数下限',
            align: 'center'
          },
          {
            prop: 'defaultValue',
            slot: 'defaultValue',
            label: '默认值',
            align: 'center'
          },

          {
            prop: 'unitName',
            slot: 'unitName',
            label: '参数单位',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            columnKey: 'action',
            label: '操作',

            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        isProduct: false, // 判断是否是产品
        isProductUpdate: null, // 1 新增, 2编辑
        tableList: []
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    methods: {
      chooseProduct() {
        this.$refs.productRefs.open(this.form, '选择产品', '9');
      },

      chooseMolding() {
        this.$refs.productRefs.open(this.form, '选择舟皿', '8');
      },

      determineChoose(title, row) {
        if (title == '选择产品') {
          this.$set(this.form, 'categoryName', row.name);
          this.$set(this.form, 'categoryId', row.id);
          this.$set(this.form, 'categoryCode', row.code);
          this.$set(this.form, 'categoryModelType', row.modelType);
          this.$set(this.form, 'categoryBrandNum', row.brandNum);
          this.$set(this.form, 'specification', row.specification);
        } else if (title == '选择舟皿') {
          this.$set(this.form, 'palletName', row.name);
          this.$set(this.form, 'palletId', row.id);
          this.$set(this.form, 'palletCode', row.code);
          this.$set(this.form, 'palletSpecs', row.specification);
          this.$set(this.form, 'ModelType', row.modelType);
        }
      },

      openParam() {
        this.tableData = this.$refs.table.getData();
        this.$refs.paramRefs.open(this.tableData);
      },

      chooseModal(data) {
        this.removeList = this.removeList.filter(
          (id) => !data.some((d) => d.id === id)
        );
        this.tableList = [...data, ...this.$refs.table.getData()];
        this.$set(this.form, 'produceParam', this.tableList);
      },

      remove(row) {
        console.log('row', row);
        console.log('this.tableList', this.tableList);
        if (row.id) {
          this.removeList.push(row.id);
          this.tableList = this.tableList.filter((d) => d.id != row.id);
        } else {
          this.tableList = this.tableList.filter(
            (d) => d.paramId != row.paramId
          );
        }
      },

      /* 保存编辑 */
      save() {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          this.loading = true;
          if (!this.isUpdate && this.isProductUpdate == null) {
            delete this.form.id;
          }
          let saveOrUpdate = this.isUpdate ? parameter.update : parameter.save;

          if (this.isProductUpdate != null) {
            saveOrUpdate =
              this.isProductUpdate == 2 ? parameter.update : parameter.save;
          }

          if (this.removeList.length > 0) {
            this.form['removeList'] = this.removeList;
          }
          saveOrUpdate(this.form)
            .then((msg) => {
              this.loading = false;
              this.form = {};
              this.removeList = [];
              this.$message.success(msg);
              this.updateVisible(false);
              this.$emit('done');
            })
            .catch((e) => {
              this.loading = false;
              // this.$message.error(e.message);
            });
        });
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },

      async getParamList() {
        const res = await parameter.list({
          pageNum: 1,
          size: 100
        });
        this.paramList = res.list;
      },

      async getVersionList() {
        const res = await pageList({
          pageNum: 1,
          size: 100
        });
        this.versionList = res.list;
      },

      chooseProcess(data) {
        this.$set(this.form, 'taskParam', data);
      }
    },

    watch: {
      async visible(visible) {
        if (visible) {
          this.getParamList();
          this.getVersionList();

          // 产品工艺参数
          if (this.data) {
            const res = await parameter.getById(this.data.id);

            this.$util.assignObject(this.form, {
              ...res
            });

            this.tableList = res.produceParam;
            this.taskParam = res.taskParam;
            this.isUpdate = true;
          } else if (this.paramData) {
            this.isProduct = true;

            let param = {
              categoryId: this.paramData.id,
              categoryName: this.paramData.name,
              categoryCode: this.paramData.code,
              categoryModelType: this.paramData.modelType,
              categoryBrandNum: this.paramData.brandNum,
              categorySpecification: this.paramData.specification
            };

            const res = await parameter.getCategoryParam(this.paramData.id);

            if (res) {
              this.isProductUpdate = 2;
              this.$util.assignObject(this.form, {
                ...res
              });

              this.tableList = res.produceParam;
              this.taskParam = res.taskParam;
            } else {
              this.$util.assignObject(this.form, {
                ...param
              });
              this.isProductUpdate = 1;
            }
          } else {
            this.isUpdate = false;
          }
        } else {
          this.$refs.form.clearValidate();
          this.form = { ...this.defaultForm };
        }
      }
    }
  };
</script>