kd-aiot-frontend/src/views/technology/production/components/user-setting.vue

<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    width="1060px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    :title="`给工序【${this.data?.code}${this.data?.name}】配置参数`"
    @update:visible="updateVisible"
  >
    <div class="ele-body">
      <ele-pro-table
        ref="table"
        :needPage="false"
        :columns="columns"
        :datasource="datasource"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="showAddLog"
          >
            添加参数
          </el-button>
        </template>
        <!-- 描述 -->
        <template v-slot:description="{ row }">
          <el-input v-model="row.description" placeholder="请输入"></el-input>
        </template>
        <!-- 单位 -->
        <template v-slot:unitName="{ row }">
          <el-input v-model="row.unitName" placeholder="请输入"></el-input>
        </template>
        <!-- 上限 -->
        <template v-slot:maxValue="{ row }">
          <el-input v-model="row.maxValue" placeholder="请输入"></el-input>
        </template>
        <!-- 下限 -->
        <template v-slot:minValue="{ row }">
          <el-input v-model="row.minValue" placeholder="请输入"></el-input>
        </template>
        <!-- 默认值 -->
        <template v-slot:defaultValue="{ row }">
          <el-input v-model="row.defaultValue" placeholder="请输入"></el-input>
        </template>
        <!-- 默认值 -->
        <template v-slot:notNull="{ row }">
          <el-select v-model="row.notNull" placeholder="请选择">
            <el-option
              v-for="item in timeType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </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>

    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
    <ele-modal
      width="1720px"
      :visible="addDialog"
      :append-to-body="true"
      :close-on-click-modal="true"
      @update:visible="closeAdd"
      custom-class="ele-dialog-form"
    >
      <Paramrter :data="tableData" ref="Paramrter" />
      <template v-slot:footer>
        <el-button @click="closeAdd">取消</el-button>
        <el-button type="primary" :loading="loading" @click="addParamrter">
          添加
        </el-button>
      </template>
    </ele-modal>
  </ele-modal>
</template>

<script>
  import producetask from '@/api/technology/production';
  import parameter from '@/api/technology/parameter';
  import Paramrter from './parameter';
  import { deepClone } from '@/components/FormGenerator/utils/index';
  export default {
    components: { Paramrter },
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object
    },
    data() {
      return {
        timeType: [
          { value: 1, label: '是' },
          { value: 0, label: '否' }
        ],
        // 表格列配置
        columns: [
          {
            prop: 'paramName',
            label: '参数名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            align: 'center',
            slot: 'description',
            prop: 'description',
            label: '文本描述',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'unitName',
            slot: 'unitName',
            label: '参数单位',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'maxValue',
            slot: 'maxValue',
            label: '参数上限',
            align: 'center',
            // showOverflowTooltip: true
          },
          {
            prop: 'minValue',
            slot: 'minValue',
            label: '参数下限',
            align: 'center',
            // showOverflowTooltip: true
          },
          {
            prop: 'defaultValue',
            slot: 'defaultValue',
            label: '默认值',
            align: 'center',
            // showOverflowTooltip: true
          },
          {
            prop: 'notNull',
            slot: 'notNull',
            label: '是否必填',
            align: 'center',
            showOverflowTooltip: true
          },

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

            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        loading: false,
        addDialog: false,
        removeList: [],
        tableData: []
      };
    },

    methods: {
      addParamrter() {
        let arr = deepClone(this.$refs.Paramrter.selection)
        arr.forEach((element) => {
          this.$set(element, 'paramId', element.id);
          this.$set(element, 'paramName', element.name);
          delete element.id;
          delete element.name;
        });

        this.$refs.table.setData([...arr, ...this.$refs.table.getData()]);
        this.closeAdd();
      },
      showAddLog() {
        this.tableData = this.$refs.table.getData()
        this.addDialog = true;
      },
      /*关闭选择参数*/
      closeAdd() {
        this.$refs.Paramrter.$refs.tableParameter.setSelectedRows([]);
        this.addDialog = false;
      },
      /* 刷新表格 */
      reload() {
        this.$refs.table.reload();
      },
      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)
          );
        }
      },
      /* 表格数据源 */
      async datasource({ page, limit, where }) {
        if (this.data?.id) {
          console.log(22222);
          const res = await producetask.paramList({
            taskId: this.data.id,
            pageNum: 1,
            size: -1
          });
          return res;
        }
      },
      /* 保存编辑 */
      save() {
        let arr = this.$refs.table.getData();
        arr.forEach((it) => {
          if (!it.taskId) {
            this.$set(it, 'taskId', this.data.id);
          }
        });
        if(!arr.length){
          return this.$message.warning('参数不能为空')
        }
        let canSave = true
        for(var i=0;i<arr.length;i++){
            const defaultValue = Number(arr[i].defaultValue)
            const maxValue = Number(arr[i].maxValue)
            const minValue = Number(arr[i].minValue)
            if(defaultValue!=''&maxValue!=''){
               if(defaultValue>maxValue||defaultValue==maxValue){
                  this.$message.warning('默认值应小于参数上限')
                  canSave = false
                  break
               }
            }
            if(defaultValue!=''&minValue!=''){
               if(defaultValue<minValue||defaultValue==minValue){
                  this.$message.warning('默认值应大于参数下限')
                  canSave = false
                  break
               }
            }
            if(maxValue!=''&minValue!=''){
               if(maxValue<minValue||maxValue==minValue){
                  this.$message.warning('参数上限应大于参数下限')
                  canSave = false
                  break
               }
            }
        }
        if(canSave){
            producetask
              .paramSave({
                removeList: this.removeList,
                saveList: arr
              })
              .then((msg) => {
                if(msg){
                  this.$message.success(msg);
                  this.updateVisible(false);
                }
              });
        }
        // this.$refs.form.validate((valid) => {
        //   if (!valid) {
        //     return false;
        //   }
        //   if (!this.isUpdate) {
        //     delete this.form.id;
        //   }

        //   this.form.workBeat.beatTimes = this.totalTime;

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

    watch: {
      visible(visible) {
        if (visible) {
          this.$nextTick(() => {
            this.reload();
          });
        }
      }
    }
  };
</script>