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 | 257 +++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 209 insertions(+), 48 deletions(-)
diff --git a/src/views/zzmx/gylx.vue b/src/views/zzmx/gylx.vue
index db93532..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"
@@ -136,11 +136,12 @@
<el-form-item prop="SupUnit" label="浣跨敤鐘舵��" style="margin-right: 20px">
<el-select
v-model="dialogForm.isEnable"
+ :popper-append-to-body="false"
style="width: 220px"
placeholder="璇烽�夋嫨"
>
<el-option
- v-for="item in SupUnitArr"
+ v-for="item in isEnableArr"
:key="item.value"
:label="item.label"
:value="item.value"
@@ -151,44 +152,70 @@
<el-input v-model="dialogForm.OrgName" type="textarea" style="width: 220px" />
</el-form-item>
</div>
- <el-form-item label="宸ヨ壓璁剧疆" prop="OrgName">
- <div style="display: flex;width:100%;overflow-y: scroll">
+ <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;">
- <el-tag
- v-if="flag||tag.label!==flagSelected"
- closable
- :disable-transitions="false"
- style="margin-left: 0;width: 100px;"
- :class="tagClass(tag.label)"
- :effect="tag.effect"
- @close="handleTagClose(tag.label)"
- @click="elTagClick(tag)"
- >
- {{ tag.label }}
- <i class="el-icon-edit" @click="tagEdit(tag)" />
- </el-tag>
-
- <el-autocomplete
- v-if="!flag&&tag.label===flagSelected"
- :ref="'saveTagInput'+tag.id"
- v-model="value"
- class="input-new-tag"
- size="small"
- :fetch-suggestions="querySearch"
- style="margin-left: 0px;width: 100px;transform: translate(1)"
- autofocus
- @select="handleSelect"
- @keyup.enter.native="handleInputConfirm2"
- />
- <!-- @blur="handleBlur2"-->
-
- <div v-if="index!==dynamicTags.length-1" style="width: 40px;">----></div>
+ <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
+ 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"
+ :disable-transitions="false"
+ class="elTag"
+ :class="tagClass(tag.label)"
+ :effect="tag.effect"
+ @click="elTagClick(tag)"
+ >
+ <!-- <div class="orderNumber">{{ index }}</div>-->
+ {{ tag.label }}
+ <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="tagValue"
+ class="input-new-tag"
+ size="small"
+ :fetch-suggestions="querySearch"
+ style="margin-left: 0;width: 200px;transform: translate(1)"
+ autofocus
+ @select="handleSelect"
+ @keyup.enter.native="handleInputConfirm2"
+ />
+ <!-- @blur="handleBlur2"-->
+ <div v-if="index!==dynamicTags.length-1" style="width: 40px;height: 1px;border: 1px solid #42b983" />
+ </div>
</div>
<!-- :disabled="addDisabled"-->
- <el-button type="primary" style="margin-left: 20px;width: 100px;height: 32px;" size="small" @click="showInput">+
- 娣诲姞
- </el-button>
+ <el-button
+ type="success"
+ class="tagSuccess"
+ size="small"
+ icon="el-icon-plus"
+ @click="showInput"
+ />
</div>
</el-form-item>
@@ -245,15 +272,15 @@
prop: 'lm_date', // 鎺掑簭瀛楁
order: 'desc', // 鎺掑簭瀛楁
page: 1, // 绗嚑椤�
- rows: 10 // 姣忛〉澶氬皯鏉�
+ rows: 20 // 姣忛〉澶氬皯鏉�
},
- isEnable: [
+ isEnableArr: [
{ label: '鏄�', value: 'Y' },
{ label: '鍚�', value: 'N' }
],
total: 10,
tableData: [],
- dialogVisible: true,
+ dialogVisible: false,
dialogForm: {
OrgType: '',
OrgCode: '',
@@ -261,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,
@@ -307,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() {
@@ -336,20 +364,22 @@
console.log(this.value)
this.addDisabled = false
this.flagSelect = ''
- this.value = ''
+ this.tagValue = ''
this.flag = !this.flag
},
tagEdit(tag) {
+ console.log(tag, 2)
+
this.addDisabled = true
- this.flagSelect = tag.label
- this.value = tag.label
+ this.flagSelected = tag.label
+ this.tagValue = tag.label
this.flag = !this.flag
this.$nextTick(_ => {
this.$refs['saveTagInput' + tag.id][0].focus()
})
},
elTagClick(tag) {
- console.log(tag)
+ console.log(tag, 1)
this.tagSelectedId = tag.id
if (tag.effect === 'dark') {
@@ -382,6 +412,7 @@
this.dynamicTags.splice(index, 1)
}
})
+ this.addDisabled = false
},
showInput() {
@@ -397,7 +428,7 @@
}
this.flag = !this.flag
this.$nextTick(_ => {
- this.$refs['saveTagInput' + this.dynamicTags.length ][0].focus()
+ this.$refs['saveTagInput' + this.dynamicTags.length][0].focus()
})
// this.$nextTick(_ => {
// console.log(this.$refs['saveTagInput'], 321)
@@ -585,6 +616,10 @@
line-height: 30px;
}
+::v-deep .el-input__inner:focus {
+ border-color: $main_color;
+}
+
::v-deep .el-table .caret-wrapper {
transform: scale(0.8);
}
@@ -653,4 +688,130 @@
margin-bottom: 0;
}
+::v-deep .el-input__inner:focus {
+ border-color: $main_color;
+}
+
+::v-deep .el-select .el-input__inner:focus {
+ border-color: $main_color;
+}
+
+::v-deep .el-select-dropdown__item.selected {
+ color: $main_color;
+}
+
+::v-deep .el-checkbox__inner:hover {
+ border-color: $main_color;
+}
+
+::v-deep .el-textarea__inner:focus {
+ border-color: $main_color;
+}
+
+/*
+瀹炵幇宸ヨ壓璁剧疆鍔ㄦ�佹坊鍔犳牱寮�
+*/
+
+.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;
+ border-radius: 50%;
+ 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;
+ border-color: $main_color;
+}
+
+.tagSuccess {
+ margin-left: 20px;
+ width: 100px;
+ height: 32px;
+ display: flex;
+ justify-content: center;
+ color: $main_color;
+}
+
+::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 {
+ border-radius: 0;
+}
+
+.settingDiv {
+ display: flex;
+ width: 100%;
+ padding-left: 7px;
+ height: 56px;
+ overflow-x: scroll;
+ overflow-y: hidden;
+ align-items: center;
+}
+
+.elTag {
+ margin-left: 0;
+ width: 100px;
+ position: relative;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
</style>
--
Gitblit v1.9.3