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

<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    width="960px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    :title="isView ? '查看工步' : isUpdate ? '修改工步' : '添加工步'"
    @update:visible="updateVisible"
    :maxable="true"
  >
    <header-title title="基本信息"></header-title>
    <el-form ref="form" :model="form" :rules="rules" label-width="140px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="编码:">
            <el-input
              disabled
              v-model="form.code"
              clearable
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="名称:" prop="name">
            <el-input :disabled="isView" v-model="form.name" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="状态:" prop="status">
            <el-select
              v-model="form.status"
              placeholder="请选择"
              style="width: 100%"
              :disabled="isView"
            >
              <el-option label="生效" :value="0" />
              <el-option label="失效" :value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="form.textType === '7'">
          <el-form-item label="内容:" prop="defaultValue">
            <el-input
              v-model="form.defaultValue"
              type="textarea"
              :disabled="isView"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注:" prop="remark">
            <el-input
              placeholder="请输入"
              v-model="form.remark"
              type="textarea"
              :disabled="isView"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="排序:" prop="sort">
            <!--            <el-input :disabled="isView" type="number" v-model="form.sort" />-->
            <el-input-number v-model="form.sort" :min="1" :disabled="isView" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="附件上传:" prop="sort">
            <!-- <fileUpload v-model="form.files" :disabled="isView"></fileUpload> -->
            <fileMain v-model="form.files" :type="isView?'view':'add'"></fileMain>

          </el-form-item>
        </el-col>
      </el-row>

      <!-- 工步参数修改 2025-06-24 -->
      <headerTitle title="物品清单">
        <el-button
          type="primary"
          size="small"
          @click="handleAdd"
          v-show="!isView"
          >新增</el-button
        >
      </headerTitle>

      <el-table
        ref="multipleTable"
        :data="form.toolList"
        tooltip-effect="dark"
        style="width: 100%"
        stripe
        :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
      >
        <el-table-column label="编码" prop="code" min-width="120">
          <template slot-scope="{ row }">
            {{ row.code }}
          </template></el-table-column
        >

        <el-table-column label="名称" prop="code" min-width="120">
          <template slot-scope="{ row }">
            {{ row.name }}
          </template></el-table-column
        >
        <el-table-column label="规格" prop="brandNum" min-width="120">
          <template slot-scope="{ row }">
            {{ row.specification }}
          </template></el-table-column
        >

        <el-table-column label="型号" prop="modelType" min-width="120">
          <template slot-scope="{ row }">
            {{ row.modelType }}
          </template></el-table-column
        >

        <el-table-column label="操作" fixed="right">
          <template slot-scope="{ $index, row }">
            <el-button
              type="text"
              @click="removeItem($index, row)"
              v-show="!isView"
              >删除设备</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <headerTitle title="注意事项" class="focus-item">
        <el-button
          type="primary"
          size="small"
          @click="addPostscript"
          v-show="!isView"
          >新增</el-button
        >
      </headerTitle>

      <el-table
        ref="multipleTable"
        :data="form.postscriptList"
        tooltip-effect="dark"
        style="width: 100%"
        stripe
        :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
      >
        <el-table-column label="排序" prop="" width="140">
          <template slot-scope="{ row }">
            <el-input
              placeholder="请输入"
              type="number"
              v-model.number="row.sort"
              clearable
              :disabled="isView"
            ></el-input> </template
        ></el-table-column>

        <el-table-column label="注意事项" prop="" min-width="120">
          <template slot-scope="{ row }">
            <el-input
              placeholder="请输入"
              type="textarea"
              :rows="1"
              v-model="row.content"
              clearable
              :disabled="isView"
            ></el-input> </template
        ></el-table-column>

        <el-table-column label="操作" fixed="right" width="100">
          <template slot-scope="{ $index, row }">
            <el-button
              type="text"
              @click="removePostscript($index, row)"
              v-show="!isView"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>

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

    <!-- 工作中心弹窗 -->
    <ProductModalMultiple ref="productRefs" @selection="chooseModal" />
  </ele-modal>
</template>

<script>
  import stepManagement from '@/api/technology/stepManagement';
  import fileUpload from '@/components/addDoc/fileUpload.vue';
  import ProductModalMultiple from '@/views/material/BOMmanage/components/ProductModalMultiple.vue';
  export default {
    components: {
      ProductModalMultiple,
      fileUpload
    },
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object,
      isView: Boolean,
      controlList: Array,
      typeList: Array
    },
    data() {
      const defaultForm = function () {
        return {
          id: null,
          code: '',
          name: '',
          sort: null,
          files: [],
          status: 0,
          postscriptList: [],
          toolList: [],
          toolRemoveIds: [],
          postscriptRemoveIds: [],
          textType: '7',
          defaultValue: '',
          remark: ''
        };
      };
      return {
        defaultForm,
        // 表单数据
        form: defaultForm(),
        // 表单验证规则
        rules: {
          name: [{ required: true, message: '请输入工步名称', trigger: 'blur' }]
        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        chooseItem: null
      };
    },
    computed: {
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      },
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    methods: {
      /* 添加质量工具 */
      handleAdd() {
        this.$refs.productRefs.open(2, '', this.form.toolList);
      },
      chooseModal(data) {
        this.form.toolList = [...this.form.toolList, ...data];
      },
      removeItem(idx, row) {
        this.$confirm(`是否删除这个设备？`).then(async () => {
          this.form.toolList.splice(idx, 1);

          if (row.id) {
            this.form.toolRemoveIds.push(row.id);
          }
        });
      },
      /* 添加注意事项 */
      addPostscript() {
        this.form.postscriptList.push({ sort: null, content: '' });
      },
      removePostscript(idx, row) {
        this.$confirm(`是否删除这个注意事项？`).then(async () => {
          this.form.postscriptList.splice(idx, 1);
          if (row.id) {
            this.form.postscriptRemoveIds.push(row.id);
          }
        });
      },
      /* 保存编辑 */
      save() {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          if (!this.isUpdate) {
            delete this.form.id;
          }
          this.loading = true;
          stepManagement
            .save(this.form)
            .then((msg) => {
              this.loading = false;
              this.$message.success(
                (this.isUpdate ? '修改' : '新建') + msg.message
              );
              this.updateVisible(false);
              this.$emit('done');
            })
            .catch((e) => {
              this.loading = false;
              // this.$message.error(e.message);
            });
        });
      },
      /* 更新visible */
      updateVisible(value) {
        this.form = { ...this.defaultForm() };
        this.$emit('update:visible', value);
      }
    },

    watch: {
      async visible(visible) {
        if (visible) {
          if (this.data) {
            const res = await stepManagement.getById(this.data.id);
            this.$util.assignObject(this.form, {
              ...res
            });
            // reset remove id data by copy from remote data
            this.form.toolRemoveIds = [];
            this.form.postscriptRemoveIds = [];
            this.isUpdate = true;
          } else {
            this.form = { ...this.defaultForm() };
            this.isUpdate = false;
          }
        } else {
          this.$refs.form.clearValidate();
          this.form = { ...this.defaultForm() };
          // reset remove id data by copy from remote data
          this.form.toolRemoveIds = [];
          this.form.postscriptRemoveIds = [];
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .focus-item {
    margin-top: 10px;
  }
</style>