功能调整

李林

2024-03-18 2281a3da368d9366e7d97e85719fe0f4a0492f9b

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

@@ -1,158 +1,174 @@
<style scoped>
ins-order-plan-main .title{
  font-size:20px;
  color:#3A7BFA
}
.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;
}
   .ins-order-plan-main .search {
      width: 100%;
      margin-bottom: 10px;
      height: 80px;
      background-color: #fff;
      border-radius: 3px;
   }

.tab li:nth-child(3) {
  border-radius: 0 8px 8px 0;
}
   .search .form-inline {
      height: 50px;
      padding-top: 20px;
      padding-left: 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: left;
}
.center .center-options .center-title span:last-child{
  color: #3A7BFA;
  font-size: 23px;
  font-weight: 400;
}
.view-self-checkbox{
margin-left: 20px;
}
   .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-child(3) {
      border-radius: 0 8px 8px 0;
   }

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

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

   .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;
   }
</style>
<template>
  <div class="ins-order-plan-main">
    <p style="font-size: 16px;padding:19.5px 0px">检验任务</p>
    <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>
          </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="21">
            <div style="display: flex;align-items: center;">
              <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-checkbox @change="changeCheckBox" class="view-self-checkbox" v-model="viewSelf"/><span>&nbsp;我的任务</span>
            </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" :key="upIndex" @upUser="upUser"/>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="claimVisible"
      width="40%">
      是否认领委托编号<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">确 定</el-button>
      </span>
    </el-dialog>
  </div>
   <div class="ins-order-plan-main">
      <p style="font-size: 16px;padding:19.5px 0px">检验任务</p>
      <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>
               </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="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}}
                        </li>
                     </ul>
                     <div>
                        <el-checkbox @change="changeCheckBox" class="view-self-checkbox"
                           v-model="viewSelf"><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"
            :key="upIndex" @upUser="upUser" />
      </div>
      <el-dialog title="提示" :visible.sync="claimVisible" width="40%">
         是否认领委托编号<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">确 定</el-button>
         </span>
      </el-dialog>
   </div>
</template>

<script>
import ValueTable from '../tool/value-table.vue'
import { getYearAndMonthAndDays } from '../../util/date'
export default {
  components:{
    ValueTable
  },
  data(){
    return {
      viewSelf: false,
      sampleUserForm:{
        entrustCode: null,
        insSampleId: null,
        userId: null
      },
      claimVisible: false,
      searchForm:{
        sampleName: null,
        state: null
      },
      tabList: [],
      active: 1,
      tabIndex: 0,
      componentData: {
   import ValueTable from '../tool/value-table.vue'
   import {
      getYearAndMonthAndDays
   } from '../../util/date'
   export default {
      components: {
         ValueTable
      },
      data() {
         return {
            viewSelf: false,
            sampleUserForm: {
               entrustCode: null,
               insSampleId: null,
               userId: null
            },
            claimVisible: false,
            searchForm: {
               sampleName: null,
               state: null
            },
            tabList: [],
            active: 1,
            tabIndex: 0,
            componentData: {
               entity: {
            viewSelf: false,
            state: 1,
            childrenLaboratory: null,
            insState: null,
            sampleName: null,
                  viewSelf: false,
                  state: 1,
                  childrenLaboratory: null,
                  insState: null,
                  sampleName: null,
                  orderBy: {
                     field: 'type',
                     order: 'desc'
@@ -162,179 +178,190 @@
               showSelect: false,
               select: false,
               do: [{
                  id: '',
                  font: '检验',
                  type: 'text',
                  method: '',
                  field:[]
               },{
                  id: '',
                  font: '交接',
                  type: 'text',
                  method: ''
               },
          {
                  id: '',
                  font: '复核',
                  type: 'text',
                  method: ''
               },{
                  id: '',
                  font: '认领',
                  type: 'text',
                  method: 'claimFun',
            disabFun: (row,index)=>{return row.sampleUserId!=null}
               }],
                     id: '',
                     font: '检验',
                     type: 'text',
                     method: '',
                     field: []
                  }, {
                     id: '',
                     font: '交接',
                     type: 'text',
                     method: ''
                  },
                  {
                     id: '',
                     font: '复核',
                     type: 'text',
                     method: ''
                  }, {
                     id: '',
                     font: '认领',
                     type: 'text',
                     method: 'claimFun',
                     disabFun: (row, index) => {
                        return row.sampleUserId != null
                     }
                  }
               ],
               tagField: {
            type:{
              select:[]
            },
            insState:{
              select:[]
            }
          },
                  type: {
                     select: []
                  },
                  insState: {
                     select: []
                  }
               },
               selectField: {},
               requiredAdd:[],
               requiredUp:[]
               requiredAdd: [],
               requiredUp: []
            },
      upIndex: 0,
      planTotal: 0,
      insStateList: []
    }
  },
  created(){
    this.getTypeDicts()
    this.getInsStateDicts()
    this.getLaboratoryDicts()
    this.$nextTick(()=>{
      this.refreshTable()
    })
  },
  watch:{
    tabList(newVal){
      if(newVal && newVal.length>0){
        this.componentData.entity.childrenLaboratory = newVal[0].value
        this.$nextTick(()=>{
          this.refreshTable()
        })
      }
    }
  },
  methods:{
    upUser(){
            upIndex: 0,
            planTotal: 0,
            insStateList: []
         }
      },
      created() {
         this.getTypeDicts()
         this.getInsStateDicts()
         this.getLaboratoryDicts()
         this.$nextTick(() => {
            this.refreshTable()
         })
      },
      watch: {
         tabList(newVal) {
            if (newVal && newVal.length > 0) {
               this.componentData.entity.childrenLaboratory = newVal[0].value
               this.$nextTick(() => {
                  this.refreshTable()
               })
            }
         }
      },
      methods: {
         upUser() {

    },
    changeCheckBox(val){
      this.componentData.entity.viewSelf = val
      this.$nextTick(()=>{
        this.refreshTable()
      })
    },
    claimFun(row){
      console.log(row)
      if(row){
        this.sampleUserForm = {
          entrustCode : row.entrustCode,
          insSampleId: row.id
        }
        this.claimVisible = true
      }
         },
         changeCheckBox(val) {
            this.componentData.entity.viewSelf = val
            this.$nextTick(() => {
               this.refreshTable()
            })
         },
         claimFun(row) {
            console.log(row)
            if (row) {
               this.sampleUserForm = {
                  entrustCode: row.entrustCode,
                  insSampleId: row.id
               }
               this.claimVisible = true
            }

    },
    confirmClaim(){
      this.$axios.post(this.$api.insOrderPlan.claimInsOrderPlan, this.sampleUserForm,{
         },
         confirmClaim() {
            this.$axios.post(this.$api.insOrderPlan.claimInsOrderPlan, this.sampleUserForm, {
               headers: {
                  'Content-Type': 'application/json'
               }
            }).then(res=>{
        if(res.code===200 && res.data){
          this.$message.success("认领成功")
          this.claimVisible = false
          this.refreshTable()
        }
      }).catch(error=>{
        console.error(error)
      })
    },
    refreshTable() {
      this.$refs.insOrderPlan.selectList()
    },
    changeRowClass({row,rowIndex}){
      let currentTime = getYearAndMonthAndDays()
      if(row.sendTime && currentTime===row.sendTime){
        return 'highlight-warning-row-border'
      }else if(row.sendTime && currentTime>row.sendTime){
        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.childrenLaboratory = 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}})
        this.$nextTick(()=>{
          this.componentData.entity.childrenLaboratory = this.tabList[0].value
        })
      })
    }
  }
}
</script>
            }).then(res => {
               if (res.code === 200 && res.data) {
                  this.$message.success("认领成功")
                  this.claimVisible = false
                  this.refreshTable()
               }
            }).catch(error => {
               console.error(error)
            })
         },
         refreshTable() {
            this.$refs.insOrderPlan.selectList()
         },
         changeRowClass({
            row,
            rowIndex
         }) {
            let currentTime = getYearAndMonthAndDays()
            if (row.sendTime && currentTime === row.sendTime) {
               return 'highlight-warning-row-border'
            } else if (row.sendTime && currentTime > row.sendTime) {
               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.childrenLaboratory = 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
                  }
               })
               this.$nextTick(() => {
                  this.componentData.entity.childrenLaboratory = this.tabList[0].value
               })
            })
         }
      }
   }
</script>