kd-aiot-frontend/src/views/rulesManagement/matterRules/components/operationGuideDialog.vue

<!-- 操作手册弹窗 -->
<template>
  <el-dialog
    class="ele-dialog-form"
    title="编辑"
    v-if="visible"
    :append-to-body="true"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="1000px"
  >
    <headerTitle title="操作工具">
      <el-button type="primary" size="small" @click="handleAdd">新增</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.name }}
        </template></el-table-column
      >

      <el-table-column label="工具编码" prop="code" min-width="120">
        <template slot-scope="{ row }">
          {{ row.code }}
        </template></el-table-column
      >

      <el-table-column label="牌号" prop="brandNum" min-width="120">
        <template slot-scope="{ row }">
          {{ row.brandNum }}
        </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)"
            >删除设备</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <headerTitle title="操作指导">
      <el-button type="primary" size="small" @click="addPostscript"
        >新增</el-button
      >
    </headerTitle>

    <el-table
      ref="multipleTable"
      :data="form.procedureList"
      tooltip-effect="dark"
      style="width: 100%"
      stripe
      :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <!-- <el-table-column label="排序" prop="" width="100">
        <template slot-scope="{ row }">
          <el-input
            placeholder="请输入"
            type="number"
            v-model.number="row.sort"
            clearable
          ></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
          ></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)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

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

    <ProductModal ref="productRefs" @chooseModal="chooseModal" />
  </el-dialog>
</template>

<script>
  // import { update, getById } from '@/api/inspectionClassify';
  import ProductModal from './ProductModal.vue';
  export default {
    components: {
      ProductModal
    },

    data() {
      const defaultForm = function () {
        return {
          toolList: [],
          procedureList: []
        };
      };
      return {
        defaultForm,
        // 表单数据
        form: { ...defaultForm() },
        currentIndex: 0,
        // 表单验证规则
        rules: {
          name: [{ required: true, message: '请输入', trigger: 'blur' }],

          type: {
            required: true,
            message: '请选择',
            trigger: 'change'
          }
        },
        visible: false,

        title: null,
        loading: false
      };
    },

    created() {},
    methods: {
      open(row, index) {
        console.log(row);
        console.log(index);
        if (row) {
          this.form = row;
        }
        this.currentIndex = index;
        this.visible = true;
      },
      /* 保存编辑 */
      save() {
        this.$emit('save', this.form, this.currentIndex);
        this.visible = false;
      },
      restForm() {
        this.form = { ...this.defaultForm() };
      },
      handleClose() {
        this.restForm();
        this.visible = false;
      },

      handleAdd() {
        this.$refs.productRefs.open(this.form.toolList);
      },

      chooseModal(data) {
        this.form.toolList = [...this.form.toolList, ...data];
      },

      removeItem(idx, row) {
        if (this.form.toolList.length == 1) {
          return this.$message.error('至少保留一个设备！');
        }

        this.$confirm(`是否删除这个设备？`).then(async () => {
          this.form.toolList.splice(idx, 1);

          if (row.id) {
            this.form.toolRemoveIds.push(row.id);
          }
        });
      },

      addPostscript() {
        this.form.procedureList.push({ sort: null, content: '' });
      },
      removePostscript(idx, row) {
        if (this.form.procedureList.length == 1) {
          return this.$message.error('至少保留一个事项！');
        }

        this.$confirm(`是否删除这个事项？`).then(async () => {
          this.form.procedureList.splice(idx, 1);
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .location-warp {
    display: flex;

    .detail {
      margin-left: 10px;
    }
  }

  :deep(
      .el-dialog:not(.ele-dialog-form)
        .el-dialog__body
        .el-form
        .el-form-item:last-child
    ) {
    margin-bottom: 22px;
  }
</style>