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="true"
    custom-class="ele-dialog-form" :title="isUpdate ? '修改参数' : '添加参数'" @update:visible="updateVisible">
    <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="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="categoryBrandNum">
            <el-input disabled v-model="form.categoryBrandNum" 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="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="datasource" :columns="columns">
            <!-- 表头工具栏 -->
            <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:defaultValue="{ row }">
              <el-input v-if="row.textType == 1 || row.textType == 4" 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" dictName="工艺参数单位" clearable filterable v-model="row.unitName">
              </DictSelection>
            </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';
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: '',
      palletName: '',
      palletCode: '',
      palletSpecification: '',
      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: '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

    };
  },
  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.name)
        this.$set(this.form, 'categoryBrandNum', row.categoryBrandNum)
        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)


      }

    },

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


    chooseModal(data) {
      this.$refs.table.setData([...data, ...this.$refs.table.getData()]);
      this.$set(this.form, 'produceParam', this.$refs.table.getData())
    },

    /* 表格数据源 */
    datasource({ page, limit, where }) {
      return []
    },

    remove(row) {
      const data = this.$refs.table.getData() ?? [];

      if (row.id) {
        this.removeList.push(row.id);
        this.$refs.table.setData(data.filter((d) => d.id !== row.id));
      } else {
        this.$refs.table.setData(
          data.filter((d) => d.paramId !== row.paramId)
        );
      }
    },

    /* 保存编辑 */
    save() {
      this.$refs.form.validate((valid) => {

        if (!valid) {
          return false;
        }
        this.loading = true;
        if (!this.isUpdate) {
          delete this.form.id;
        }
        const saveOrUpdate = this.isUpdate
          ? parameter.update
          : parameter.save;


        saveOrUpdate(this.form)
          .then((msg) => {
            this.loading = false;
            this.form = {};
            const info = this.isUpdate ? '修改成功' : '新增成功'
            this.$message.success(info);
            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.$refs.table.setData(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,
           
          }

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

        else {
          this.isUpdate = false;
        }


      } else {
        this.$refs.form.clearValidate();
        this.form = { ...this.defaultForm };
      }
    }
  }
};
</script>