kd-aiot-frontend-mes/src/views/cqzb/components/add.vue

<template>
  <ele-modal
    :title="dialogTitle"
    :visible.sync="visible"
    :before-close="handleClose"
    width="80%"
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :close-on-click-modal="false"
    :maxable="true"
    append-to-body
  >
    <el-form label-width="110px" :model="formData">
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="规则名称"
            prop="name"
            :rules="{
              required: true,
              message: '请选择规则名称',
              trigger: 'change'
            }"
          >
            <!-- <el-input v-model="formData.code" placeholder="请输入" /> -->
            <el-select
              style="width: 100%"
              v-model="formData.name"
              placeholder="请选择"
              @change="changeList"
            >
              <el-option
                v-for="(item, index) in listData"
                :key="index"
                :label="item.name"
                :value="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="记录表名称"
            prop="biaoName"
            :rules="{
              required: true,
              message: '请输入记录表名称',
              trigger: 'blur'
            }"
          >
            <el-input v-model="formData.biaoName" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="记录表编码" prop="biaoCode">
            <el-input
              disabled
              v-model="formData.biaoCode"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="车间区域" prop="quyu">
            <el-input v-model="formData.quyu" placeholder="请选择" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工单" prop="workOrder">
            <el-input
              v-model="formData.workOrder"
              placeholder="请选择"
              @click.native="selectWork"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工序名称" prop="gongxu">
            <el-input v-model="formData.gongxu" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="产品名称" prop="chanp">
            <el-input v-model="formData.chanp" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品批号" prop="branNo">
            <el-input v-model="formData.branNo" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品型号" prop="xingh">
            <el-input v-model="formData.xingh" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="产品规格" prop="xingh">
            <el-input v-model="formData.xingh" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="清场完成时间"
            prop="time"
            :rules="{
              required: true,
              message: '请输入记录表名称',
              trigger: 'blur'
            }"
          >
            <el-date-picker
              style="width: 100%"
              v-model="formData.time"
              type="datetime"
              placeholder="选择"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="清场有效期"
            prop="yxq"
            :rules="{
              required: true,
              message: '请输入记录表名称',
              trigger: 'blur'
            }"
          >
            <el-date-picker
              style="width: 100%"
              v-model="formData.yxq"
              type="datetime"
              placeholder="选择"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="清场检查结论"
            prop="jielun"
            :rules="{
              required: true,
              message: '请选择清场检查结论',
              trigger: 'change'
            }"
            class="table_list"
          >
            <el-radio-group v-model="formData.jielun">
              <el-radio :label="1">合格</el-radio>
              <el-radio :label="2">不合格</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="ruleItems"
        :toolkit="[]"
        :need-page="false"
        row-key="id"
        class="table_list"
      >
        <template v-slot:situation="{ row }">
          <el-radio-group v-model="row.situation">
            <el-radio :label="2">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </template>
        <template v-slot:toolList="{ row }">
          <div
            style="display: inline-block"
            v-for="(item, idx) in row.toolList"
            :key="idx"
            >{{ item.name }}
            <span v-if="row.toolList && idx != row.toolList.length - 1"
              >,
            </span>
          </div>
        </template>
        <template v-slot:cleaners="{ row, $index }">
          <el-input
            placeholder="请选择"
            v-model="row.cleaners"
            @click.native="cleanersOpen(row, $index)"
          ></el-input>
        </template>
        <template v-slot:result="{ row }">
          <el-radio-group v-model="row.result">
            <el-radio :label="2">不合格</el-radio>
            <el-radio :label="1">合格</el-radio>
          </el-radio-group>
        </template>
        <template v-slot:describe="{ row }">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="row.describe"
          >
          </el-input>
        </template>
      </ele-pro-table>
    </el-form>
    <template v-slot:footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="preserve"> 保存 </el-button>
    </template>
    <Select ref="selectRef" @setPersonnel="setPersonnel" />
  </ele-modal>
</template>

<script>
  import Select from './select.vue';
  export default {
    components: { Select },
    data() {
      return {
        visible: false,
        dialogTitle: '新增',
        formData: {},
        listData: [
          {
            ruleItems: [
              {
                inspectionCode: 'ZJX20250808285',
                name: '顶棚清洁干净',
                textType: '8',
                defaultValue: '',
                maxValue: '',
                minValue: '',
                unitName: '',
                status: 1,
                inspectionStandard: '',
                unit: '',
                symbol: '',
                inspectionRemark: '',
                toolList: [],
                postscriptList: [],
                toolRemoveIds: [],
                postscriptRemoveIds: []
              },
              {
                inspectionCode: 'ZJX20250808286',
                name: '墙面清洁干净',
                textType: '8',
                defaultValue: '',
                maxValue: '',
                minValue: '',
                unitName: '',
                status: 1,
                inspectionStandard: '',
                unit: '',
                symbol: '',
                inspectionRemark: '就',
                toolList: [],
                postscriptList: [
                  {
                    sort: 1,
                    content: '注意1'
                  },
                  {
                    sort: 2,
                    content: '注意2'
                  },
                  {
                    sort: 3,
                    content: '注意3'
                  }
                ],
                toolRemoveIds: [],
                postscriptRemoveIds: []
              },
              {
                inspectionCode: 'ZJX20250808288',
                name: '出风口清洁干净',
                textType: '8',
                defaultValue: '',
                maxValue: '',
                minValue: '',
                unitName: '',
                status: 1,
                inspectionStandard: '',
                unit: '',
                symbol: '',
                inspectionRemark: '',
                toolList: [],
                postscriptList: [],
                toolRemoveIds: [],
                postscriptRemoveIds: []
              }
            ],
            status: 1,
            classification: 1,
            name: '清场清洁记录'
          }
        ],
        ruleItems: []
      };
    },
    computed: {
      columns() {
        return [
          {
            prop: 'name',
            label: '清场项目',
            align: 'center',
            minWidth: 130
          },
          {
            prop: 'toolList',
            slot: 'toolList',
            label: '清洁工具',
            align: 'center',
            minWidth: 150
          },
          {
            prop: 'situation',
            slot: 'situation',
            label: '清洁情况',
            align: 'center',
            minWidth: 130
          },
          {
            prop: 'cleaners',
            slot: 'cleaners',
            label: '清洁人',
            align: 'center',
            minWidth: 130
          },
          {
            prop: 'result',
            slot: 'result',
            label: '检查结果',
            align: 'center',
            minWidth: 160
          },
          {
            prop: 'describe',
            slot: 'describe',
            label: '异常描述',
            align: 'center',
            minWidth: 300
          }
        ];
      }
    },
    methods: {
      handleClose() {
        this.visible = false;
      },
      open() {
        this.visible = true;
      },
      cleanersOpen(row, index) {
        this.$refs.selectRef.open(row, index);
      },
      setPersonnel(name, index) {
        console.log(name, 'name');
        console.log(index, 'index');
        this.$set(this.ruleItems[index], 'cleaners', name);
      },
      //   选择工单
      selectWork() {},

      //   保存
      preserve() {},

      changeList(e) {
        this.ruleItems = this.listData[e].ruleItems;
      }
    }
  };
</script>

<style scoped lang="scss">
  ::v-deep .table_list {
    .el-radio__inner {
      border-radius: 2px; /* 改为方形，多选框的圆角通常很小 */
      width: 14px;
      height: 14px;
    }

    /* 选中状态 */
    .el-radio__input.is-checked .el-radio__inner {
      background: #409eff; /* 选中时的背景色 */
      border-color: #409eff;
    }
    /* 选中状态的内层（原本是圆形，现在改为打勾图标） */
    .el-radio__inner::after {
      width: 4px;
      height: 8px;
      border: 2px solid #fff;
      border-left: 0;
      border-top: 0;
      left: 3px;
      top: 1px;
      transform: rotate(45deg) scaleY(1);
      background: transparent; /* 去掉背景 */
      border-radius: 0;
    }

    .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
      background-color: none !important;
    }
  }
</style>