From 2cb8775339209916fcc889dfa9d5ea7a9f63cd24 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期一, 27 六月 2022 18:08:02 +0800
Subject: [PATCH] 仓库定义、库位定义、物料类型  实现增删查改功能

---
 src/views/zzmx/gylx.vue |  104 +++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 79 insertions(+), 25 deletions(-)

diff --git a/src/views/zzmx/gylx.vue b/src/views/zzmx/gylx.vue
index 906dacb..375570a 100644
--- a/src/views/zzmx/gylx.vue
+++ b/src/views/zzmx/gylx.vue
@@ -118,7 +118,7 @@
     <el-dialog
       :title="operation==='add'?'鏂板':'淇敼'"
       :visible.sync="dialogVisible"
-      width="80%"
+      width="70%"
       top="15vh"
       @closed="handleClose"
       @close="handleClose"
@@ -152,21 +152,30 @@
             <el-input v-model="dialogForm.OrgName" type="textarea" style="width: 220px" />
           </el-form-item>
         </div>
-        <el-form-item label="宸ヨ壓璁剧疆" prop="OrgName">
+        <el-form-item label="宸ヨ壓璁剧疆" prop="OrgName" style="margin-top: 30px">
           <div class="settingDiv">
             <!--   瀹炵幇宸ヨ壓璁剧疆鍔ㄦ�佹坊鍔�-->
             <div v-for="(tag,index) in dynamicTags" :key="tag.id" style="display: flex;align-items: center">
-              <div style="display: flex;align-items: center;position: relative">
-
+              <div style="display: flex;align-items: center;position: relative;">
+                <div
+                  class="orderNumber"
+                  :style="{
+                    backgroundColor:index===0?'#f8f8fa':'#409EFF',
+                    color:index===0?'#c6bbc4':'#FFFFFF',
+                    border:index===0?'1px solid #c6bbc4':'1px solid #409EFF',
+                    zIndex:!flag&&tag.label===flagSelected?0:2
+                  }"
+                >
+                  {{ index+1 }}</div>
                 <el-tooltip class="item" effect="dark" :content="tag.label" placement="top">
+                  <!--                  @close="handleTagClose(tag.label)"-->
+                  <!--                  :closable="index!==0"-->
                   <el-tag
                     v-if="flag||tag.label!==flagSelected"
-                    :closable="index!==0"
                     :disable-transitions="false"
                     class="elTag"
                     :class="tagClass(tag.label)"
                     :effect="tag.effect"
-                    @close="handleTagClose(tag.label)"
                     @click="elTagClick(tag)"
                   >
                     <!--                <div class="orderNumber">{{ index }}</div>-->
@@ -174,10 +183,19 @@
                     <i class="el-icon-edit" @click="tagEdit(tag)" />
                   </el-tag>
                 </el-tooltip>
+                <i
+                  v-if="index!==0"
+                  :style="{
+                    left:!flag&&tag.label===flagSelected?'191px':'91px',
+                    top:!flag&&tag.label===flagSelected?'-2px':'-8px',
+                  }"
+                  class="el-icon-close"
+                  @click="handleTagClose(tag.label)"
+                />
                 <el-autocomplete
                   v-if="!flag&&tag.label===flagSelected"
                   :ref="'saveTagInput'+tag.id"
-                  v-model="value"
+                  v-model="tagValue"
                   class="input-new-tag"
                   size="small"
                   :fetch-suggestions="querySearch"
@@ -254,7 +272,7 @@
         prop: 'lm_date', // 鎺掑簭瀛楁
         order: 'desc', // 鎺掑簭瀛楁
         page: 1, // 绗嚑椤�
-        rows: 10 // 姣忛〉澶氬皯鏉�
+        rows: 20 // 姣忛〉澶氬皯鏉�
       },
       isEnableArr: [
         { label: '鏄�', value: 'Y' },
@@ -262,7 +280,7 @@
       ],
       total: 10,
       tableData: [],
-      dialogVisible: true,
+      dialogVisible: false,
       dialogForm: {
         OrgType: '',
         OrgCode: '',
@@ -270,14 +288,14 @@
         SupUnit: ''// 涓婄骇鍗曚綅
       },
       dynamicTags: [// 宸ヨ壓璁剧疆鏁扮粍
-        { id: 1, label: '鏍囩涓�', effect: 'light' },
+        { id: 1, label: '鏍囩涓�鏍囩涓�鏍囩涓�鏍囩涓�鏍囩涓�鏍囩涓�', effect: 'light' },
         { id: 2, label: '鏍囩浜�', effect: 'light' },
         { id: 3, label: '鏍囩涓�', effect: 'light' }
       ],
       tagSelectedId: '', // tag閫夋嫨涓璱d
       flag: true,
       flagSelected: '', // 鍒ゆ柇鏄惁閫変腑
-      value: '',
+      tagValue: '',
       restaurants: [],
       addDisabled: false,
 
@@ -316,7 +334,8 @@
     },
     createFilter(queryString) {
       return (restaurant) => {
-        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+        // return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
       }
     },
     loadAll() {
@@ -345,7 +364,7 @@
       console.log(this.value)
       this.addDisabled = false
       this.flagSelect = ''
-      this.value = ''
+      this.tagValue = ''
       this.flag = !this.flag
     },
     tagEdit(tag) {
@@ -353,7 +372,7 @@
 
       this.addDisabled = true
       this.flagSelected = tag.label
-      this.value = tag.label
+      this.tagValue = tag.label
       this.flag = !this.flag
       this.$nextTick(_ => {
         this.$refs['saveTagInput' + tag.id][0].focus()
@@ -393,6 +412,7 @@
           this.dynamicTags.splice(index, 1)
         }
       })
+      this.addDisabled = false
     },
 
     showInput() {
@@ -692,9 +712,21 @@
 瀹炵幇宸ヨ壓璁剧疆鍔ㄦ�佹坊鍔犳牱寮�
 */
 
-.orderNumber{
-
+.orderNumber {
+  margin-bottom: 31px;
+  position: absolute;
+  margin-left: -7px;
+  z-index: 2;
+  width: 15px;
+  height: 15px !important;
+  font-size: 12px;
+  text-align: center;
+  line-height: 15px;
+  color: #FFFFFF;
+  background-color: #409EFF;
+  border-radius: 50%;
 }
+
 .el-icon-edit {
   width: 16px;
   height: 16px;
@@ -702,12 +734,31 @@
   padding: 3px 0 0 3px;
   margin-left: 5px;
   cursor: pointer;
+  position: absolute;
+  right: 3px;
+  bottom: 8px;
 }
 
 .el-icon-edit:hover {
   background-color: #99a9bf;
   color: #FFFFFF;
 }
+
+.el-icon-close {
+  position: absolute;
+  top: -8px;
+  z-index: 2;
+  left: 91px;
+  cursor: pointer;
+  color: #FFFFFF;
+  border-radius: 50%;
+  background-color: #ff7474;
+  padding: 1px 0 0 1px;
+}
+
+//.el-icon-close:hover {
+//  background-color: #99a9bf;
+//}
 
 .el-tag--dark {
   background-color: $main_color;
@@ -723,23 +774,21 @@
   color: $main_color;
 }
 
-::v-deep .el-tag__close {
-  padding: 1px 0 0 1px !important;
-}
-::v-deep .el-tag__close:hover {
-  background-color: #99a9bf;
-}
-
 ::v-deep .el-button--success {
   width: 40px !important;
   background-color: #ecf5ff;
   border-radius: 0;
   color: $main_color;
 }
+::v-deep .el-button--success:disabled {
+  background-color:#eeeeee;
+  color: $main_color;
+}
 
 ::v-deep .el-tag {
   //height: 30px;
   border-radius: 0;
+  border: 1px solid $main_color;
 }
 
 ::v-deep .el-input--small .el-input__inner {
@@ -749,8 +798,10 @@
 .settingDiv {
   display: flex;
   width: 100%;
-  height: 40px;
-  overflow-y: scroll;
+  padding-left: 7px;
+  height: 56px;
+  overflow-x: scroll;
+  overflow-y: hidden;
   align-items: center;
 }
 
@@ -758,6 +809,9 @@
   margin-left: 0;
   width: 100px;
   position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 </style>

--
Gitblit v1.9.3