From 5b9c22a1e5e2364603778d1ed95e73129b47f1db Mon Sep 17 00:00:00 2001 From: liukangdong <898885815@qq.com> Date: 星期二, 12 十一月 2024 10:52:47 +0800 Subject: [PATCH] ll --- admin/src/views/operation/serviceCar/apprConfig.vue | 636 ++++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 418 insertions(+), 218 deletions(-) diff --git a/admin/src/views/operation/serviceCar/apprConfig.vue b/admin/src/views/operation/serviceCar/apprConfig.vue index 70a430b..e42cad6 100644 --- a/admin/src/views/operation/serviceCar/apprConfig.vue +++ b/admin/src/views/operation/serviceCar/apprConfig.vue @@ -1,18 +1,17 @@ <template> <TableLayout> <template v-slot:table-wrap> - <el-tabs v-model="activeName"> - <el-tab-pane label="瀹ゅ唴鐢ㄨ溅" name="first"></el-tab-pane> - <el-tab-pane label="瀹ゅ鐢ㄨ溅" name="second"></el-tab-pane> + <el-tabs v-model="activeType" @tab-click="handleClick"> + <el-tab-pane label="甯傚唴鐢ㄨ溅" name="3"></el-tab-pane> + <el-tab-pane label="甯傚鐢ㄨ溅" name="4"></el-tab-pane> </el-tabs> <div class="config"> <div class="config_list"> <div class="config_list_head"> - <span>娴佺▼閰嶇疆</span> - <el-button type="primary">鍙戝竷</el-button> + <span>閰嶇疆娴佺▼</span> </div> <div class="config_content"> - <div class="item active"> + <div class="item"> <div class="head">鍙戣捣浜�</div> <div class="content">鍐呴儴鍛樺伐</div> </div> @@ -20,45 +19,58 @@ <div class="line"></div> <img src="@/assets/images/peizhi_ar@2x.png" alt="" /> </div> - <div - class="item yellow" - :class="{ active: activeSel === 'one' }" - @click="flowClick('one')" - > - <div class="head">瀹℃壒浜�</div> - <div class="content"> - <div>鏌愭煇-缁煎悎绉�</div> - <i class="el-icon-arrow-right"></i> + <div v-for="(item, index) in apprList" :key="index"> + <div class="item yellow" :class="{ + active: activeIndex == index, + blue: item.type == '1', + }" @click="flowClick(index)"> + <div class="head">{{ item.remark }}</div> + <div class="content"> + <!-- 瀹℃壒 --> + <template v-if="item.type == 0"> + <template v-if="item.memberType == '2'"> + <div>閮ㄩ棬涓荤</div> + </template> + <template v-if="item.memberType == '1'"> + <div v-if="item.objIds && item.objIds.length === 1"> + <span>{{ item.objIds[0].name }} + {{ item.objIds[0].companyName }}</span> + <span v-if="item.approveType == 0 && item.type == '0'"> + 鎴栫</span> + <span v-if="item.approveType == 1 && item.type == '0'"> + 浼氱</span> + </div> + <div v-else-if="item.objIds && item.objIds.length > 1"> + <span>{{ item.objIds[0].name }} 绛�</span> + <span v-if="item.approveType == 0 && item.type == '0'"> + 鎴栫</span> + <span v-if="item.approveType == 1 && item.type == '0'"> + 浼氱</span> + </div> + <div v-else>璇烽�夋嫨</div> + <i class="el-icon-arrow-right"></i> + </template> + </template> + <!-- 鎶勯�� --> + <template v-if="item.type == 1"> + <div v-if="item.objIds && item.objIds.length === 1"> + <span>{{ item.objIds[0].name }} + {{ item.objIds[0].companyName }}</span> + </div> + <div v-else-if="item.objIds && item.objIds.length > 1"> + <span>{{ item.objIds[0].name }} 绛�</span> + </div> + <div v-else>璇烽�夋嫨</div> + <i v-if="item.memberType == '1'" class="el-icon-arrow-right"></i> + </template> + </div> </div> - </div> - <div class="arrows"> - <div class="line"></div> - <img src="@/assets/images/peizhi_ar@2x.png" alt="" /> - </div> - <div - class="item yellow" - :class="{ active: activeSel === 'one' }" - @click="flowClick('one')" - > - <div class="head">瀹℃壒浜�</div> - <div class="content"> - <div>鏉庣惓-缁煎悎绉�</div> - <i class="el-icon-arrow-right"></i> - </div> - </div> - <div class="arrows"> - <div class="line"></div> - <img src="@/assets/images/peizhi_ar@2x.png" alt="" /> - </div> - <div - class="item blue" - :class="{ active: activeSel === 'two' }" - @click="flowClick('two')" - > - <div class="head">鎶勯�佷汉</div> - <div class="content"> - <div>鎸囨淳椹鹃┒鍛�</div> - <i class="el-icon-arrow-right"></i> + <div class="arrows"> + <template v-if="apprList.length - 1 !== index"> + <div class="line"></div> + <img src="@/assets/images/peizhi_ar@2x.png" alt="" /> + </template> + <i v-if="apprList.length - 2 === index" @click="handleAddAppr()" class="el-icon-circle-plus add"></i> </div> </div> </div> @@ -66,113 +78,115 @@ <div class="config_data"> <div class="config_data_item"> <div class="config_data_item_label">閫夋嫨璇ヨ妭鐐圭殑瀹℃壒浜�</div> - <el-radio-group v-model="radio"> + <div class="df_ac mb10"> + <div>瀹℃壒鑺傜偣鍚嶇О</div> + <el-input class="w200 ml10" v-model="apprList[activeIndex].remark"></el-input> + </div> + <!-- 鎶勯�佷汉 --> + <template v-if="apprList[activeIndex].type == '1'"> + <div class="config_data_item_reviewed_content"> + <div v-for="mem, memIndex in apprList[activeIndex].objIds" :key="mem.id" + class="config_data_item_reviewed_content_item"> + <span>{{ mem.name }}</span> + <i @click="memDel(memIndex)" class="el-icon-close"></i> + </div> + <span class="add" @click="selStaff">+娣诲姞</span> + </div> + </template> + <el-radio-group v-if="apprList[activeIndex].type == '0'" v-model="apprList[activeIndex].memberType"> + <!-- <el-radio :label="0">琚浜�</el-radio> --> <el-radio :label="1">鎸囧畾浜哄憳</el-radio> <el-radio :label="2">閮ㄩ棬涓荤</el-radio> </el-radio-group> - <div class="config_data_item_reviewed" v-if="radio === 1"> + <div class="config_data_item_reviewed" v-if="apprList[activeIndex].memberType == 1"> <div class="config_data_item_reviewed_label"> <span>鎸囧畾瀹℃牳浜�</span> <span>涓嶈秴杩�20浜�</span> </div> <div class="config_data_item_reviewed_content"> - <div class="config_data_item_reviewed_content_item"> - <span>鏍撳瓙鍝�</span> - <i class="el-icon-close"></i> + <div v-for="(mem, memIndex) in apprList[activeIndex].objIds" :key="mem.id" + class="config_data_item_reviewed_content_item"> + <span>{{ mem.name }}</span> + <i class="el-icon-close" @click="memDel(memIndex)"></i> </div> <span class="add" @click="selStaff">+娣诲姞</span> </div> </div> - <div class="config_data_item_reviewed" v-if="radio === 2"> + <div class="config_data_item_reviewed" v-if="apprList[activeIndex].memberType == 2"> <div class="config_data_item_reviewed_label"> <span>閮ㄩ棬涓荤</span> </div> <div class="config_data_item_reviewed_r"> - <span>琚浜虹殑</span> - <el-select - v-model="value" - placeholder="璇烽�夋嫨" - style="margin: 0 20px 0 10px" - > - <el-option - v-for="item in options" - :key="item.value" - :label="item.label" - :value="item.value" - > - </el-option> + <span>鐢宠浜虹殑</span> + <el-select v-model="apprList[activeIndex].objLevel" placeholder="璇烽�夋嫨" style="margin: 0 20px 0 10px"> + <el-option label="鐩存帴涓荤" :value="0" /> + <el-option label="浜岀骇涓荤" :value="1" /> + <el-option label="涓夌骇涓荤" :value="2" /> + <el-option label="鍥涚骇涓荤" :value="4" /> </el-select> - <el-checkbox v-model="checked" - >鎵句笉鍒颁富绠℃椂锛岀敱涓婄骇涓荤浠e鏍�</el-checkbox - > + <el-checkbox v-model="apprList[activeIndex].noleaderOpt" :true-label="1" + :false-label="0">鎵句笉鍒颁富绠℃椂锛岀敱涓婄骇涓荤浠e鏍�</el-checkbox> </div> </div> </div> - <div class="config_data_item" v-if="radio !== 0"> + <div class="config_data_item" v-if=" + (apprList[activeIndex].memberType == 1 || + apprList[activeIndex].memberType == 2) && + apprList[activeIndex].type == '0' + "> <div class="config_data_item_label"> 瀹℃壒鏂瑰紡 <span>瀹℃壒浜轰负澶氫釜鏃讹紝閲囩敤鐨勫鎵规柟寮�</span> </div> - <el-radio-group - v-model="radio1" - style="display: flex; flex-direction: column" - > - <el-radio :label="0" style="margin-bottom: 20px" - >鎴栫锛堝叾涓竴鍚嶅鎵逛汉鍚屾剰鎴栨嫆缁濆嵆鍙級</el-radio - > + <el-radio-group v-model="apprList[activeIndex].approveType" style="display: flex; flex-direction: column"> + <el-radio :label="0" style="margin-bottom: 20px">鎴栫锛堝叾涓竴鍚嶅鎵逛汉鍚屾剰鎴栨嫆缁濆嵆鍙級</el-radio> <el-radio :label="1">浼氱锛堟墍鏈夊鎵逛汉閮藉悓鎰忔墠鍙�氳繃锛�</el-radio> </el-radio-group> </div> - <div class="df_ac"> - <span class="mr10"><strong>鍏佽淇敼鐢宠椤�</strong></span> - <el-switch v-model="param.aa" active-value="1" inactive-value="0"> - </el-switch> + <div v-if="apprList[activeIndex].type == '0'" class="df_ac mb10"> + <div>鍏佽淇敼"椹鹃┒鍛�"</div> + <el-switch class="ml10" :active-value="1" :inactive-value="0" + v-model="apprList[activeIndex].driverParam"></el-switch> </div> - <div class="df_ac mt10"> - <span class="mr20">閫夋嫨淇敼椤�</span> - <el-select - v-model="param.list" - collapse-tags - multiple - placeholder="璇烽�夋嫨,澶氶��" - > - <el-option - v-for="item in options" - :key="item.value" - :label="item.label" - :value="item.value" - > - </el-option> - </el-select> - </div> - <div class="config_data_submit" v-if="radio !== 0"> - <el-button style="background: #435ebe" type="primary" - >淇濆瓨閰嶇疆椤�</el-button - > - </div> + <div class="config_data_submit"> + <el-button @click="onSubmit" :loading="subLoading" style="background: #435ebe" + type="primary">淇濆瓨閰嶇疆椤�</el-button> + <el-button v-if="activeIndex !== 0 && activeIndex !== apprList.length - 1" type="danger" plain + @click="handleDel">鍒犻櫎鑺傜偣</el-button> + </div>3 </div> </div> </template> <!-- --> - <el-dialog title="閫夋嫨鍛樺伐" :visible.sync="isShowTransfer" width="800px"> - <tree-transfer - v-model="param.menuIds" - :title="['鏈��', '宸查��']" - :from_data="fromData" - :to_data="selData" - :defaultProps="{ label: 'label' }" - mode="transfer" - height="500px" - filter - openAll - ref="treeTransfer" - > - </tree-transfer> + <el-dialog title="閫夋嫨鍛樺伐" :visible.sync="isShowTransfer" width="1000px"> + <div class="staff_modal"> + <div class="left"> + <div style=" + width: 100%; + height: 50px; + background: rgba(242, 242, 242, 1); + line-height: 50px; + text-align: center; + font-size: 14px; + "> + 浼佷笟缁勭粐鏋舵瀯 + </div> + <div style="width: 100%; max-height: 560px; overflow-y: scroll"> + <Tree :list="companyTree" :defaultProps="{ + name: 'name', + status: 'fsStatus', + children: 'childList', + id: 'id', + }" @callback="callback" /> + </div> + </div> + <el-transfer filterable :title="['鏈��', '宸查��']" openAll :props="{ label: 'name', key: 'keyTemp' }" + filter-placeholder="鎼滅储鍛樺伐" v-model="searchForm.objIds" :data="memberList" class="transfer"> + </el-transfer> + </div> <span slot="footer" class="dialog-footer"> <el-button @click="isShowTransfer = false">鍙� 娑�</el-button> - <el-button type="primary" @click="isShowTransfer = false" - >纭� 瀹�</el-button - > + <el-button type="primary" @click="TransferSub">纭� 瀹�</el-button> </span> </el-dialog> </TableLayout> @@ -180,87 +194,201 @@ <script> import TableLayout from '@/layouts/TableLayout' -import treeTransfer from 'el-tree-transfer' +// import treeTransfer from 'el-tree-transfer' +import Tree from '@/components/common/Tree' +import { approveTemplSave, approveTemplByType } from '@/api' +import { fetchList } from '@/api/business/company' +import { fetchList as memberListPost } from '@/api/business/member' export default { name: 'config', components: { TableLayout, - treeTransfer + Tree }, data() { return { - - value: '', - radio: 0, - radio1: 0, - checked: '', - checkList: [], + activeType: '3', + subLoading: false, + apprList: [ + { remark: '瀹℃壒浜�', active: false, type: '0', objIds: [] }, + { remark: '鎶勯�佷汉', active: false, type: '1', objIds: [] } + ], + activeIndex: 0, param: {}, - activeSel: 'one', - activeName: 'first', + searchForm: {}, isShowTransfer: false, - fromData: [ - { - id: '1', - pid: 0, - label: '涓�绾� 1', - children: [ - { - id: '1-1', - pid: '1', - label: '浜岀骇 1-1', - disabled: true, - children: [] - }, - { - id: '1-2', - pid: '1', - label: '浜岀骇 1-2', - children: [ - { - id: '1-2-1', - pid: '1-2', - children: [], - label: '浜岀骇 1-2-1' - }, - { - id: '1-2-2', - pid: '1-2', - children: [], - label: '浜岀骇 1-2-2' - } - ] - } - ] - } - ], - options: [{ - value: '閫夐」1', - label: '榛勯噾绯�' - }, { - value: '閫夐」2', - label: '鍙岀毊濂�' - }, { - value: '閫夐」3', - label: '铓典粩鐓�' - }, { - value: '閫夐」4', - label: '榫欓』闈�' - }, { - value: '閫夐」5', - label: '鍖椾含鐑ら腑' - }], - selData: [] + memberList: [], + companyTree: [] } }, + created() { + this.getfindCompanyTreePage() + this.initDate() + }, methods: { - flowClick(val) { - this.activeSel = val + handleClick() { + this.apprList = [] + const arr = [ + { remark: '瀹℃壒浜�', active: false, type: 0, objIds: [] }, + { remark: '鎶勯�佷汉', active: false, type: 1, objIds: [] } + ] + this.apprList = [...arr] + this.initDate() + }, + flowClick(i) { + this.activeIndex = i + this.apprList.forEach((item, index) => { + if (i === index) { + item.active = true + if (item.objIds && item.objIds.length > 0) { + const objIds = item.objIds.map(i => { + return `${i.id}-${i.name}${i.companyName ? '-' + i.companyName : ''}` + }) + this.$set(this.searchForm, 'objIds', objIds) + } else { + this.$set(this.searchForm, 'objIds', []) + } + } else { + item.active = false + } + }) + }, + initDate() { + const { activeType } = this + approveTemplByType(activeType).then(res => { + if (res && res.paramList) { + const arr = res.paramList || [] + arr.forEach(item => { + if (item.memberList && item.memberList.length > 0) { + item.objIds = item.memberList.map(i => { + return { + id: i.id, + name: i.name, + companyName: i.companyName + } + }) + } else { + item.objIds = [] + } + }) + this.apprList = arr + this.flowClick(0) + this.$forceUpdate() + } + + // console.log(res); + }) + }, + onSubmit() { + const { apprList, activeType } = this + const temp = JSON.parse(JSON.stringify(apprList)) + temp.forEach((item, index) => { + item.level = index + 1 + if (item.objIds && item.objIds.length > 0) { + item.objIds = item.objIds.map(i => i.id).join(',') + } else { + item.objIds = '' + } + }) + this.subLoading = true + approveTemplSave({ + type: activeType, + paramList: temp + }).then(res => { + this.subLoading = false + this.$tip.success('淇濆瓨鎴愬姛') + }, () => { + this.subLoading = false + }) + }, + handleDel() { + const { activeIndex } = this + this.apprList.splice(activeIndex, 1) + this.activeIndex = 0 + }, + handleAddAppr() { + this.apprList.splice(this.apprList.length - 1, 0, { remark: '瀹℃壒浜�', approveType: 0, active: false, type: 0, objIds: [] }) + // this.apprList.push({ remark: '瀹℃壒浜�', active: false, type: '0' }) }, + // 鑾峰彇缁勭粐鏍� + getfindCompanyTreePage() { + fetchList() + .then(res => { + if (res && res.length > 0) { + res[0].fsStatus = 1 + this.companyTree = res + // // this.searchForm.erpOrgId = res[0].erpId + // this.search() + // this.department = this.getDepartmentTree(res) + } + }) + }, + getMemberList() { + memberListPost({ + model: { + companyId: this.searchForm.companyId || '', + canVisit: '', + companyType: 1, + erpOrgId: '', + hasFace: '', + hkStatus: '', + includeChild: true, + type: 2 + }, + page: 1, + capacity: 300 + }).then(res => { + this.memberList = res.records || [] + this.memberList.forEach(item => { + item.keyTemp = item.id + '-' + item.name + '-' + item.companyName || '' + }) + // console.log('defaultProps', res) + }) + }, + callback(row) { + console.log(row) + this.$set(this.searchForm, 'companyId', row.id) + this.$set(this.searchForm, 'erpOrgId', row.erpId) + this.getMemberList() + }, + TransferSub() { + const { activeIndex } = this + if (this.searchForm.objIds && this.searchForm.objIds.length > 0) { + if (this.searchForm.objIds.length > 20) return this.$message.warning('鏈�澶氶�夋嫨20浜�') + const arr = this.searchForm.objIds.map(ii => { + const obj = ii.split('-') + return { + id: Number(obj[0]), + name: obj[1], + companyName: obj[2] || '' + } + }) + this.apprList.forEach((item, index) => { + if (activeIndex === index) { + item.objIds = arr + } + }) + } + this.isShowTransfer = false + console.log(this.searchForm.objIds) + }, + memDel(memIndex) { + const { activeIndex } = this + this.apprList.forEach((item, index) => { + if (activeIndex === index) { + item.objIds.splice(memIndex, 1) + const objIds = item.objIds.map(i => { + return i.id + '-' + i.name + }) + this.$set(this.searchForm, 'objIds', objIds) + } + }) + }, selStaff() { this.isShowTransfer = true + this.getMemberList() }, seleItem(i) { this.list.forEach((item, index) => { @@ -280,6 +408,7 @@ display: flex; align-items: center; justify-content: space-between; + .config_list { width: 543px; height: 100%; @@ -289,18 +418,21 @@ box-sizing: border-box; border: 1px solid #eeeeee; background: #f7f7f7; + .config_list_head { width: 100%; height: 40px; display: flex; align-items: center; justify-content: space-between; + span { font-size: 18px; font-weight: 500; color: #222222; } } + .config_content { width: 100%; height: calc(100% - 40px); @@ -310,31 +442,49 @@ display: flex; align-items: center; flex-direction: column; + &::-webkit-scrollbar { width: 0; } + .active { border: 2px solid #4456ac !important; } + .yellow { background: #e89e42 !important; } + .blue { background: #5094f3 !important; } + .arrows { display: flex; flex-direction: column; align-items: center; + position: relative; + .line { width: 1px; height: 60px; background-color: #ccc; } + + .add { + font-size: 40px; + color: #2080f7; + position: absolute; + cursor: pointer; + z-index: 999; + top: 10px; + } + img { width: 12px; } } + .item { width: 200px; cursor: pointer; @@ -345,12 +495,14 @@ position: relative; display: flex; flex-direction: column; + .head { height: 32px; line-height: 32px; padding: 2px 12px; color: #fff; } + .content { flex: 1; background-color: #fff; @@ -359,32 +511,39 @@ padding: 0 12px; justify-content: space-between; } + &:last-child { margin: 0 !important; } } } } + .config_data { flex: 1; height: 100%; margin-left: 20px; + .config_data_submit { margin-top: 50px; } + .config_data_item { width: 100%; display: flex; flex-direction: column; margin-bottom: 30px; + &:last-child { margin: 0 !important; } + .config_data_item_label { font-size: 16px; font-weight: 500; color: #222222; margin-bottom: 20px; + span { font-size: 12px; font-weight: 400; @@ -392,14 +551,17 @@ margin-left: 10px; } } + .config_data_item_reviewed { width: 100%; margin-top: 20px; + .config_data_item_reviewed_r { margin-top: 10px; width: 100%; display: flex; align-items: center; + span { flex-shrink: 0; font-size: 14px; @@ -407,15 +569,18 @@ color: #666666; } } + .config_data_item_reviewed_label { display: flex; align-items: center; + span { &:nth-child(1) { font-size: 14px; font-weight: 400; color: #222222; } + &:nth-child(2) { font-size: 12px; font-weight: 400; @@ -424,45 +589,80 @@ } } } - .config_data_item_reviewed_content { - width: 400px; - margin-top: 10px; - height: 110px; - padding: 12px; - box-sizing: border-box; - border-radius: 2px; - border: 1px solid #dfe2e8; - display: flex; - align-items: flex-start; - flex-wrap: wrap; - .add { - font-size: 12px; - font-weight: 400; - color: #435ebe; - cursor: pointer; - margin-top: 3px; - } - .config_data_item_reviewed_content_item { - padding: 3px 5px; - background: #f4f7fc; - border-radius: 2px; - box-sizing: border-box; - margin-right: 10px; - margin-bottom: 10px; - span { - font-size: 12px; - font-weight: 400; - color: #333333; - } - i { - color: #949ba2; - margin-left: 10px; - cursor: pointer; - } - } - } } } } } + +.config_data_item_reviewed_content { + width: 400px; + margin-top: 10px; + height: 110px; + padding: 12px; + box-sizing: border-box; + border-radius: 2px; + border: 1px solid #dfe2e8; + display: flex; + align-items: flex-start; + flex-wrap: wrap; + + .add { + font-size: 12px; + font-weight: 400; + color: #435ebe; + cursor: pointer; + margin-top: 3px; + } + + .config_data_item_reviewed_content_item { + padding: 3px 5px; + background: #f4f7fc; + border-radius: 2px; + box-sizing: border-box; + margin-right: 10px; + margin-bottom: 10px; + + span { + font-size: 12px; + font-weight: 400; + color: #333333; + } + + i { + color: #949ba2; + margin-left: 10px; + cursor: pointer; + } + } +} + +.staff_modal { + display: flex; + + .left { + width: 300px; + margin-right: 20px; + } + + .transfer { + height: 600px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + + ::v-deep .el-transfer-panel { + flex: 1; + height: 100%; + } + + ::v-deep .el-transfer-panel__body { + height: 500px; + } + + ::v-deep .el-transfer-panel__list.is-filterable { + height: 480px; + } + } +} </style> -- Gitblit v1.9.3