jonhon-mes-web/src/views/productionTesting/InspectionTemplate.vue

<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      v-model:page="page"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template #menu-left>
        <el-button type="primary"    @click="handleAdd">新 增</el-button>
        <el-button type="primary"    @click="handleSet">批量设置分类</el-button>
      </template>
      <template #menu="{row}">
        <el-button type="text"  @click="editRow(row.timId)">修改</el-button>
        <el-button type="text"  @click="deleteRow(row.timId)">删除</el-button>
      </template>
      <template #userName="{row}">
            {{ row.updateMan.userName}}
        </template>
    </avue-crud>
    <el-dialog title="项目" append-to-body v-model="showDialog" width="60%">
      <el-form ref="addForm" :rules="formRules" :model="formData" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="模板编码" prop="timCode" >
              <el-input v-model="formData.timCode" placeholder="请输入模板编码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模板名称" prop="timName" >
              <el-input v-model="formData.timName" placeholder="请输入模板名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="优先级" prop="priority">
              <el-input v-model="formData.priority" placeholder="请输入优先级"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div>
        <el-button type="primary"  icon="el-icon-plus" @click="insertEvent()">插入一行</el-button>
        <el-button plain type="danger" @click="remove">删除选择行</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
      <div>
        <el-table :data="tidList" @selection-change="selectionChangeProject" @select="selectChange">
          <el-table-column type="selection" width="55px"></el-table-column>
          <el-table-column label="项目编号" prop="tidCode">
            <template #default="scope">
              <el-input v-model="scope.row.tidCode"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="项目" prop="nameAmId">
            <template #default="scope">
             <el-select  v-model="scope.row.nameAmId" @change="(value) =>changeProject(value,scope.$index)">
              <el-option v-for="item in projectArr" :key="item.twoData" :value="item.oneData" :label="item.oneData + '-' + item.twoData"></el-option>
             </el-select>
             <!-- <el-input v-if="scope.row.tidName" v-model="scope.row.tidName"></el-input> -->
            </template>
          </el-table-column>
          <el-table-column label="标准" prop="tidCanon">
            <template #default="scope">
              <el-select v-if="!trialItemList.includes(scope.row.tidName)" v-model="scope.row.tidCanon">
                <el-option></el-option>
              </el-select>
              <el-input v-else v-model="scope.row.tidCanon"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog title="修改" append-to-body v-model="setDialog" width="500px">
      <el-form ref="addForm" :rules="setRules" :model="setData" >
        <el-form-item label="分类">
          <el-select v-model="setData.type">
            <el-option v-for="item in typeData" :key="item.id" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="setDialog = false">取 消</el-button>
          <el-button type="primary" @click="setDialog = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </basic-container>
</template>

<script>

export default {
  data(){
    return{
      data:[],
      loading:false,
      form:{},
      query:{},
      page:{
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      showDialog:false,
      setDialog:false,
      formData:{},
      tidList:[],
      selectionProjectList:[],
      projectArr:[],
      dialogData:[],
      selectId:null,
      deleteTidArr:[],
      trialItemList: [
        '常温绝缘电阻检测',
        '常温耐压检测',
        '泄漏率检测',
        '低温密封性检测',
        '高温密封性检测',
        '潮湿绝缘电阻检测',
        '高温绝缘电阻检测',
        '承压检测',
        '探伤检测',
        '液氮存储检测',
        '煤油绝缘检测',
        '常温密封性检测',
        '温冲试验检测',
        '其他检测'
      ],
      formRules:{
        timCode: [{ required: true, message: '请输入模板编码', trigger: 'blur' }],
        timName: [{ required: true, trigger: 'blur', message:'请输入模板名称' }],
      },
      selectionList:[],
      typeData:[
        {label:'A',value:'A',id:'001'}
      ],
      setData:{},
      option:{
        tip: false,
        align: 'center',
        size: 'medium',
        height:'auto',
        searchLabelWidth:120,
        simplePage: true,
        searchShow: true,
        searchMenuSpan: 6,
        searchIcon: true,
        searchIndex: 3,
        tree: false,
        border: true,
        selection: true,
        viewBtn: false,
        editBtn:false,
        addBtn:false,
        delBtn: false,
        editBtnText: '修改',
        viewBtnText:'详情',
        labelWidth: 120,
        // menuWidth: 330,
        dialogWidth: 1200,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: false,
        filterBtn: true,
        searchShowBtn: false,
        excelBtn: true,
        index: false,
        showOverflowTooltip: true,
        searchLabelPosition:'left',
searchLabelPosition:'left',
 searchGutter:24,
  searchSpan:6,
menuAlign: 'left',
gridBtn:false,
searchMenuPosition:'right',
addBtnIcon: ' ',
        viewBtnIcon: ' ',
        delBtnIcon: ' ',
        editBtnIcon: ' ',
        column: [
          {
              label: '模板编码',
              prop: 'timCode',
              addDisplay: false,
              editDisplay: false,
              span: 24,
              search:true,
              width:200,
              rules: [
              {
                  required: true,
                  message: '请输入模板编码',
                  trigger: 'click',
              },
              ],
          },
          {
              label: '模板名称',
              prop: 'timName',
              addDisplay: false,
              editDisplay: false,
              span: 24,
              search:true,
              width:200,
              rules: [
              {
                  required: true,
                  message: '请输入模板名称',
                  trigger: 'click',
              },
              ],
          },
          {
              label: '工序数',
              prop: 'proQuantity',
              addDisplay: false,
              editDisplay: false,
              span: 24,
              search:true,
              width:200,
              rules: [
              {
                  required: true,
                  message: '请输入工序数',
                  trigger: 'click',
              },
              ],
          },
          {
              label: '优先级',
              prop: 'priority',
              addDisplay: false,
              editDisplay: false,
              span: 24,
              search:false,
              width:200,
              rules: [
              {
                  required: true,
                  message: '请输入优先级',
                  trigger: 'click',
              },
              ],
          },
          {
              label: '分类',
              prop: 'timType',
              addDisplay: false,
              editDisplay: false,
              span: 24,
              search:true,
              rules: [
              {
                  required: true,
                  message: '请输入分类',
                  trigger: 'click',
              },
              ],
          },
          {
              label: '修改人',
              prop: 'userName',
              addDisplay: false,
              editDisplay: false,
              span: 24,
              search:true,
              width:200,
              rules: [
              {
                  required: true,
                  message: '请输入修改人',
                  trigger: 'click',
              },
              ],
          },
          {
              label: '修改时间',
              prop: 'updateTime',
              addDisplay: false,
              editDisplay: false,
              span: 24,
              search:true,
              width:200,
              rules: [
              {
                  required: true,
                  message: '请输入修改时间',
                  trigger: 'click',
              },
              ],
          },
        ]
      }
    }
  },
  mounted(){
    this.projectArr = [
      {
        "amId": 4,
        "douOneData": null,
        "fourData": null,
        "keyValue": 4,
        "memo": null,
        "oneData": "003",
        "threeData": null,
        "twoData": "泄漏率检测",
        "type": 2,
        "updateTime": "2024-02-27 16:20:30"
      },
      {
        "amId": 5,
        "douOneData": null,
        "fourData": null,
        "keyValue": 5,
        "memo": null,
        "oneData": "002",
        "threeData": null,
        "twoData": "外观检测",
        "type": 2,
        "updateTime": "2024-02-27 16:20:30"
      },
      {
        "amId": 6,
        "douOneData": null,
        "fourData": null,
        "keyValue": 6,
        "memo": null,
        "oneData": "001",
        "threeData": null,
        "twoData": "厚度检测",
        "type": 2,
        "updateTime": "2024-02-27 16:20:30"
      }
    ]
  },
  methods:{
    selectionChangeProject(list){
      this.selectionProjectList = list
    },
    selectChange(list,val){
      val._select = !val._select
    },
    insertEvent(row = -1) {
      const num = this.tidList.length;
      let tidCode = (num + 1) * 5;
      if (tidCode.toString().length == 1) {
        tidCode = '000' + tidCode;
      } else if (tidCode.toString().length == 2) {
        tidCode = '00' + tidCode;
      } else if (tidCode.toString().length == 3) {
        tidCode = '0' + tidCode;
      } else if (tidCode.toString().length == 4) {
        tidCode = '' + tidCode;
      }
      const record = { tidCode,_select:false };
      this.tidList.push(record)
    },
    // 切换项目
    changeProject(value,index){
      this.tidList[index].tidName = this.projectArr.find(item => item.oneData == value).twoData
    },
    remove(){
      let arr = this.tidList.filter(item => item._select)
      if(arr.length != 0){
        this.$confirm('确定将选择数据删除?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() =>{
          if(this.selectId){
            console.log('111111111111111')
            let deleteData = this.tidList.filter(item => item._select)
            console.log('deleteData---------------',deleteData)
            this.deleteTidArr = deleteData.filter(item => item.tidId)
          }
          let deleteArr = this.tidList.filter(item => !item._select)
          this.tidList = deleteArr
        })
      }else{
        this.$message.error('请至少选择一条数据进行操作！')
      }
    },
    handleSave(){
      this.$refs.addForm.validate(valid => {
        if(valid){
          // if(this.tidList)
          const deleteIdArr = []
          this.deleteTidArr.map(item =>{
            deleteIdArr.push(item.tidId)
          })
          console.log('dele----------------------',deleteIdArr)
          console.log('tidList----------------------',this.tidList)
          // let filteredObjArr = this.tidList.filter(item => !deleteIdArr.some(val => val === item.id));
          // console.log('filteredObjArr====================',filteredObjArr)
          let params = {
            deleteIds:deleteIdArr,
            dsTrialitemModel:this.formData,
            list:this.tidList
          }

          console.log('paramd--------------------',params)
        }
      })
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    deleteRow(val){
      this.$confirm('确定删除该条数据?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() =>{

      })
    },
    handleAdd(){
      this.showDialog = true
      this.formData = {}
      this.tidList = []
      this.deleteTidArr = []
    },
    handleSet(){
      if(this.selectionChange.length == 0){
        this.$message.error('请至少选择一条数据')
      }else{
        this.setDialog = true
      }
    },
    editRow(val){
      console.log('val====================',val)
      this.selectId = val
      this.showDialog = true
      this.formData = {
        timCode: "002",
        timId: 2,
        timName: "化学镍含涂色标类试验项目",
        priority: 2
      }
      this.tidList = [
        {
          "canonAmId": null,
          "createTime": "2023-02-17 17:19:57",
          "keyValue": 8,
          "nameAmId": '003',
          "tidCanon": "参照文件010-02235435《热表分厂表处理零件检验规范》执行",
          "tidCode": "003",
          "tidId": 8,
          "tidName": "厚度检测",
        },
        {
          "canonAmId": null,
          "createTime": "2023-02-17 17:19:57",
          "keyValue": 8,
          "nameAmId": '003',
          "tidCanon": "参照文件010-02235435《热表分厂表处理零件检验规范》执行",
          "tidCode": "003",
          "tidId": 8,
          "tidName": "厚度检测",
        }
      ]
      this.dialogData = [
        {
          "canonAmId": null,
          "createTime": "2023-02-17 17:19:57",
          "keyValue": 8,
          "nameAmId": '003',
          "tidCanon": "参照文件010-02235435《热表分厂表处理零件检验规范》执行",
          "tidCode": "003",
          "tidId": 8,
          "tidName": "厚度检测",
        },
        {
          "canonAmId": null,
          "createTime": "2023-02-17 17:19:57",
          "keyValue": 8,
          "nameAmId": '003',
          "tidCanon": "参照文件010-02235435《热表分厂表处理零件检验规范》执行",
          "tidCode": "003",
          "tidId": 8,
          "tidName": "厚度检测",
        },
      ]
    },
    onLoad(){
      this.loading = true
      this.data = [
        {
          id:1,timId: 1,timCode:'001',timName:'化学镍不涂色标试验项目',proQuantity:7,priority:1,
          timType:'A',updateMan:{
            userName:'崔殿龙',
          },
          updateTime:'2024-01-22 12:35:40'
        },
        {
          id:2,timId: 2,timCode:'002',timName:'化学镍不涂色标试验项目',proQuantity:7,priority:1,
          timType:'A',updateMan:{
            userName:'崔殿龙',
          },
          updateTime:'2024-01-22 12:35:40'
        },
        {
          id:3,timId: 3,timCode:'003',timName:'化学镍不涂色标试验项目',proQuantity:7,priority:1,
          timType:'A',updateMan:{
            userName:'崔殿龙',
          },
          updateTime:'2024-01-22 12:35:40'
        },
      ]
      this.page.total = this.data.length
      this.loading = false
      setTimeout(() =>{
        this.selectionClear();
      },300)
    }
  }
}
</script>

<style>

</style>