From 99a010f21d278498bafd248217c584e101db2d8f Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期四, 01 九月 2022 17:27:17 +0800
Subject: [PATCH] 1.自动扫码回车功能接入
---
src/views/zzmx/gylx.vue | 459 +++++++++++++++++++++++++++++++--------------------------
1 files changed, 251 insertions(+), 208 deletions(-)
diff --git a/src/views/zzmx/gylx.vue b/src/views/zzmx/gylx.vue
index e31a9b6..44b8b17 100644
--- a/src/views/zzmx/gylx.vue
+++ b/src/views/zzmx/gylx.vue
@@ -1,16 +1,22 @@
<template>
<div>
<div class="body" :style="{height:mainHeight+'px'}">
- <div style="padding: 10px 5px 0 0">
+
+ <div class="bodyTopButtonGroup">
+ <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">鏂板</el-button>
+ <!-- <el-button type="primary" icon="el-icon-upload2" @click="upload">瀵煎叆</el-button>-->
+ </div>
+
+ <div class="bodyTopFormGroup">
<el-form
ref="form"
:model="form"
- label-width="80px"
+ label-width="100px"
inline
style="display: flex;justify-content: space-between"
>
<div class="elForm">
- <el-form-item label="宸ヨ壓缂栫爜" style=" display: flex;">
+ <el-form-item label="宸ヨ壓璺嚎缂栫爜" style=" display: flex;">
<el-input v-model="form.routecode" placeholder="璇疯緭鍏�" style="width: 200px" />
</el-form-item>
<el-form-item label="宸ヨ壓鍚嶇О" style=" display: flex;">
@@ -29,18 +35,13 @@
</div>
</el-form>
</div>
- <el-divider />
- <div style="margin-left: 10px;display: flex">
- <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">鏂板</el-button>
- <!-- <el-button type="primary" icon="el-icon-upload2" @click="upload">瀵煎叆</el-button>-->
- </div>
- <el-divider />
+
<div class="elTableDiv">
<el-table
:data="tableData"
:height="tableHeight"
border
- stripe
+ :row-class-name="tableRowClassName"
:style="{width: 100+'%',height:tableHeight+'px',}"
highlight-current-row
:header-cell-style="this.$headerCellStyle"
@@ -55,6 +56,7 @@
prop="RowNum"
width="50"
label="搴忓彿"
+ fixed
/>
<el-table-column
prop="code"
@@ -70,15 +72,26 @@
prop="description"
label="宸ヨ壓璺嚎鎻忚堪"
sortable="custom"
- />
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.description">{{ row.description }}</div>
+ <div v-else>/</div>
+ </template>
+ </el-table-column>
<el-table-column
prop="enable"
label="浣跨敤鐘舵��"
sortable="custom"
>
<template slot-scope="{row}">
- <div v-if="row.enable==='Y'">鏄�</div>
- <div v-if="row.enable==='N'">鍚�</div>
+ <div v-if="row.enable==='Y'">
+ <svg-icon icon-class="circleYes" style="margin-right: 2px" />
+ 鏄�
+ </div>
+ <div v-if="row.enable==='N'">
+ <svg-icon icon-class="circleNo" style="margin-right: 2px" />
+ 鍚�
+ </div>
</template>
</el-table-column>
<el-table-column
@@ -90,15 +103,25 @@
prop="lm_date"
label="鍒涘缓鏃堕棿"
sortable="custom"
+ width="160"
/>
<el-table-column
label="鎿嶄綔"
+ width="120"
+ fixed="right"
>
<template slot-scope="{row}">
<div class="operationClass">
- <!-- <el-button type="text" @click="edit('edit',row)">缂栬緫</el-button>-->
- <el-button type="text" @click="edit('edit',row)">棰勮</el-button>
- <el-button type="text" @click="del(row)">鍒犻櫎</el-button>
+ <el-tooltip class="item" effect="dark" content="棰勮" placement="top">
+ <i
+ class="el-icon-view"
+ style="margin-right:15px;cursor: pointer;color:#42b983 "
+ @click="edit('edit',row)"
+ />
+ </el-tooltip>
+ <el-tooltip v-del-tab-index class="item" effect="dark" content="鍒犻櫎" placement="top">
+ <i class="el-icon-delete" @click="del(row)" />
+ </el-tooltip>
</div>
</template>
</el-table-column>
@@ -106,12 +129,11 @@
</div>
<!--鍒嗛〉-->
<pagination
- v-show="total>0"
:total="total"
:page.sync="form.page"
:limit.sync="form.rows"
align="right"
- layout="prev, pager, next,sizes"
+ layout="total,prev, pager, next,sizes"
popper-class="select_bottom"
@pagination="getRouteSearch"
/>
@@ -120,16 +142,15 @@
<el-dialog
:title="operation==='add'?'鏂板':'棰勮'"
:visible.sync="dialogVisible"
- width="1200px"
+ width="1000px"
:close-on-click-modal="false"
- top="15vh"
- :fullscreen="isFullscreen"
+ :top="isIpad?'5vh':'15vh'"
@closed="handleClose"
@close="handleClose"
>
- <el-form ref="dialogForm" style="height: 500px" :rules="dialogFormRules" :model="dialogForm" label-width="80px">
+ <el-form ref="dialogForm" style="height: 500px" :rules="dialogFormRules" :model="dialogForm" label-width="110px">
<div style="display: flex">
- <el-form-item label="宸ヨ壓缂栫爜" prop="code" style="margin-right: 20px">
+ <el-form-item label="宸ヨ壓璺嚎缂栫爜" prop="code" style="margin-right: 20px">
<el-input v-model="dialogForm.code" :disabled="operation!=='add'" style="width: 220px" />
</el-form-item>
<el-form-item label="宸ヨ壓鍚嶇О" prop="name">
@@ -155,7 +176,12 @@
</el-select>
</el-form-item>
<el-form-item label="宸ヨ壓鎻忚堪" prop="description">
- <el-input v-model="dialogForm.description" :disabled="operation==='edit'" type="textarea" style="width: 220px" />
+ <el-input
+ v-model="dialogForm.description"
+ :disabled="operation==='edit'"
+ type="textarea"
+ style="width: 220px"
+ />
</el-form-item>
</div>
<el-form-item label="宸ヨ壓璁剧疆" prop="Data" style="margin-top: 30px">
@@ -172,7 +198,7 @@
zIndex:tag.label===selectedName?0:2
}"
>
- {{ index+1 }}
+ {{ index + 1 }}
</div>
<!-- <el-tooltip-->
@@ -258,7 +284,7 @@
<script>
import Pagination from '@/components/Pagination'
-import { AddUpdateRoute, DeleteRoute, RouteSearch, RouteSelect, StepSelect, ViewRoute } from '@/api/zzmx'
+import { AddUpdateRoute, DeleteRoute, RouteSearch, StepSelect, ViewRoute } from '@/api/zzmx'
const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
@@ -279,7 +305,7 @@
}
}
return {
- isFullscreen: false,
+ isIpad: false,
mainHeight: 0,
tableHeight: 0,
form: {
@@ -303,12 +329,12 @@
id: '',
code: '',
name: '',
- enable: '',
+ enable: 'Y',
description: '',
Data: []
},
dynamicTags: [// 宸ヨ壓璁剧疆鏁扮粍
- { editDisabled: true, stepcode: 'Step01', seq: 1, stepname: ' ', effect: 'light' }
+ { editDisabled: true, stepcode: '', seq: 1, stepname: ' ', effect: 'light' }
// { editDisabled: true, stepcode: 'Step02', seq: 2, stepname: '濂�', effect: 'light' },
// { editDisabled: true, stepcode: 'Step03', seq: 3, stepname: '澶�', effect: 'light' }
],
@@ -316,7 +342,8 @@
selectedName: '', // 閫変腑鐨勫悕绉�
autocompleteValue: '', // 鍙悳绱㈣緭鍏ユ涓殑鍊�
routeArr: [], // 宸ヨ壓璁剧疆涓嬫媺鎵�鏈夊��
- addDisabled: false, // 娣诲姞鎸夐挳鏄惁鍙偣鍑�
+ routeSelectedArr: [], // 宸ヨ壓璁剧疆涓嬫媺宸查�夌殑鍊�
+ addDisabled: true, // 娣诲姞鎸夐挳鏄惁鍙偣鍑�
editDisabled: true, // 淇敼鎸夐挳鏄惁鍙偣鍑�
mouseFocusPosition: 0, // 榧犳爣鑱氱劍鐨勪綅缃�
operation: '',
@@ -362,7 +389,7 @@
}
},
// 宸ヨ壓璁剧疆 涓嬫媺鑾峰彇鎵�鏈�
- async getStepSelectArr() {
+ async getStepSelectArr() {
const { data: res } = await StepSelect()
this.routeArr = res
},
@@ -399,9 +426,24 @@
flag2 = true
}
})
+ if (tag.stepname === this.autocompleteValue.trim()) {
+ flag2 = false
+ }
if (flag2) {
return this.$message.info('姝ゅ伐搴忓凡閫夛紝璇烽�夋嫨鍏跺畠宸ュ簭锛�')
}
+ console.log(this.routeArr, 9)
+ this.routeArr.forEach((item, index) => {
+ if (this.autocompleteValue.trim() === item.stepname) {
+ console.log(tag.stepname === item.stepname, 353535)
+ this.routeSelectedArr.push({
+ stepcode: item.stepcode,
+ stepname: item.stepname,
+ value: item.value
+ })
+ this.routeArr.splice(index, 1)
+ }
+ })
// 灏嗗�兼浛鎹㈠埌鍘焧ag浣嶇疆涓�
this.dynamicTags.forEach((item, index) => {
@@ -424,9 +466,29 @@
item.stepname = item.stepname.trim()
if (item.seq !== tag.seq) {
item.editDisabled = false
+ // item.stepcode = this.routeArr.find(it=>it.stepcode=tag.stepcode).stepcode
// return this.$message.info('璇峰厛濉啓鎴栭�夋嫨宸ヨ壓锛�')
}
})
+
+ // if (tag.stepname === '') {
+ // this.dynamicTags[0].stepcode=
+ // }
+
+ // if (tag.stepname.toString().length > 0 && tag.editDisabled) {
+ if (tag.stepname !== '') {
+ const routeSelectedArr = this.routeSelectedArr.find(item => item.stepname === tag.stepname)
+
+ this.routeArr.push(
+ {
+ stepcode: routeSelectedArr.stepcode,
+ stepname: routeSelectedArr.stepname,
+ value: routeSelectedArr.value
+ }
+ )
+ }
+ // }
+
this.addDisabled = true
this.selectedName = tag.stepname
this.autocompleteValue = tag.stepname
@@ -468,11 +530,27 @@
this.dynamicTags.splice(index, 1)
}
})
+
+ const routeSelectedArr = this.routeSelectedArr.find(item => item.stepname === tag.stepname)
+ if (routeSelectedArr !== undefined) {
+ this.routeArr.push(
+ {
+ stepcode: routeSelectedArr.stepcode,
+ stepname: routeSelectedArr.stepname,
+ value: routeSelectedArr.value
+ }
+ )
+ }
+ this.routeArr = this.routeArr.filter((currentValue, currentIndex, selfArr) => {
+ return selfArr.findIndex(item => item.stepcode === currentValue.stepcode) === currentIndex
+ })
+ console.log(this.dynamicTags, 1)
// 閲嶆柊鎺掑簭
this.dynamicTags.forEach((item, index) => {
item.editDisabled = true
item.seq = index + 1
- item.stepcode = 'Step' + ((index + 1).toString().length === 2 ? (index + 1) : '0' + (index + 1))
+ // item.stepcode = 'Step' + ((index + 1).toString().length === 2 ? (index + 1) : '0' + (index + 1))
+ item.stepcode = ''
})
if (this.clickSelected === '') {
this.selectedName = ''
@@ -489,7 +567,14 @@
if (this.clickSelected === '' || this.clickSelected === this.dynamicTags.length) {
seq = this.dynamicTags.length + 1
this.dynamicTags.push(
- { editDisabled: true, seq: seq, stepname: '', effect: 'light', stepcode: ('Step' + (seq.toString().length === 2 ? seq : '0' + seq)) }
+ {
+ editDisabled: true,
+ seq: seq,
+ stepname: '',
+ effect: 'light',
+ // stepcode: ('Step' + (seq.toString().length === 2 ? seq : '0' + seq))
+ stepcode: ''
+ }
)
} else {
// 2.绗簩绉嶆儏鍐� 褰撻�変腑鏌愪釜tag 灏嗗湪tag鍚庨潰娣诲姞
@@ -497,7 +582,8 @@
this.dynamicTags.splice(this.clickSelected, 0, { editDisabled: true, seq: seq, stepname: '', effect: 'light' })
this.dynamicTags.forEach((item, index) => {
item.seq = index + 1
- item.stepcode = 'Step' + ((index + 1).toString().length === 2 ? (index + 1) : '0' + (index + 1))
+ // item.stepcode = 'Step' + ((index + 1).toString().length === 2 ? (index + 1) : '0' + (index + 1))
+ item.stepcode = ''
})
}
@@ -542,10 +628,10 @@
},
// 閲嶇疆
reset() {
- this.form.OrgCode = ''
- this.form.OrgName = ''
- this.form.OrgType = ''
- this.form.UserName = ''
+ this.form.routecode = ''
+ this.form.routename = ''
+ this.form.description = ''
+ this.form.createuser = ''
this.getRouteSearch()
},
@@ -556,7 +642,7 @@
this.getStepSelectArr()
},
// 宸ヨ壓璺嚎棰勮
- async edit(operation, row) {
+ async edit(operation, row) {
this.operation = operation
this.dialogVisible = true
@@ -586,6 +672,9 @@
DeleteRoute({ routecode: row.code }).then(res => {
if (res.code === '200') {
this.$message.success('鍒犻櫎鎴愬姛!')
+ if (this.form.page > 1 && this.tableData.length === 1) {
+ this.form.page--
+ }
this.getRouteSearch()
}
})
@@ -597,12 +686,15 @@
handleClose() {
this.dialogForm.code = ''
this.dialogForm.name = ''
- this.dialogForm.enable = ''
+ this.dialogForm.enable = 'Y'
this.dialogForm.description = ''
this.dialogForm.Data = []
+
this.dynamicTags = [
- { editDisabled: true, stepcode: 'Step01', seq: 1, stepname: ' ', effect: 'light' }
+ { editDisabled: true, stepcode: '', seq: 1, stepname: ' ', effect: 'light' }
]
+ this.addDisabled = true
+ this.routeSelectedArr = []
this.$refs.dialogForm.clearValidate()
},
// 瀵硅瘽妗嗗彇娑�
@@ -614,15 +706,16 @@
if (this.dynamicTags[0].stepname.trim() === '') {
return this.$message.info('宸ヨ壓璁剧疆绗竴椤逛笉鑳戒负绌猴紒')
}
+ console.log(this.routeSelectedArr, 3666666)
console.log(this.dynamicTags, 3)
const Data = []
this.dynamicTags.forEach(item => {
- Data.push({ seq: item.seq, stepcode: item.stepcode, stepname: item.stepname })
+ Data.push({ seq: item.seq, stepcode: this.routeSelectedArr.find(it => it.stepname === item.stepname).stepcode, stepname: item.stepname })
})
Data.forEach(item => {
- if (item.stepname === this.routeArr.find(it => it.stepname === item.stepname).stepname) {
- item.stepcode = this.routeArr.find(it => it.stepname === item.stepname).stepcode
+ if (item.stepname === this.routeSelectedArr.find(it => it.stepname === item.stepname).stepname) {
+ item.stepcode = this.routeSelectedArr.find(it => it.stepname === item.stepname).stepcode
}
})
console.log(Data, 32)
@@ -651,10 +744,16 @@
// 鑾峰彇椤甸潰楂樺害
getHeight() {
this.$nextTick(() => {
- this.mainHeight = window.innerHeight - 250
- this.tableHeight = this.mainHeight - 100
- // this.isFullscreen = window.innerHeight < 800
+ this.mainHeight = window.innerHeight - 85
+ this.tableHeight = this.mainHeight - 200
+ if (window.innerHeight < 769) {
+ this.tableHeight = this.tableHeight - 40
+ }
+ this.isIpad = window.innerHeight < 769 && window.innerWidth < 1367
})
+ },
+ tableRowClassName({ row, rowIndex }) {
+ return 'custom-row'
}
}
}
@@ -662,162 +761,6 @@
<style lang="scss" scoped>
$main_color: #42b983;
-::v-deep .el-button--primary {
- background-color: $main_color !important;
- height: 30px;
- display: flex;
- align-items: center;
- border: 1px solid $main_color;
- padding: 0 20px;
-}
-
-::v-deep .el-button--info {
- height: 30px;
- display: flex;
- align-items: center;
- padding: 0 20px;
-}
-
-::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
- background-color: $main_color !important;
-}
-
-::v-deep .el-dialog__footer {
- display: flex;
- justify-content: flex-end;
-}
-
-.footerButton {
- display: flex;
- justify-content: end;
-}
-
-::v-deep .el-button--default {
- background-color: #ffffff !important;
- height: 30px;
- display: flex;
- align-items: center;
- padding: 0 20px;
-}
-
-::v-deep .el-button--default:hover {
- color: #606266;
-}
-
-::v-deep .el-dialog__body {
- padding: 20px 100px !important;
-}
-
-::v-deep .el-radio__input.is-checked .el-radio__inner {
- background-color: $main_color;
- border-color: $main_color;
-}
-
-::v-deep .el-radio__input.is-checked + .el-radio__label {
- color: $main_color !important;
-}
-
-::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
- border-color: $main_color;
- background-color: $main_color;
-}
-
-::v-deep .el-input__inner {
- height: 30px;
- line-height: 30px;
-}
-
-::v-deep .el-input__inner:focus {
- border-color: $main_color;
-}
-
-::v-deep .el-table .caret-wrapper {
- transform: scale(0.8);
-}
-
-::v-deep .cell {
- display: flex !important;
- align-items: center !important;
- justify-content: space-between !important;
-}
-
-::v-deep .el-button--text {
- color: $main_color;
- font-size: 14px;
- cursor: pointer;
-}
-
-.operationClass {
- height: 23px;
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.el-icon-share {
- color: $main_color;
- cursor: pointer;
-}
-
-.el-checkbox.is-bordered.is-checked {
- border-color: $main_color;
-}
-
-::v-deep .el-radio__input.is-checked .el-radio__inner {
- border-color: $main_color;
- background: $main_color;
-}
-
-::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
- border-color: $main_color;
- background: $main_color;
-}
-
-::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
- color: $main_color !important;
-}
-
-::v-deep .el-checkbox.is-bordered + .el-checkbox.is-bordered {
- margin: 10px 30px 0px 0;
-}
-
-::v-deep .el-radio__input.is-checked + .el-radio__label {
- color: $main_color;
-}
-
-::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
- margin: 10px 30px 0px 0;
-}
-
-.body ::v-deep .el-divider {
- border: 1px solid #eee;
- width: 99%;
- margin: 10px auto;
-}
-
-.body ::v-deep .el-form-item {
- 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;
-}
/*
瀹炵幇宸ヨ壓璁剧疆鍔ㄦ�佹坊鍔犳牱寮�
@@ -828,8 +771,8 @@
position: absolute;
margin-left: -7px;
z-index: 2;
- width: 15px;
- height: 15px !important;
+ width: 16px;
+ height: 16px !important;
font-size: 12px;
text-align: center;
line-height: 15px;
@@ -891,8 +834,9 @@
border-radius: 0;
color: $main_color;
}
+
::v-deep .el-button--success:disabled {
- background-color:#eeeeee;
+ background-color: #eeeeee;
color: $main_color;
}
@@ -926,9 +870,108 @@
white-space: nowrap;
}
-.autocompleteClass{
- .el-autocomplete-suggestion li{
+.autocompleteClass {
+ .el-autocomplete-suggestion li {
//color: red;
}
}
</style>
+
+<!--鍏叡椤甸潰鏍峰紡-->
+<style lang="scss" scoped>
+$main_color: #42b983;
+.el-icon-share, .el-icon-delete, .el-icon-edit-outline {
+ color: $main_color;
+ cursor: pointer;
+}
+
+.el-icon-edit-outline {
+ margin-right: 15px;
+}
+
+::v-deep .el-button--primary, .el-button--default, .el-button--info {
+ height: 34px;
+ display: flex;
+ align-items: center;
+ padding: 0 15px;
+}
+
+::v-deep .el-button--primary {
+ //background-color: $main_color !important;
+}
+
+::v-deep .el-button--default {
+ background-color: #f8f8fa;
+ border: none;
+}
+
+::v-deep .el-input__inner {
+ height: 34px;
+ line-height: 34px;
+ //color: #a7a7a7;
+}
+
+::v-deep .el-dialog__body {
+ padding: 20px 20px !important;
+}
+
+::v-deep .dialogVisibleRoles .el-dialog__body {
+ padding: 20px 20px !important;
+}
+
+::v-deep .importPickerClass .el-dialog__body {
+ padding: 20px 20px !important;
+}
+
+::v-deep .el-dialog__footer {
+ display: flex;
+ justify-content: flex-end;
+}
+
+::v-deep .el-table .caret-wrapper {
+ transform: scale(0.8);
+}
+
+::v-deep .cell {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+::v-deep .el-table::before {
+ height: 0;
+}
+
+::v-deep .el-table__body-wrapper {
+ background-color: #f8f8fa;
+}
+
+::v-deep .el-table__body .el-table__row.hover-row td {
+ background-color: #eaecef;
+}
+
+::v-deep .el-form--inline .el-form-item__label {
+ color: #a7a7a7;
+}
+
+.body ::v-deep .el-divider {
+ border: 1px solid #eee;
+ width: 99%;
+ margin: 10px auto;
+}
+
+.body ::v-deep .el-form-item {
+ margin-bottom: 0;
+}
+
+.userDialogVisible ::v-deep .el-form-item {
+ margin-bottom: 0;
+}
+
+</style>
+<style>
+
+.el-table .custom-row {
+ background: #f8f8fa;
+}
+</style>
--
Gitblit v1.9.3