检验下单 功能调整

gaoaoy

2024-03-15 8c51a45d5a220f5ddb4b29a50b3bd732e5ac8521

 src/components/do/b1-ins-order/add.vue

@@ -1,12 +1,68 @@
<style scoped>
   .ins_order_add{
   .ins_order_add {
      width: 100%;
      height: 100%;
   }
	

   .title {
      height: 60px;
      line-height: 60px;
   }

   .search {
      width: calc(100% - 40px);
      background-color: #fff;
      padding: 10px 40px 10px 0;
   }

   .search_thing {
      display: flex;
      align-items: center;
      height: 50px;
   }

   .search_label {
      width: 120px;
      font-size: 14px;
      text-align: right;
   }

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

   .node_i {
      color: orange;
      font-size: 18px;
   }
</style>
<style>
   .ins_order_add .el-input-group__append,
   .el-input-group__prepend {
      padding: 0 10px;
   }

   .ins_order_add .el-tree-node__content {
      height: 32px;
      font-size: 14px;
      border-radius: 2px;
   }

   .ins_order_add .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
      color: #3A7BFA;
   }

   .ins_order_add .has-gutter .el-table__cell .cell {
      line-height: 30px;
      background-color: #fafafa;
   }

   .ins_order_add .has-gutter .el-table__cell {
      background-color: #fafafa !important;
   }

   .ins_order_add .el-table__row .cell {
      font-size: 12px;
   }
</style>

@@ -14,22 +70,386 @@
   <div class="ins_order_add">
      <div>
         <el-row class="title">
            <el-col :span="12" style="padding-left: 20px;">委托单信息</el-col>
            <el-col :span="12" style="text-align: right;">
               <el-button size="medium" type="primary" @click="">提交</el-button>
               <el-button size="medium" @click="">返回</el-button>
            <el-col :span="6" style="padding-left: 20px;">委托单信息</el-col>
            <el-col :span="18" style="text-align: right;">
               <el-select v-model="template" size="medium" placeholder="下单模板" style="margin-right: 10px;">
                  <el-option v-for="(a, ai) in templates" :key="ai" :value="a.value" :label="a.label"></el-option>
               </el-select>
               <el-button size="medium" @click="">
                  <span style="color: #3A7BFA;">保存模板</span>
               </el-button>
               <el-button size="medium" type="primary" @click="save">提交</el-button>
               <el-button size="medium" @click="$parent.playOrder(0)">
                  <span style="color: #3A7BFA;">返回</span>
               </el-button>
            </el-col>
         </el-row>
      </div>
      <div class="search">
         <el-row>
            <el-col class="search_thing" :span="6">
               <div class="search_label">委托编号：</div>
               <div class="search_input">
                  <el-input v-model="addObj.entrustCode" size="small" placeholder="系统生成" disabled></el-input>
               </div>
            </el-col>
            <el-col class="search_thing" :span="6">
               <div class="search_label"><span class="required-span">* </span>样品编号：</div>
               <div class="search_input">
                  <el-input v-model="addObj.sampleCode" size="small" placeholder="请输入" clearable></el-input>
               </div>
            </el-col>
            <el-col class="search_thing" :span="6">
               <div class="search_label"><span class="required-span">* </span>下单客户：</div>
               <div class="search_input">
                  <el-input readonly size="small" v-model="addObj.custom">
                     <template slot="append"><el-button slot="append" icon="el-icon-search"
                           @click="selectUserDia = true"></el-button></template>
                  </el-input>
               </div>
            </el-col>
            <el-col class="search_thing" :span="6">
               <div class="search_label"><span class="required-span">* </span>下单单位：</div>
               <div class="search_input">
                  <el-input size="small" placeholder="选择下单客户" clearable disabled v-model="addObj.company"></el-input>
               </div>
            </el-col>
            <el-col class="search_thing" :span="6">
               <div class="search_label"><span class="required-span">* </span>样品名称：</div>
               <div class="search_input">
                  <el-input readonly size="small" v-model="addObj.sample">
                     <template slot="append"><el-button slot="append" icon="el-icon-search"
                           @click="selectStandardTree = true"></el-button></template>
                  </el-input>
               </div>
            </el-col>
            <el-col class="search_thing" :span="6">
               <div class="search_label"><span class="required-span">* </span>实验室名称：</div>
               <div class="search_input">
                  <el-input size="small" clearable disabled v-model="addObj.laboratory"></el-input>
               </div>
            </el-col>
            <el-col class="search_thing" :span="6">
               <div class="search_label"><span class="required-span">* </span>样品类型：</div>
               <div class="search_input">
                  <el-input size="small" clearable disabled v-model="addObj.sampleType"></el-input>
               </div>
            </el-col>
            <el-col class="search_thing" :span="6">
               <div class="search_label"><span class="required-span">* </span>规格型号：</div>
               <div class="search_input">
                  <el-input size="small" placeholder="请输入" clearable v-model="addObj.model"></el-input>
               </div>
            </el-col>
            <el-col class="search_thing" :span="6">
               <div class="search_label">约定时间：</div>
               <div class="search_input">
                  <el-date-picker type="date" placeholder="选择日期" size="small" value-format="yyyy-MM-dd" style="width: 100%;"
                     v-model="addObj.appointedTime"></el-date-picker>
               </div>
            </el-col>
            <el-col class="search_thing" :span="6">
               <div class="search_label"><span class="required-span">* </span>紧急程度：</div>
               <div class="search_input">
                  <el-select size="small" style="width: 100%;" clearable v-model="addObj.type">
                     <el-option v-for="(a, ai) in type" :key="ai" :value="a.value" :label="a.label"></el-option>
                  </el-select>
               </div>
            </el-col>
            <el-col class="search_thing" :span="6">
               <div class="search_label"><span class="required-span">* </span>样品数量：</div>
               <div class="search_input">
                  <el-input-number size="small" v-model="addObj.sampleNum" :controls="false" :min="0" :max="1000"
                     :precision="0" style="width: 50%;" @change="onSample"></el-input-number>
               </div>
            </el-col>
            <el-col class="search_thing" :span="6">
               <div class="search_label">OTC订单号：</div>
               <div class="search_input">
                  <el-input size="small" placeholder="请输入" clearable v-model="addObj.otcCode"></el-input>
               </div>
            </el-col>
            <el-col class="search_thing" :span="6">
               <div class="search_label">样品留样：</div>
               <div class="search_input">
                  <el-radio-group v-model="addObj.isLeave" @change="addObj.leaveNum = null">
                     <el-radio :label="1">留样</el-radio>
                     <el-radio :label="0">不留样</el-radio>
                  </el-radio-group>
               </div>
            </el-col>
            <el-col class="search_thing" :span="6">
               <div class="search_label">留样数量：</div>
               <div class="search_input">
                  <el-input-number size="small" v-model="addObj.leaveNum" :controls="false" :min="0"
                     :disabled="addObj.isLeave == 0" style="width: 50%;"></el-input-number>
               </div>
            </el-col>
            <el-col class="search_thing" :span="6" style="align-items: flex-start;margin: 8px 0;">
               <div class="search_label">备注：</div>
               <div class="search_input">
                  <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" size="small" clearable
                     v-model="addObj.remark"></el-input>
               </div>
            </el-col>
            <el-col class="search_thing" :span="6">
               <div class="search_label" style="width: 160px;">是否涉及配套样品：</div>
               <div class="search_input" style="width: calc(100% - 160px);">
                  <el-radio-group v-model="addObj.mating" @change="$refs.sampleTable.doLayout()">
                     <el-radio :label="1">是</el-radio>
                     <el-radio :label="0">否</el-radio>
                  </el-radio-group>
               </div>
            </el-col>
         </el-row>
      </div>
      <div style="display: flex;">
         <el-table class="el-table" ref="sampleTable" :data="sampleList" height="300px" tooltip-effect="dark" border
            @selection-change="selectSample">
            <el-table-column type="selection" width="60"></el-table-column>
            <el-table-column type="index" label="序号" width="65" align="center"></el-table-column>
            <el-table-column prop="sample" label="样品名称" align="center" show-overflow-tooltip
               min-width="100"></el-table-column>
            <el-table-column prop="joinName" label="配套样品名称" width="140" align="center" v-if="addObj.mating==1">
               <template slot-scope="scope">
                  <el-input size="small" type="textarea" :autosize="{ minRows: 1, maxRows: 1}"
                     v-model="scope.row.joinName"></el-input>
               </template>
            </el-table-column>
            <el-table-column prop="joinModel" label="配套样品型号" width="140" align="center" v-if="addObj.mating==1">
               <template slot-scope="scope">
                  <el-input size="small" type="textarea" :autosize="{ minRows: 1, maxRows: 1}"
                     v-model="scope.row.joinModel"></el-input>
               </template>
            </el-table-column>
            <el-table-column label="操作" width="65" align="center">
               <template slot-scope="scope">
                  <el-button type="text" size="small" @click="">删除</el-button>
               </template>
            </el-table-column>
         </el-table>
      </div>
      <el-dialog title="选择客户" :visible.sync="selectUserDia" width="70%">
         <div class="body" style="height: 60vh;" v-if="selectUserDia">
            <ValueTable ref="ValueTable2" :url="$api.user.selectCustomPageList" :componentData="componentData2" />
         </div>
         <span slot="footer" class="dialog-footer">
            <el-button @click="selectUserDia = false">取 消</el-button>
            <el-button type="primary" @click="selectUser">确 定</el-button>
         </span>
      </el-dialog>
      <el-dialog title="选择样品" :visible.sync="selectStandardTree" width="400px">
         <div class="body" style="height: 60vh;overflow-y: auto;" v-if="selectStandardTree">
            <el-row>
               <el-col :span="24">
                  <el-input placeholder="输入关键字进行搜索" suffix-icon="el-icon-search" v-model="search" size="small"
                     style="margin-bottom: 5px;" clearable @blur="searchFilter" @clear="searchFilter"
                     @keyup.enter.native="searchFilter"></el-input>
               </el-col>
            </el-row>
            <el-tree :data="list" ref="tree" :props="{ children: 'children', label: 'label' }" node-key="label"
               :filter-node-method="filterNode" @node-click="handleNodeClick" highlight-current @node-expand="nodeOpen"
               @node-collapse="nodeClose" :default-expanded-keys="expandedKeys">
               <div class="custom-tree-node" slot-scope="{ node, data }">
                  <el-row>
                     <el-col :span="24">
                        <span><i
                              :class="`node_i ${data.children != undefined ? 'el-icon-folder-opened' : 'el-icon-tickets'}`"></i>
                           {{ data.code }} {{ data.label }}</span>
                     </el-col>
                  </el-row>
               </div>
            </el-tree>
         </div>
         <span slot="footer" class="dialog-footer">
            <el-button @click="selectStandardTree = false">取 消</el-button>
            <el-button type="primary" @click="activeStandardTree">确 定</el-button>
         </span>
      </el-dialog>
   </div>
</template>

<script>
   export default{
   import ValueTable from '../../tool/value-table.vue'
   export default {
      components: {
         ValueTable
      },
      data() {
         return{
				
         return {
            template: null,
            templates: [],
            addObj: {
               entrustCode: null,
               sampleCode: null,
               custom: null,
               company: null,
               userId: null,
               type: '0',
               code: null,
               laboratory: null,
               appointedTime: null,
               factory: null,
               sample: null,
               sampleType: null,
               sampleNum: null,
               model: null,
               isLeave: 0,
               leaveNum: null,
               remark: null,
               otcCode: null,
               mating: 0
            },
            type: [],
            selectUserDia: false,
            componentData2: {
               entity: {
                  orderBy: {
                     field: 'id',
                     order: 'asc'
                  }
               },
               isIndex: true,
               showSelect: true,
               select: false,
               do: [],
               tagField: {
                  state: {
                     select: [{
                        value: 1,
                        type: 'success',
                        label: '启用'
                     }, {
                        value: 0,
                        type: 'danger',
                        label: '停用'
                     }]
                  }
               },
               selectField: {},
            },
            selectStandardTree: false,
            search: null,
            list: [],
            selectTree: null,
            expandedKeys: [],
            sampleList: [],
            sampleIds: [],
            methodList: []
         }
      },
      mounted() {
         this.selectEnumByCategoryForType()
         this.getUserNow()
         this.selectStandardTreeList()
      },
      methods: {
         selectEnumByCategoryForType() {
            this.$axios.post(this.$api.enums.selectEnumByCategory, {
               category: "紧急程度"
            }).then(res => {
               this.type = res.data
            })
         },
         selectUser() {
            let selects = this.$refs.ValueTable2.multipleSelection
            if (selects.length == 0) {
               this.$message.error('未选择数据')
               return
            }
            delete selects['orderBy']
            delete selects['updateUser']
            delete selects['updateTime']
            this.addObj.userId = selects.id
            this.addObj.company = selects.company
            this.addObj.custom = selects.name
            this.addObj.code = selects.code
            this.selectUserDia = false
         },
         save() {
            console.log(this.addObj);
         },
         getUserNow() {
            this.$axios.get(this.$api.user.getUserNow).then(res => {
               let selects = res.data
               if (selects == null) return
               this.addObj.userId = selects.id
               this.addObj.company = selects.company
               this.addObj.custom = selects.name
               this.addObj.code = selects.code
            })
         },
         searchFilter() {
            this.$refs.tree.filter(this.search)
         },
         nodeOpen(data, node, el) {
            $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder-opened')
         },
         nodeClose(data, node, el) {
            $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder')
         },
         handleNodeClick(val, node, el) { //树的值
            this.selectTree = ''
            this.getNodeParent(node)
            this.selectTree = this.selectTree.replace(' - ', '')
            let data = this.selectTree.split(' - ')
            let data2 = ''
            for (let index = data.length - 1; index >= 0; index--) {
               data2 += " - " + data[index]
            }
            this.selectTree = data2.replace(' - ', '')
         },
         getNodeParent(val) {
            if (val.parent != null) {
               this.selectTree += ' - ' + val.label
               this.getNodeParent(val.parent)
            }
         },
         selectStandardTreeList() {
            this.$axios.get(this.$api.standardTree.selectStandardTreeList).then(res => {
               this.list = res.data
               this.list.forEach(a => {
                  a.children.forEach(b => {
                     this.expandedKeys.push(b.label)
                  })
               })
            })
         },
         filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
         },
         activeStandardTree() {
            let trees = this.selectTree.split(" - ")
            if (trees.length < 4) {
               this.$message.error('未选择样品')
               return
            }
            this.addObj.factory = trees[0]
            this.addObj.laboratory = trees[1]
            this.addObj.sampleType = trees[2]
            this.addObj.sample = trees[3]
            this.addObj.model = trees[4]
            this.selectStandardTree = false
            this.onSample()
         },
         selectSample(val) {
            val.forEach(a => {
               this.sampleIds = a.id
            })
         },
         onSample() {
            this.sampleList = []
            if (this.addObj.sampleNum == 0 || this.addObj.sample == null || this.addObj.sample == '') return
            for (var i = 0; i < this.addObj.sampleNum; i++) {
               this.sampleList.push({
                  sample: this.addObj.sample,
                  joinName: null,
                  joinModel: null
               })
            }
            this.$refs.sampleTable.doLayout()
         }
      }
   }
</script>
</script>