完成检验下单功能优化

licp

2024-06-13 b3c202648513fc01b69e09b4e3bbe1865a0b6b8c

 src/components/view/b1-inspect-order-plan.vue

@@ -1,274 +1,543 @@
<style scoped>
.ins-order-plan-main{
  padding-top: 60px;
}
.ins-order-plan-main .search{
  width: 100%;
  margin-bottom: 10px;
  height: 10vh;
  background-color: #fff;
  border-radius: 3px;
}
.search .form-inline{
  height: 5vh;
  padding-top:2.5vh;
  padding-left: 1%;
}
.ins-order-plan-main .center{
  width: 100%;
  height: 70vh;
  background-color: #fff;
  border-radius: 3px;
}
.ins-order-plan-main .center .value-table{
  width:98%;
  height: 80%;
  margin-left:1%;
}
.tab {
  list-style-type: none;
  display: flex;
  padding: 10px 0px;
}
.tab li {
  line-height: 24px;
  padding: 6px 14px;
  font-size: 14px;
  color: #333333;
  border: 1px solid #EEEEEE;
  cursor: pointer;
}
   .ins-order-plan-main .title {
      font-size: 20px;
      color: #3A7BFA
   }

.tab li:nth-child(1) {
  border-radius: 8px 0 0 8px;
}
   .search {
      background-color: #fff;
      height: 80px;
      display: flex;
      align-items: center;
   }

.tab li:nth-child(3) {
  border-radius: 0 8px 8px 0;
}
   .search_thing {
      display: flex;
      align-items: center;
      height: 50px;
   }

.tab li.active {
  border-color: #3A7BFA;
  color: #3A7BFA;
}
.center .center-options:nth-child(1){
  padding-left: 1%;
}
.center .center-options .center-title {
  width:85%;
  padding-top: 20px;
  text-align: right;
}
.center .center-options .center-title span:last-child{
  color: #3A7BFA;
  font-size: 23px;
  font-weight: 400;
}
   .search_label {
      width: 120px;
      font-size: 14px;
      text-align: right;
   }

   .search_input {
      width: calc(100% - 120px);
   }

   .ins-order-plan-main .search {
      width: 100%;
      margin-bottom: 10px;
      height: 80px;
      background-color: #fff;
      border-radius: 3px;
   }

   .search .form-inline {
      height: 50px;
      padding-top: 20px;
      padding-left: 50px;
   }

   .ins-order-plan-main .center {
      width: calc(100% - 40px);
      height: calc(100% - 60px - 80px - 40px);
      background-color: #fff;
      border-radius: 3px;
      padding: 20px;
   }

   .ins-order-plan-main .center .value-table {
      width: 100%;
      height: calc(100% - 68px);
   }

   .tab {
      list-style-type: none;
      display: flex;
   }

   .tab li {
      line-height: 24px;
      padding: 6px 14px;
      font-size: 14px;
      color: #333333;
      border: 1px solid #EEEEEE;
      cursor: pointer;
   }

   .tab li:nth-child(1) {
      border-radius: 8px 0 0 8px;
   }

   .tab li:nth-last-child(1) {
      border-radius: 0 8px 8px 0;
   }

   .tab li.active {
      border-color: #3A7BFA;
      color: #3A7BFA;
   }

   .center .center-options .center-title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: right;
   }

   .center .center-options .center-title span:last-child {
      color: #3A7BFA;
      font-size: 23px;
      font-weight: 400;
   }

   .view-self-checkbox {
      margin-left: 50px;
   }
</style>
<style>
   .ins-order-plan-main .el-form-item__label{
      color: #000;
   }

  .ins-order-plan-main .el-table th.el-table__cell>.cell{
    height: 46px;
    line-height: 30px;
  }
</style>
<template>
  <div class="ins-order-plan-main">
    <div class="search">
      <el-form :inline="true" :model="searchForm" class="form-inline">
        <el-form-item label="样品名称:">
          <el-input clearable v-model="searchForm.sampleName" size="small" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="状态:">
          <el-select clearable size="small" v-model="searchForm.state" placeholder="请选择">
            <el-option v-for="(item,index) in insStateList" :key="index"
            :label="item.label" :value="item.value"></el-option>
   <div class="ins-order-plan-main">
      <div v-show="activeFace == 0&&state==0" style="height: 100%;">
         <p style="font-size: 16px;padding:19.5px 0px">检验任务</p>
         <div class="search">
            <div class="search_thing">
               <div class="search_label">委托编号：</div>
               <div class="search_input"><el-input size="small" placeholder="请输入" clearable
                     v-model="componentData.entity.entrustCode" @keyup.enter.native="refreshTable()"></el-input></div>
            </div>
            <div class="search_thing">
               <div class="search_label">检验状态：</div>
               <div class="search_input">
                  <el-select size="small" v-model="componentData.entity.insState" style="width: 100%;" @change="refreshTable()">
                     <el-option v-for="(a, i) in insStateList" :key="i" :label="a.label" :value="a.value"></el-option>
                  </el-select>
               </div>
            </div>
            <div class="search_thing" style="padding-left: 30px;">
               <el-button size="small" @click="refresh()">重 置</el-button>
               <el-button size="small" type="primary" @click="refreshTable()">查 询</el-button>
            </div>
         </div>
         <div class="center">
            <div class="center-options">
               <el-row>
                  <el-col :span="21">
                     <div style="display: flex;align-items: center;margin-bottom: 10px;">
                        <ul class="tab">
                           <li v-for="(m,i) in tabList" :key="i" :class="{active:i==tabIndex}" @click="handleTab(m,i)">{{m.label.replace('试验室','')}}
                           </li>
                        </ul>
                        <div>
                           <el-checkbox @change="changeCheckBox" class="view-self-checkbox"
                              v-model="alone"><span>我的任务</span></el-checkbox>
                        </div>
                     </div>
                  </el-col>
                  <el-col :span="3">
                     <div class="center-title">
                        <span>总计任务数量:</span>
                        <span v-if="$refs.insOrderPlan != undefined">{{$refs.insOrderPlan.total}}</span>
                     </div>
                  </el-col>
               </el-row>
            </div>
            <ValueTable :tableRowClassName="changeRowClass" class="value-table" ref="insOrderPlan"
               :url="$api.insOrderPlan.selectInsOrderPlanList" :upUrl="$api.user.updateUser" :componentData="componentData" @handleInspection="handleInspection"
               :key="upIndex"/>
         </div>
      </div>
      <el-dialog title="提示" :visible.sync="claimVisible" width="400px">
         是否认领委托编号<span style="color:#33C130">{{sampleUserForm.entrustCode}}</span>的任务
         <span slot="footer" class="dialog-footer">
            <el-button @click="claimVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmClaim" :loading="loading">确 定</el-button>
         </span>
      </el-dialog>
    <el-dialog title="检验交接" :visible.sync="connectVisible" width="400px">
         <div class="search_thing">
        <div class="search_label" style="width:90px">交接人员：</div>
        <div class="search_input">
          <el-select v-model="connectPerson" placeholder="请选择" style="width: 100%;" filterable>
            <el-option
              v-for="item in personList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="onReset">重置</el-button>
          <el-button size="small" type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="center">
      <div class="center-options">
        <el-row>
          <el-col :span="20">
            <ul class="tab">
              <li v-for="(m,i) in tabList" :key="i" :class="{active:i==tabIndex}" @click="handleTab(m,i)">{{m.label}}</li>
            </ul>
          </el-col>
          <el-col :span="4">
            <div class="center-title">
              <span>总计任务数量:</span>
              <span v-if="$refs.insOrderPlan != undefined">{{$refs.insOrderPlan.total}}</span>
            </div>
          </el-col>
        </el-row>
        </div>
      </div>
      <ValueTable :tableRowClassName="changeRowClass" class="value-table" ref="insOrderPlan" :url="$api.insOrderPlan.selectInsOrderPlanList" :upUrl="$api.user.updateUser" :componentData="componentData" :key="upIndex" @upUser="upUser"/>
    </div>
  </div>
         <span slot="footer" class="dialog-footer">
            <el-button @click="connectVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmConnect" :loading="loading">确 定</el-button>
         </span>
      </el-dialog>
      <div style="width: 100%;height: 100%;" v-if="activeFace >0">
         <Add :active="activeFace" :currentId="currentId"/>
      </div>
    <Inspection v-if="state>0" @goback="goback" :orderId="orderId" :sonLaboratory="componentData.entity.sonLaboratory" :state="state"/>
   </div>
</template>

<script>
import ValueTable from '../tool/value-table.vue'
import { getYearAndMonthAndDays } from '../../util/date'
export default {
  components:{
    ValueTable
  },
  data(){
    return {
      searchForm:{
        sampleName: null,
        state: null
      },
      tabList: [
        {
          label: '实验室1',
          value: 1
        },
        {
          label: '实验室2',
          value: 2
        },
        {
          label: '实验室3',
          value: 3
        }
      ],
      active: 1,
      tabIndex: 0,
      componentData: {
   import ValueTable from '../tool/value-table.vue'
     import Inspection from '../do/b1-inspect-order-plan/Inspection.vue'
   import {
      getYearAndMonthAndDays
   } from '../../util/date'
   import Add from '../do/b1-ins-order/add.vue'
   export default {
      components: {
         ValueTable,
      Inspection,
         Add
      },
      data() {
         return {
            alone: false,
            sampleUserForm: {
               entrustCode: null,
               insSampleId: null,
               userId: null
            },
            claimVisible: false,
            tabList: [],
            active: 1,
            tabIndex: 0,
            componentData: {
               entity: {
            state: 1,
            insState: null,
            sample: null,
                  orderBy: {
                     field: 'type',
                     order: 'desc'
                  }
                  sonLaboratory: null,
                  insState: null,
                  userId: null
               },
               isIndex: true,
               showSelect: false,
               select: false,
               sort: false,
               init: false,
               do: [{
                  id: '',
                  font: '检验',
                  type: 'text',
                  method: '',
                  field:[]
               },{
                  id: '',
                  font: '交接',
                  type: 'text',
                  method: ''
                     id: '',
                     font: '检验',
                     type: 'text',
                     method: 'handleInspection',
                     disabFun: (row, index) => {
                        return row.userId == null || row.insState == 3 || row.insState == 5
                     }
                  }, {
                     id: '',
                     font: '交接',
                     type: 'text',
                     method: 'handleConnect',
                     disabFun: (row, index) => {
                        return row.userId == null || row.orderUserId == null || row.insState == 5  || row.insState == 3
                     }
                  },
                  {
                     id: '',
                     font: '复核',
                     type: 'text',
                     method: 'handleReview',
                     disabFun: (row, index) => {
                        return row.userId == null || row.insState != 3 || row.verifyUser != 1
                     }
                  }, {
                     id: '',
                     font: '认领',
                     type: 'text',
                     method: 'claimFun',
                     disabFun: (row, index) => {
                        return row.userId != null
                     }
                  }
               ],
               linkEvent: {
                  entrustCode: {
                     method: 'selectAllByOne'
                  }
               },
          {
                  id: '',
                  font: '复核',
                  type: 'text',
                  method: ''
               },{
                  id: '',
                  font: '认领',
                  type: 'text',
                  method: ''
               }],
               tagField: {
            type:{
              select:[]
            },
            insState:{
              select:[]
            }
          },
                  type: {
                     select: []
                  },
                  insState: {
                     select: []
                  },
                  insResult: {
                     select: [{
                        value: 0,
                        label: '不合格',
                        type: 'danger'
                     },{
                        value: 1,
                        label: '合格',
                        type: 'success'
                     },{
                        value: '',
                        label: '未出结果',
                        type: 'info'
                     }]
                  }
               },
               selectField: {},
               requiredAdd:[],
               requiredUp:[]
               requiredAdd: [],
               requiredUp: []
            },
      upIndex: 0,
      planTotal: 0,
      insStateList: []
    }
  },
  created(){
    this.getTypeDicts()
    this.getInsStateDicts()
    this.refreshTable()
  },
  methods:{
    upUser(){

    },
    refreshTable() {
      this.$refs.insOrderPlan.selectList()
      this.$nextTick(()=>{
        this.planTotal = this.$refs.insOrderPlan.total
      })
    },
    changeRowClass(obj,rowIndex){
      let currentTime = getYearAndMonthAndDays()
      if(obj.row.sendTime && currentTime===obj.row.sendTime){
        return 'highlight-warning-row-border'
      }else if(obj.row.sendTime && currentTime>obj.row.sendTime){
        return 'highlight-danger-row-border'
      }
      return ''
    },
    onReset(){
      this.searchForm = {
        sampleName: null,
        state: null,
      }
      this.componentData.entity.insState = null
      this.componentData.entity.sample = null
      this.refreshTable()
    },
    onSubmit(){
      this.componentData.entity.insState = this.searchForm.state
      this.componentData.entity.sample = this.searchForm.sampleName
      this.$nextTick(()=>{
        this.refreshTable()
      })
    },
    handleTab(m, i) {
      this.tabIndex = i;
      //this.componentData.entity.state = m.value
      //this.refreshTable()
    },
    getTypeDicts() {
      this.$axios.post(this.$api.enums.selectEnumByCategory, {
        category: "紧急程度"
      }).then(res => {
        let data = res.data
        data.forEach(ele=>{
          if(ele.value==='0'){
            ele.type='success'
          }else if(ele.value==='1'){
            ele.type='warning'
          }else if(ele.value==='2'){
            ele.type='danger'
          }
        })
        this.componentData.tagField.type.select = data
      })
    },
    getInsStateDicts() {
      this.$axios.post(this.$api.enums.selectEnumByCategory, {
        category: "检验任务状态"
      }).then(res => {
        let data = res.data
        this.insStateList = data
        data.forEach(ele=>{
          //0:待检验 1:检验中 2:已检验 3:待复核 4:复核未通过 5:复核通过
          if(['2','5'].includes(ele.value)){
            ele.type='success'
          }else if(['1','3'].includes(ele.value)){
            ele.type='warning'
          }else if(['0','4'].includes(ele.value)){
            ele.type='danger'
          }
        })
        this.componentData.tagField.insState.select = data
      })
    },
  }
}
            upIndex: 0,
            planTotal: 0,
            insStateList: [],
        state:0,//0:台账页，1：检验页面,2检验页面(复核)，默认为0
            activeFace: 0, //1：下单，2：查看，3：审核，默认为0
            currentId: null,
            entityCopy: {},
            orderId: 0,
        personList:[],
        connectVisible:false,
        connectPerson:'',
        loading:false,
        currentTime: null
         }
      },
      created() {
         this.getLaboratoryDicts()
         this.getTypeDicts()
         this.getInsStateDicts()
      this.getAuthorizedPerson()
      this.currentTime = getYearAndMonthAndDays()
      },
      mounted() {
         this.entityCopy = this.HaveJson(this.componentData.entity)
      this.getPower()
      },
      methods: {
      // 权限分配
         getPower(radio) {
            let power = JSON.parse(sessionStorage.getItem('power'))
            let inspection = false
            let connect = false
            let review = false
        let claim = false
            for (var i = 0; i < power.length; i++) {
               if (power[i].menuMethod == 'doInsOrder') {
                  inspection = true
               }
               if (power[i].menuMethod == 'upPlanUser') {
                  connect = true
               }
               if (power[i].menuMethod == 'verifyPlan') {
                  review = true
               }
          if (power[i].menuMethod == 'claimInsOrderPlan') {
                  claim = true
               }
            }
            if (!claim) {
               this.componentData.do.splice(3, 1)
            }
            if (!review) {
               this.componentData.do.splice(2, 1)
            }
        if (!connect) {
               this.componentData.do.splice(1, 1)
            }
            if (!inspection) {
               this.componentData.do.splice(0, 1)
            }
         },
         changeCheckBox(val) {
            this.componentData.entity.userId = val?0:null
            this.refreshTable()
         },
         refresh() {
            this.componentData.entity = this.HaveJson(this.entityCopy)
            if(this.tabList.length>0){
               this.tabIndex = 0
               this.componentData.entity.sonLaboratory = this.tabList[0].value
            }
            this.refreshTable()
         },
         claimFun(row) {
            if (row) {
               this.sampleUserForm = {
                  entrustCode: row.entrustCode,
                  insSampleId: row.id
               }
               this.claimVisible = true
            }
         },
         confirmClaim() {
        this.loading = true;
            this.$axios.post(this.$api.insOrderPlan.claimInsOrderPlan, this.sampleUserForm, {
               headers: {
                  'Content-Type': 'application/json'
               }
            }).then(res => {
               if (res.code === 200 && res.data) {
            this.loading = false;
                  this.$message.success("认领成功")
                  this.claimVisible = false
                  this.refreshTable()
               }
            }).catch(error => {
               console.error(error)
          this.loading = false;
            })
         },
         refreshTable() {
            this.$refs.insOrderPlan.selectList()
         },
         changeRowClass({
            row,
            rowIndex
         }) {
            if (this.currentTime == row.appointed) {
               return 'highlight-warning-row-border'
            } else if (this.currentTime > row.appointed) {
               return 'highlight-danger-row-border'
            }
            return ''
         },
         onReset() {
            this.searchForm = {
               sampleName: null,
               state: null,
            }
            this.componentData.entity.insState = null
            this.componentData.entity.sampleName = null
            this.refreshTable()
         },
         onSubmit() {
            this.componentData.entity.insState = this.searchForm.state
            this.componentData.entity.sampleName = this.searchForm.sampleName
            this.$nextTick(() => {
               this.refreshTable()
            })
         },
         handleTab(m, i) {
            this.tabIndex = i;
            this.componentData.entity.sonLaboratory = m.value
            this.refreshTable()
         },
         getTypeDicts() {
            this.$axios.post(this.$api.enums.selectEnumByCategory, {
               category: "紧急程度"
            }).then(res => {
               let data = res.data
               data.forEach(ele => {
                  if (ele.value === '0') {
                     ele.type = 'success'
                  } else if (ele.value === '1') {
                     ele.type = 'warning'
                  } else if (ele.value === '2') {
                     ele.type = 'danger'
                  }
               })
               this.componentData.tagField.type.select = data
            })
         },
         getInsStateDicts() {
            this.$axios.post(this.$api.enums.selectEnumByCategory, {
               category: "检验任务状态"
            }).then(res => {
               let data = res.data
               this.insStateList = data
               data.forEach(ele => {
                  //0:待检验 1:检验中 2:已检验 3:待复核 4:复核未通过 5:复核通过
                  if (['2', '5'].includes(ele.value)) {
                     ele.type = 'success'
                  } else if (['1', '3'].includes(ele.value)) {
                     ele.type = 'warning'
                  } else if (['0', '4'].includes(ele.value)) {
                     ele.type = 'danger'
                  }
               })
               this.componentData.tagField.insState.select = data
            })
         },
         getLaboratoryDicts() {
            this.$axios.post(this.$api.enums.selectEnumByCategory, {
               category: "子实验室"
            }).then(res => {
               this.tabList = res.data.map(ele => {
                  return {
                     label: ele.label,
                     value: ele.value
                  }
               })
               if(this.tabList.length>0){
                  this.componentData.entity.sonLaboratory = this.tabList[0].value
               }
               this.refreshTable()
            })
         },
         selectAllByOne(row) {
            this.activeFace = 2;
            this.currentId = parseInt(row.id)
         },
         playOrder(num) {
            this.activeFace = num
         },
         goback() {
            this.state = 0
            this.refreshTable()
         },
      handleInspection(row){
        this.state = 1;
            this.orderId = row.id
      },
      handleConnect(row){
        this.orderId = row.id
        this.connectVisible=true;
      },
      confirmConnect(){
        if(this.connectPerson){
          this.loading = true;
          this.$axios.post(this.$api.insOrderPlan.upPlanUser, {
            orderId:this.orderId,
            userId:this.connectPerson
          }).then(res => {
               if (res.code === 200) {
            this.loading = false;
                  this.$message.success("操作成功")
                  this.refreshTable()
               }
          this.connectVisible = false
            }).catch(error => {
               console.error(error)
          this.loading = false;
            })
        }else{
          this.$message.error('未选择交接人员')
        }
      },
      handleReview(row){
        this.state = 2;
            this.orderId = row.id
      },
      getAuthorizedPerson() {
            this.$axios.get(this.$api.user.getUserMenu).then(res => {
               let data = []
               res.data.forEach(a => {
                  data.push({
                     label: a.name,
                     value: a.id
                  })
               })
               this.personList = data
            })
         },
      }
   }
</script>