kd-aiot-frontend-qms/src/views/inspectionPoint/components/inspectionProjectList.vue

<template>
  <div>
    <div class="title">质检项</div>

    <el-table :data="listPage" border height="30vh">
      <el-table-column
        label="序号"
        align="center"
        prop="inspectionCode"
        width="50"
      >
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="编码" align="center" prop="inspectionCode">
      </el-table-column>
      <el-table-column label="质检项名称" align="center" prop="inspectionName">
      </el-table-column>
      <el-table-column
        label="质检标准"
        align="center"
        prop="inspectionStandard"
        width="300px"
      >
        <template slot-scope="scope">
          <el-form-item label-width="0" prop="inspectionStandard">
            <el-input
              clearable
              v-model="scope.row.inspectionStandard"
              placeholder="请输入"
              @change="changeValue"
              :disabled="disabled"
            >
              <span slot="suffix"> {{ scope.row.unit }}</span>
              <DictSelection
                style="width: 80px"
                slot="prepend"
                clearable
                dictName="数学字符"
                v-model="scope.row.symbol"
              ></DictSelection>
            </el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <!-- <el-table-column label="质检工具" align="center" prop="inspectionTool">
      </el-table-column> -->
      <el-table-column label="描述" align="center" prop="description">
      </el-table-column>
      <el-table-column label="操作" align="center" width="70" v-if="!disabled">
        <template slot-scope="scope">
          <el-link
            type="danger"
            :underline="false"
            @click="handleDeleteItem(scope.$index, scope.row.id)"
          >
            删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="add-product" @click="addEquipment" v-if="!disabled">
      <i class="el-icon-circle-plus-outline"></i>
    </div>
    <EquipmentDialog ref="equipmentDialog" @choose="choose" />
  </div>
</template>

<script>
import EquipmentDialog from './EquipmentDialog';
export default {
  components: { EquipmentDialog },
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    type: {}
  },

  data() {
    return {
      listPage: []
    };
  },

  created() {
    console.log(this.list, 'this.list');
    this.listPage = JSON.parse(JSON.stringify(this.list));
  },
  methods: {
    choose(data) {
      this.listPage = data;
      this.$emit('changeDate', data);
    },
    handleDeleteItem(index, id) {
      this.listPage.splice(index, 1);
      this.$emit('changeDate', this.listPage);
    },
    changeValue() {
      this.$emit('changeDate', this.listPage);
    },
    addEquipment() {
      this.$refs.equipmentDialog.open(this.listPage.map((item) => item.id));
    },
    getValue() {
      return this.listPage.map((item) => item.id).toString();
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  margin-bottom: 20px;
}
.add-product {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 30px;
  color: #1890ff;
  margin: 10px 0;
  cursor: pointer;
}
</style>