From e713b378b01d189f972cfb5b9eae749ee95a8b51 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期六, 29 十月 2022 13:48:00 +0800
Subject: [PATCH] 1.解决两个账号登录，是否被挤掉的问题
---
src/views/zzmx/gylx.vue | 967 +++++++++++++++++++++++++++++++++++---------------------
1 files changed, 597 insertions(+), 370 deletions(-)
diff --git a/src/views/zzmx/gylx.vue b/src/views/zzmx/gylx.vue
index 906dacb..832913d 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;">
@@ -23,23 +29,24 @@
<el-input v-model="form.createuser" style="width: 200px" placeholder="璇疯緭鍏�" />
</el-form-item>
</div>
- <div style="display: flex;align-items: start;margin-top: 5px;z-index: 2">
+ <div class="bodySearchReset" :style="{marginLeft:$store.state.app.sidebar.opened?'5%':'10%'}">
<el-button type="primary" icon="el-icon-search" @click="search">鏌ヨ</el-button>
<el-button type="info" icon="el-icon-refresh" @click="reset">閲嶇疆</el-button>
</div>
</el-form>
+ <div
+ class="bodyTopFormExpand"
+ />
</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
+ ref="tableDataRef"
+ class="tableFixed"
:data="tableData"
:height="tableHeight"
border
+ :row-class-name="tableRowClassName"
:style="{width: 100+'%',height:tableHeight+'px',}"
highlight-current-row
:header-cell-style="this.$headerCellStyle"
@@ -54,6 +61,7 @@
prop="RowNum"
width="50"
label="搴忓彿"
+ fixed
/>
<el-table-column
prop="code"
@@ -69,15 +77,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
@@ -89,14 +108,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="del(row.id)">鍒犻櫎</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>
@@ -104,38 +134,40 @@
</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"
/>
</div>
<el-dialog
- :title="operation==='add'?'鏂板':'淇敼'"
+ :title="operation==='add'?'鏂板':'棰勮'"
:visible.sync="dialogVisible"
- width="80%"
- top="15vh"
+ width="1000px"
+ :close-on-click-modal="false"
+ :top="isIpad?'5vh':'15vh'"
@closed="handleClose"
@close="handleClose"
>
- <el-form ref="dialogForm" :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="OrgCode" style="margin-right: 20px">
- <el-input v-model="dialogForm.OrgCode" :disabled="operation!=='add'" style="width: 220px" />
+ <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="OrgName">
- <el-input v-model="dialogForm.OrgName" style="width: 220px" />
+ <el-form-item label="宸ヨ壓鍚嶇О" prop="name">
+ <el-input v-model="dialogForm.name" :disabled="operation==='edit'" style="width: 220px" />
</el-form-item>
</div>
<div style="display: flex">
- <el-form-item prop="SupUnit" label="浣跨敤鐘舵��" style="margin-right: 20px">
+ <el-form-item prop="enable" label="浣跨敤鐘舵��" style="margin-right: 20px">
<el-select
- v-model="dialogForm.isEnable"
+ v-model="dialogForm.enable"
+ filterable
+ :disabled="operation==='edit'"
:popper-append-to-body="false"
style="width: 220px"
placeholder="璇烽�夋嫨"
@@ -148,51 +180,95 @@
/>
</el-select>
</el-form-item>
- <el-form-item label="宸ヨ壓鎻忚堪" prop="OrgName">
- <el-input v-model="dialogForm.OrgName" type="textarea" style="width: 220px" />
+ <el-form-item label="宸ヨ壓鎻忚堪" prop="description">
+ <el-input
+ v-model="dialogForm.description"
+ :disabled="operation==='edit'"
+ type="textarea"
+ style="width: 220px"
+ />
</el-form-item>
</div>
- <el-form-item label="宸ヨ壓璁剧疆" prop="OrgName">
+ <el-form-item label="宸ヨ壓璁剧疆" prop="Data" 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 v-for="(tag,index) in dynamicTags" :key="tag.seq" 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:tag.label===selectedName?0:2
+ }"
+ >
+ {{ index + 1 }}
+ </div>
- <el-tooltip class="item" effect="dark" :content="tag.label" placement="top">
- <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>-->
- {{ tag.label }}
- <i class="el-icon-edit" @click="tagEdit(tag)" />
- </el-tag>
- </el-tooltip>
+ <!-- <el-tooltip-->
+ <!-- class="item"-->
+ <!-- effect="dark"-->
+ <!-- :content="tag.stepname"-->
+ <!-- placement="top"-->
+ <!-- >-->
+ <!-- @close="handleTagClose(tag.stepname)"-->
+ <!-- :closable="index!==0"-->
+
+ <el-tag
+ v-if="tag.stepname!==selectedName"
+ :disable-transitions="false"
+ class="elTag"
+ :effect="tag.effect"
+ @click="elTagClick(tag)"
+ >
+ {{ tag.stepname }}
+ <i
+ v-if="tag.editDisabled&&operation!=='edit'"
+ class="el-icon-edit"
+ @click="tagEdit(tag)"
+ />
+ </el-tag>
+ <!-- </el-tooltip>-->
+
+ <!-- left:tag.stepname===selectedName?'191px':'141px',-->
+ <i
+ v-if="index!==0&&tag.editDisabled&&operation!=='edit'"
+ :style="{
+ top:tag.stepname===selectedName?'-2px':'-8px',
+ }"
+ class="el-icon-close"
+ @click="handleTagClose(tag)"
+ />
<el-autocomplete
- v-if="!flag&&tag.label===flagSelected"
- :ref="'saveTagInput'+tag.id"
- v-model="value"
+ v-if="tag.stepname===selectedName"
+ :ref="'saveTagInput'+tag.seq"
+ v-model="autocompleteValue"
class="input-new-tag"
size="small"
:fetch-suggestions="querySearch"
- style="margin-left: 0;width: 200px;transform: translate(1)"
+ style="margin-left: 0;width: 150px;transform: translate(1)"
autofocus
- @select="handleSelect"
- @keyup.enter.native="handleInputConfirm2"
+ :debounce="300"
+ :popper-append-to-body="false"
+ popper-class="autocompleteClass"
+ @select="val=>handleSelect(val,tag)"
+ @keyup.enter.native="handleInputConfirm(tag)"
/>
+ <!-- @keyup.enter.native="handleInputConfirm(tag)"-->
+
<!-- @blur="handleBlur2"-->
- <div v-if="index!==dynamicTags.length-1" style="width: 40px;height: 1px;border: 1px solid #42b983" />
+ <div
+ v-if="index!==dynamicTags.length-1"
+ style="width: 40px;height: 1px;border: 1px solid #42b983"
+ />
</div>
</div>
- <!-- :disabled="addDisabled"-->
+
<el-button
+ v-if="operation!=='edit'"
type="success"
+ :disabled="addDisabled"
class="tagSuccess"
size="small"
icon="el-icon-plus"
@@ -204,8 +280,15 @@
</el-form>
<span slot="footer" class="dialog-footer">
<div class="footerButton">
- <el-button @click="dialogVisibleCancel">鍙� 娑�</el-button>
- <el-button type="primary" @click="dialogVisibleConfirm">纭� 瀹�</el-button>
+ <el-button v-if="operation==='edit'" @click="dialogVisibleCancel">杩� 鍥�</el-button>
+ <el-button v-if="operation!=='edit'" @click="dialogVisibleCancel">鍙� 娑�</el-button>
+ <el-button
+ v-if="operation!=='edit'"
+ type="primary"
+ :loading="$store.state.app.buttonIsDisabled"
+ :disabled="$store.state.app.buttonIsDisabled"
+ @click="dialogVisibleConfirm"
+ >纭� 瀹�</el-button>
</div>
</span>
</el-dialog>
@@ -214,36 +297,17 @@
<script>
import Pagination from '@/components/Pagination'
-import { AddUpdateOrganization, DeleteOrganization, OrganizationSearch, PrentOrganization } from '@/api/jcsz'
-import { getCookie } from '@/utils/auth'
-import { RouteSearch } from '@/api/zzmx'
+import { AddUpdateRoute, DeleteRoute, RouteSearch, StepSelect, ViewRoute } from '@/api/zzmx'
+import { validateCode } from '@/utils/global'
-const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
- name: 'Zzjg',
+ name: 'GYLX',
components: {
Pagination
},
data() {
- const validateName = (rule, value, callback) => {
- if (!value) {
- return callback(new Error('璇疯緭鍏ョ紪鐮�'))
- } else {
- if (SER_HZ.test(value)) {
- return callback(new Error('缂栫爜涓嶈兘涓轰腑鏂�'))
- } else {
- callback()
- }
- }
- }
- const validateTypeCode = (rule, value, callback) => {
- if (!value) {
- return callback(new Error('璇烽�夋嫨涓婄骇'))
- } else {
- callback()
- }
- }
return {
+ isIpad: false,
mainHeight: 0,
tableHeight: 0,
form: {
@@ -254,7 +318,7 @@
prop: 'lm_date', // 鎺掑簭瀛楁
order: 'desc', // 鎺掑簭瀛楁
page: 1, // 绗嚑椤�
- rows: 10 // 姣忛〉澶氬皯鏉�
+ rows: 20 // 姣忛〉澶氬皯鏉�
},
isEnableArr: [
{ label: '鏄�', value: 'Y' },
@@ -262,39 +326,42 @@
],
total: 10,
tableData: [],
- dialogVisible: true,
+ dialogVisible: false,
dialogForm: {
- OrgType: '',
- OrgCode: '',
- OrgName: '',
- SupUnit: ''// 涓婄骇鍗曚綅
+ id: '',
+ code: '',
+ name: '',
+ enable: 'Y',
+ description: '',
+ Data: []
},
dynamicTags: [// 宸ヨ壓璁剧疆鏁扮粍
- { id: 1, label: '鏍囩涓�', effect: 'light' },
- { id: 2, label: '鏍囩浜�', effect: 'light' },
- { id: 3, label: '鏍囩涓�', 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' }
],
- tagSelectedId: '', // tag閫夋嫨涓璱d
- flag: true,
- flagSelected: '', // 鍒ゆ柇鏄惁閫変腑
- value: '',
- restaurants: [],
- addDisabled: false,
-
+ clickSelected: '', // 榧犳爣鐐瑰嚮閫変腑鐨勫��
+ selectedName: '', // 閫変腑鐨勫悕绉�
+ autocompleteValue: '', // 鍙悳绱㈣緭鍏ユ涓殑鍊�
+ routeArr: [], // 宸ヨ壓璁剧疆涓嬫媺鎵�鏈夊��
+ routeSelectedArr: [], // 宸ヨ壓璁剧疆涓嬫媺宸查�夌殑鍊�
+ addDisabled: true, // 娣诲姞鎸夐挳鏄惁鍙偣鍑�
+ editDisabled: true, // 淇敼鎸夐挳鏄惁鍙偣鍑�
+ mouseFocusPosition: 0, // 榧犳爣鑱氱劍鐨勪綅缃�
operation: '',
dialogFormRules: {
- OrgType: [
- { required: true, message: '璇疯緭鍏ラ�夋嫨绫诲瀷', trigger: ['blur', 'change'] }
+ code: [
+ { required: true, validator: validateCode, trigger: ['blur', 'change'] }
],
- OrgCode: [
- { required: true, validator: validateName, trigger: ['blur', 'change'] }
- ],
- OrgName: [
+ name: [
{ required: true, message: '璇疯緭鍏ュ悕绉�', trigger: ['blur', 'change'] }
],
- SupUnit: [
- { required: true, validator: validateTypeCode, trigger: ['blur', 'change'] }
+ enable: [
+ { required: true, message: '璇烽�夋嫨浣跨敤鐘舵��', trigger: ['blur', 'change'] }
]
+ // Data: [
+ // { required: true, message: '璇疯缃伐鑹�', trigger: ['blur', 'change'] }
+ // ]
}
}
@@ -305,67 +372,141 @@
mounted() {
window.addEventListener('resize', this.getHeight)
this.getHeight()
- this.restaurants = this.loadAll()
},
methods: {
+ // 杩滅▼鎼滅储
querySearch(queryString, cb) {
- var restaurants = this.restaurants
- var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
+ const routeArr = this.routeArr
+ routeArr.forEach(item => {
+ item.value = item.stepname
+ })
+ const results = queryString ? routeArr.filter(this.createFilter(queryString)) : routeArr
// 璋冪敤 callback 杩斿洖寤鸿鍒楄〃鐨勬暟鎹�
cb(results)
},
+ // 杩囨护
createFilter(queryString) {
- return (restaurant) => {
- return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+ return (res) => {
+ return (res.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
}
},
- loadAll() {
- return [
- { 'value': '涓夊叏椴滈锛堝寳鏂版尘搴楋級', 'address': '闀垮畞鍖烘柊娓旇矾144鍙�' },
- { 'value': 'Hot honey 棣栧皵鐐搁浮锛堜粰闇炶矾锛�', 'address': '涓婃捣甯傞暱瀹佸尯娣炶櫣璺�661鍙�' },
- { 'value': '鏂版椇瑙掕尪椁愬巺', 'address': '涓婃捣甯傛櫘闄�鍖虹湡鍖楄矾988鍙峰垱閭戦噾娌欒胺6鍙锋ゼ113' },
- { 'value': '娉峰崈瀹�(澶╁北瑗胯矾搴�)', 'address': '澶╁北瑗胯矾438鍙�' },
- { 'value': '鑳栦粰濂崇焊鏉泲绯曪紙涓婃捣鍑岀┖搴楋級', 'address': '涓婃捣甯傞暱瀹佸尯閲戦挓璺�968鍙�1骞�18鍙锋ゼ涓�灞傚晢閾�18-101' },
- { 'value': '璐¤尪', 'address': '涓婃捣甯傞暱瀹佸尯閲戦挓璺�633鍙�' },
- { 'value': '璞ぇ澶ч楦℃帓瓒呯骇濂剁埜', 'address': '涓婃捣甯傚槈瀹氬尯鏇瑰畨鍏矾鏇瑰畨璺�1685鍙�' },
- { 'value': '鑼惰姖鍏帮紙濂惰尪锛屾墜鎶撻ゼ锛�', 'address': '涓婃捣甯傛櫘闄�鍖哄悓鏅矾1435鍙�' }
- ]
+ // 宸ヨ壓璁剧疆 涓嬫媺鑾峰彇鎵�鏈�
+ async getStepSelectArr() {
+ const { data: res } = await StepSelect()
+ this.routeArr = res
},
- handleSelect(item) {
- console.log(item)
- },
- handleInputConfirm2() {
- console.log(this.flagSelect, 111)
- // this.dynamicTags.forEach((item,index) => {
- // if (item === this.flagSelect) {
- // console.log(item, 111)
- // item = this.flagSelect
- // }
- // })
- console.log(this.value)
- this.addDisabled = false
- this.flagSelect = ''
- this.value = ''
- this.flag = !this.flag
- },
- tagEdit(tag) {
- console.log(tag, 2)
-
- this.addDisabled = true
- this.flagSelected = tag.label
- this.value = tag.label
- this.flag = !this.flag
+ // 澶勭悊涓嬫媺閫夋嫨
+ handleSelect(item, tag) {
+ this.autocompleteValue = item.value
this.$nextTick(_ => {
- this.$refs['saveTagInput' + tag.id][0].focus()
+ this.$refs['saveTagInput' + this.mouseFocusPosition][0].focus()
+ this.handleInputConfirm(tag)
})
},
+ // 杈撳叆妗嗙‘璁や簨浠�
+ handleInputConfirm(tag) {
+ console.log(tag, 111)
+ console.log(this.autocompleteValue, 2)
+ // 1.閫夋嫨鍐呭涓嶈兘涓虹┖
+ if (this.autocompleteValue.trim().length < 1) {
+ return this.$message.info('閫夋嫨鍐呭涓嶈兘涓虹┖锛�')
+ }
+ // 2.杈撳叆妗嗗唴瀹逛笌涓嬫媺閫夐」鍐呭涓嶅尮閰�
+ let flag = false
+ this.routeArr.forEach(item => {
+ if (item.stepname === this.autocompleteValue) {
+ flag = true
+ }
+ })
+ if (!flag) {
+ return this.$message.info('杈撳叆妗嗗唴瀹逛笌涓嬫媺閫夐」鍐呭涓嶅尮閰嶏紒')
+ }
+
+ // 3.杈撳叆妗嗗唴瀹逛笌宸查�夊唴瀹圭浉鍚屾椂涓嶈兘淇濆瓨
+ let flag2 = false
+ this.dynamicTags.forEach(item => {
+ if (item.stepname === this.autocompleteValue.trim()) {
+ 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) => {
+ if ((index + 1) === tag.seq) {
+ console.log(tag)
+ item.stepname = this.autocompleteValue
+ }
+ item.editDisabled = true
+ })
+ console.log(this.dynamicTags, 234)
+ this.addDisabled = false
+ this.editDisabled = true
+ this.selectedName = ''
+ },
+ // tag鐐瑰嚮淇敼鎸夐挳
+ tagEdit(tag) {
+ console.log(tag, 2)
+ this.autocompleteValue = ''
+ this.dynamicTags.forEach(item => {
+ 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
+ this.$nextTick(_ => {
+ this.$refs['saveTagInput' + tag.seq][0].focus()
+ })
+ this.mouseFocusPosition = tag.seq
+ },
+ // tag鐐瑰嚮浜嬩欢
elTagClick(tag) {
console.log(tag, 1)
-
- this.tagSelectedId = tag.id
+ this.clickSelected = tag.seq
if (tag.effect === 'dark') {
tag.effect = 'light'
- this.tagSelectedId = ''
+ this.clickSelected = ''
} else {
this.dynamicTags.forEach(item => {
item.effect = 'light'
@@ -376,45 +517,93 @@
tag.effect = 'light'
}
}
-
console.log(this.$el)
// console.log(this.$el.style.color = 'red')
},
-
- tagClass() {
- // this.tagSelect.style({ backgroundColor: 'red' })
- // return { backgroundColor: 'red' }
- },
+ // 澶勭悊tag鍏抽棴浜嬩欢
handleTagClose(tag) {
- // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
+ console.log(tag)
+
+ // 褰撻�変腑鐨勬楠よ鍒犻櫎鏃�
+ if (tag.seq === this.clickSelected) {
+ this.clickSelected = ''
+ }
this.dynamicTags.forEach((item, index) => {
- if (item.label === tag) {
- console.log(item.label === tag)
+ if (item.seq === tag.seq) {
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 = ''
+ })
+ if (this.clickSelected === '') {
+ this.selectedName = ''
+ }
+ this.addDisabled = false
+ },
+ // tag娣诲姞鎸夐挳
showInput() {
- // this.inputVisible = true
+ this.autocompleteValue = ''
this.addDisabled = true
- if (this.tagSelectedId === '' || this.tagSelectedId === this.dynamicTags.length) {
+ this.editDisabled = false
+ let seq = 0
+ // 1.绗竴绉嶆儏鍐� 褰撴湭閫変腑鎯呭喌涓嬫垨鑰呴�変腑鏈�鍚庝竴涓殑鎯呭喌涓�
+ if (this.clickSelected === '' || this.clickSelected === this.dynamicTags.length) {
+ seq = this.dynamicTags.length + 1
this.dynamicTags.push(
- { id: (this.dynamicTags.length + 1), label: '', effeft: 'light' }
+ {
+ editDisabled: true,
+ seq: seq,
+ stepname: '',
+ effect: 'light',
+ // stepcode: ('Step' + (seq.toString().length === 2 ? seq : '0' + seq))
+ stepcode: ''
+ }
)
} else {
- console.log(this.tagSelectedId, 31)
- this.dynamicTags.splice(this.tagSelectedId, 0, { id: this.dynamicTags.length + 1, label: '', effect: 'light' })
+ // 2.绗簩绉嶆儏鍐� 褰撻�変腑鏌愪釜tag 灏嗗湪tag鍚庨潰娣诲姞
+ seq = this.clickSelected + 1
+ 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 = ''
+ })
}
- this.flag = !this.flag
+
this.$nextTick(_ => {
- this.$refs['saveTagInput' + this.dynamicTags.length][0].focus()
+ this.$refs['saveTagInput' + seq][0].focus()
})
- // this.$nextTick(_ => {
- // console.log(this.$refs['saveTagInput'], 321)
- // this.$refs.saveTagInput.$refs.input.focus()
- // })
+
+ this.mouseFocusPosition = seq
+
+ this.dynamicTags.forEach((item, index) => {
+ item.editDisabled = seq === index + 1
+ })
+
+ console.log(this.dynamicTags, 1)
},
+
+ // 鑾峰彇宸ヨ壓璺嚎鍒楄〃娓呭崟
async getRouteSearch() {
const res = await RouteSearch(this.form)
this.tableData = res.data
@@ -442,10 +631,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()
},
@@ -453,28 +642,42 @@
add(operation) {
this.operation = operation
this.dialogVisible = true
+ this.getStepSelectArr()
},
- // 淇敼鎸夐挳
- edit(operation, row) {
+ // 宸ヨ壓璺嚎棰勮
+ async edit(operation, row) {
this.operation = operation
this.dialogVisible = true
+ const { data: res } = await ViewRoute({ routecode: row.code })
+
+ this.dynamicTags = []
this.$nextTick(() => {
- this.dialogForm.OrgCode = row.org_code
- this.dialogForm.OrgName = row.org_name
- this.dialogForm.SupUnit = row.parent_id
+ this.dialogForm.code = res[0].code
+ this.dialogForm.name = res[0].name
+ this.dialogForm.enable = res[0].enable
+ this.dialogForm.description = res[0].description
+ // this.dialogForm.Data = row.description
+ res[0].Data.forEach(item => {
+ this.dynamicTags.push(
+ { seq: item.seq, stepname: item.stepname, stepcode: item.stepcode, editDisabled: true, effect: 'light' }
+ )
+ })
})
},
// 鍒犻櫎鎸夐挳
- async del(id) {
+ async del(row) {
this.$confirm('鏄惁纭鍒犻櫎?', '鎻愮ず', {
confirmButtonText: '纭畾',
cancelButtonText: '鍙栨秷',
type: 'warning'
}).then(() => {
- DeleteOrganization({ orgid: id }).then(res => {
+ 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()
}
})
@@ -484,10 +687,17 @@
},
// 瀵硅瘽妗嗗叧闂簨浠�
handleClose() {
- this.dialogForm.OrgType = ''
- this.dialogForm.OrgCode = ''
- this.dialogForm.OrgName = ''
- this.dialogForm.SupUnit = ''
+ this.dialogForm.code = ''
+ this.dialogForm.name = ''
+ this.dialogForm.enable = 'Y'
+ this.dialogForm.description = ''
+ this.dialogForm.Data = []
+
+ this.dynamicTags = [
+ { editDisabled: true, stepcode: '', seq: 1, stepname: ' ', effect: 'light' }
+ ]
+ this.addDisabled = true
+ this.routeSelectedArr = []
this.$refs.dialogForm.clearValidate()
},
// 瀵硅瘽妗嗗彇娑�
@@ -496,34 +706,58 @@
},
// 瀵硅瘽妗嗙‘璁�
dialogVisibleConfirm() {
+ if (this.dynamicTags[0].stepname.trim() === '') {
+ return this.$message.info('宸ヨ壓璁剧疆绗竴椤逛笉鑳戒负绌猴紒')
+ }
+ const Data = []
+ this.dynamicTags.forEach(item => {
+ 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.routeSelectedArr.find(it => it.stepname === item.stepname).stepname) {
+ item.stepcode = this.routeSelectedArr.find(it => it.stepname === item.stepname).stepcode
+ }
+ })
+
this.$refs.dialogForm.validate(valid => {
if (valid) {
+ this.$store.state.app.buttonIsDisabled = true
const data = {
- OrganType: this.dialogFormOrgTypeSelected,
- OrganCode: this.dialogForm.OrgCode,
- OrganName: this.dialogForm.OrgName,
- SupUnit: this.dialogFormOrgTypeSelected === 'F' ? '0' : this.dialogForm.SupUnit,
- OperType: this.operation === 'add' ? 'Add' : 'Update',
- Operator: getCookie('admin')
+ code: this.dialogForm.code,
+ name: this.dialogForm.name,
+ enable: this.dialogForm.enable,
+ description: this.dialogForm.description,
+ Data: Data
}
- // AddUpdateOrganization(data).then(res => {
- // if (res.code === '200') {
- // this.$message.success(this.operation === 'add' ? '娣诲姞鎴愬姛锛�' : '淇敼鎴愬姛锛�')
- // this.dialogVisible = false
- // this.getRouteSearch()
- // } else {
- // this.$message.error(this.operation === 'add' ? '娣诲姞澶辫触锛�' : '淇敼澶辫触锛�')
- // }
- // })
+
+ AddUpdateRoute(this.dialogForm.id, this.operation === 'add' ? 'Add' : 'Update', data).then(res => {
+ if (res.code === '200') {
+ this.dialogVisible = false
+ this.$message.success(this.operation === 'add' ? '娣诲姞鎴愬姛锛�' : '淇敼鎴愬姛锛�')
+ this.getRouteSearch()
+ this.$store.state.app.buttonIsDisabled = false
+ } else {
+ this.$message.error(this.operation === 'add' ? '娣诲姞澶辫触锛�' : '淇敼澶辫触锛�')
+ }
+ })
}
})
},
// 鑾峰彇椤甸潰楂樺害
getHeight() {
this.$nextTick(() => {
- this.mainHeight = window.innerHeight - 250
- this.tableHeight = this.mainHeight - 100
+ this.mainHeight = window.innerHeight - 85
+ this.tableHeight = this.mainHeight - 195
+ if (window.innerHeight < 769) {
+ this.tableHeight = this.tableHeight - 40
+ }
+ this.isIpad = window.innerHeight < 769 && window.innerWidth < 1367
+ this.$refs.tableDataRef.doLayout()
})
+ },
+ tableRowClassName({ row, rowIndex }) {
+ return 'custom-row'
}
}
}
@@ -531,170 +765,26 @@
<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;
-}
/*
瀹炵幇宸ヨ壓璁剧疆鍔ㄦ�佹坊鍔犳牱寮�
*/
-.orderNumber{
-
+.orderNumber {
+ margin-bottom: 31px;
+ position: absolute;
+ margin-left: -7px;
+ z-index: 2;
+ width: 16px;
+ height: 16px !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 +792,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: 141px;
+ 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,13 +832,6 @@
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;
@@ -737,9 +839,15 @@
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,15 +857,134 @@
.settingDiv {
display: flex;
width: 100%;
- height: 40px;
- overflow-y: scroll;
+ padding-left: 7px;
+ height: 56px;
+ overflow-x: scroll;
+ overflow-y: hidden;
align-items: center;
+ background: aliceblue;
}
.elTag {
margin-left: 0;
- width: 100px;
+ width: 150px;
position: relative;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
+.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;
+}
+
+.tableFixed{
+ ::v-deep .el-table__fixed-right{
+ height: 100% !important;
+ }
+ ::v-deep .el-table__fixed{
+ height: 100% !important;
+ }
+}
+
+</style>
+<style>
+
+.el-table .custom-row {
+ background: #f8f8fa;
+}
</style>
--
Gitblit v1.9.3