From c72cb6959cbf43520fbc88f390e2e21da7fbfbf4 Mon Sep 17 00:00:00 2001 From: liukangdong <898885815@qq.com> Date: 星期四, 10 十月 2024 09:09:43 +0800 Subject: [PATCH] ll --- admin/src/components/business/OperaPlatformApproveTemplWindow.vue | 660 ++++++++++++++++++++++++++++------------------------------- 1 files changed, 312 insertions(+), 348 deletions(-) diff --git a/admin/src/components/business/OperaPlatformApproveTemplWindow.vue b/admin/src/components/business/OperaPlatformApproveTemplWindow.vue index 6ff22bc..3b093f9 100644 --- a/admin/src/components/business/OperaPlatformApproveTemplWindow.vue +++ b/admin/src/components/business/OperaPlatformApproveTemplWindow.vue @@ -1,11 +1,5 @@ <template> - <GlobalWindow - :title="title" - width="100%" - :visible.sync="visible" - :confirm-working="isWorking" - @confirm="confirm" - > + <GlobalWindow :title="title" width="100%" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm"> <TableLayout> <template v-slot:table-wrap> <div class="config"> @@ -23,14 +17,10 @@ <img src="@/assets/images/peizhi_ar@2x.png" alt="" /> </div> <div v-for="(item, index) in apprList" :key="index"> - <div - class="item yellow" - :class="{ + <div class="item yellow" :class="{ active: activeIndex == index, blue: item.type == '1', - }" - @click="flowClick(index)" - > + }" @click="flowClick(index)"> <div class="head">{{ item.remark }}</div> <div class="content"> <!-- 瀹℃壒 --> @@ -40,25 +30,19 @@ </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>{{ item.objIds[0].name }} + {{ item.objIds[0].companyName }}</span> <span v-if="item.approveType == 0 && item.type == '0'"> - 鎴栫</span - > + 鎴栫</span> <span v-if="item.approveType == 1 && item.type == '0'"> - 浼氱</span - > + 浼氱</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> <span v-if="item.approveType == 1 && item.type == '0'"> - 浼氱</span - > + 浼氱</span> </div> <div v-else>璇烽�夋嫨</div> <i class="el-icon-arrow-right"></i> @@ -67,19 +51,14 @@ <!-- 鎶勯�� --> <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 - > + <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> + <i v-if="item.memberType == '1'" class="el-icon-arrow-right"></i> </template> </div> </div> @@ -88,11 +67,7 @@ <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> + <i v-if="apprList.length - 2 === index" @click="handleAddAppr()" class="el-icon-circle-plus add"></i> </div> </div> </div> @@ -102,171 +77,114 @@ <div class="config_data_item_label">閫夋嫨璇ヨ妭鐐圭殑瀹℃壒浜�</div> <div class="df_ac mb10"> <div>瀹℃壒鑺傜偣鍚嶇О</div> - <el-input - class="w200 ml10" - v-model="apprList[activeIndex].remark" - ></el-input> + <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 in apprList[activeIndex].objIds" - :key="mem.id" - class="config_data_item_reviewed_content_item" - > + <div v-for="mem in apprList[activeIndex].objIds" :key="mem.id" + class="config_data_item_reviewed_content_item"> <span>{{ mem.name }}</span> <i 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-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="apprList[activeIndex].memberType == 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 - v-for="(mem, memIndex) in apprList[activeIndex].objIds" - :key="mem.id" - class="config_data_item_reviewed_content_item" - > + <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="apprList[activeIndex].memberType == 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="apprList[activeIndex].objLevel" - placeholder="璇烽�夋嫨" - style="margin: 0 20px 0 10px" - > + <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="apprList[activeIndex].noleaderOpt" - :true-label="1" - :false-label="0" - >鎵句笉鍒颁富绠℃椂锛岀敱涓婄骇涓荤浠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=" + <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="apprList[activeIndex].approveType" - 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="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 - > + <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> </div> </div> </template> <!-- --> - <el-dialog title="閫夋嫨鍛樺伐" :visible.sync="isShowTransfer" width="1000px" style="z-index: 99999" append-to-body> + <el-dialog title="閫夋嫨鍛樺伐" :visible.sync="isShowTransfer" width="900px" style="z-index: 99999" append-to-body> <div class="staff_modal"> <div class="left"> - <div - style=" + <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%; height: 100%; overflow-y: scroll"> - <Tree - :list="companyTree" - :defaultProps="{ + <Tree :list="companyTree" :defaultProps="{ name: 'name', status: 'fsStatus', children: 'childList', id: 'id', - }" - @callback="callback" - /> + }" @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 filterable :titles="['鏈��', '宸查��']" 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="TransferSub">纭� 瀹�</el-button> - </span> + <el-button @click="isShowTransfer = false">鍙� 娑�</el-button> + <el-button type="primary" @click="TransferSub">纭� 瀹�</el-button> + </span> </el-dialog> </TableLayout> <span slot="footer" class="dialog-footer"> - <el-button @click="visible= false">杩斿洖</el-button> - </span> + <el-button @click="visible = false">杩斿洖</el-button> + </span> </GlobalWindow> </template> @@ -274,7 +192,7 @@ import BaseOpera from '@/components/base/BaseOpera' import TableLayout from '@/layouts/TableLayout' import Tree from '@/components/common/Tree' -import {approveTemplSave, approveTemplById} from '@/api' +import { approveTemplSave, approveTemplById } from '@/api' import { fetchList } from '@/api/business/company' import { fetchList as memberListPost } from '@/api/business/member' import GlobalWindow from '@/components/common/GlobalWindow' @@ -282,14 +200,14 @@ name: 'OperaPlatformReasonWindow', extends: BaseOpera, components: { Tree, GlobalWindow, TableLayout }, - data () { + data() { return { - model:{}, + model: {}, reasonId: null, activeType: '6', subLoading: false, apprList: [ - { remark: '瀹℃壒浜�', active: false,memberType:1, type: '1', objIds: [] }, + { remark: '瀹℃壒浜�', active: false, memberType: 1, type: '1', objIds: [] }, { remark: '鎶勯�佷汉', active: false, type: '1', objIds: [] } ], activeIndex: 0, @@ -300,18 +218,18 @@ companyTree: [] } }, - created () { + created() { }, methods: { - open (title, row) { + open(title, row) { this.title = title + '銆�' + row.reason + '銆�' this.visible = true this.reasonId = row.id this.model = row this.getfindCompanyTreePage() this.apprList = [ - { remark: '瀹℃壒浜�', active: false, type: '0',memberType:1, objIds: [] }, + { remark: '瀹℃壒浜�', active: false, type: '0', memberType: 1, objIds: [] }, { remark: '鎶勯�佷汉', active: false, type: '1', objIds: [] } ] this.param = {} @@ -321,7 +239,7 @@ this.companyTree = [] this.initDate() }, - flowClick (i) { + flowClick(i) { this.activeIndex = i this.apprList.forEach((item, index) => { if (i === index) { @@ -339,8 +257,8 @@ } }) }, - initDate () { - if(this.model.approveTemplId){ + initDate() { + if (this.model.approveTemplId) { approveTemplById(this.model.approveTemplId).then(res => { if (res && res.paramList) { const arr = res.paramList || [] @@ -353,7 +271,7 @@ companyName: i.companyName } }) - }else{ + } else { item.objIds = [] } }) @@ -365,7 +283,7 @@ }) } }, - onSubmit () { + onSubmit() { const { apprList, activeType } = this const temp = JSON.parse(JSON.stringify(apprList)) temp.forEach((item, index) => { @@ -379,7 +297,7 @@ this.subLoading = true approveTemplSave({ type: activeType, - reasonId:this.model.id, + reasonId: this.model.id, paramList: temp }).then(res => { this.subLoading = false @@ -389,17 +307,17 @@ this.subLoading = false }) }, - handleDel () { + handleDel() { const { activeIndex } = this this.apprList.splice(activeIndex, 1) this.activeIndex = 0 }, - handleAddAppr () { - this.apprList.splice(this.apprList.length - 1, 0, { remark: '瀹℃壒浜�', active: false,memberType:1, type: 0, objIds: [] }) + handleAddAppr() { + this.apprList.splice(this.apprList.length - 1, 0, { remark: '瀹℃壒浜�', active: false, memberType: 1, type: 0, objIds: [] }) // this.apprList.push({ remark: '瀹℃壒浜�', active: false, type: '0' }) }, // 鑾峰彇缁勭粐鏍� - getfindCompanyTreePage () { + getfindCompanyTreePage() { fetchList() .then(res => { if (res && res.length > 0) { @@ -411,7 +329,7 @@ } }) }, - getMemberList () { + getMemberList() { memberListPost({ model: { companyId: this.searchForm.companyId || '', @@ -433,13 +351,13 @@ // console.log('defaultProps', res) }) }, - callback (row) { + callback(row) { console.log(row) this.$set(this.searchForm, 'companyId', row.id) this.$set(this.searchForm, 'erpOrgId', row.erpId) this.getMemberList() }, - TransferSub () { + TransferSub() { const { activeIndex } = this if (this.searchForm.objIds && this.searchForm.objIds.length > 0) { if (this.searchForm.objIds.length > 20) return this.$message.warning('鏈�澶氶�夋嫨20浜�') @@ -460,7 +378,7 @@ this.isShowTransfer = false console.log(this.searchForm.objIds) }, - memDel (memIndex) { + memDel(memIndex) { const { activeIndex } = this this.apprList.forEach((item, index) => { if (activeIndex === index) { @@ -472,11 +390,11 @@ } }) }, - selStaff () { + selStaff() { this.isShowTransfer = true this.getMemberList() }, - seleItem (i) { + seleItem(i) { this.list.forEach((item, index) => { item.active = index === i }) @@ -485,175 +403,205 @@ } </script> <style lang="scss" scoped> -.labelTip{ +.labelTip { font-size: 12px; color: #666666; } + .config { - width: 100%; - padding-bottom: 20px; - box-sizing: border-box; - height: calc(100vh - 140px); - display: flex; - align-items: center; - justify-content: space-between; -.config_list { - width: 543px; - height: 100%; - flex-shrink: 0; - border-radius: 2px; - padding: 20px; - box-sizing: border-box; - border: 1px solid #eeeeee; - background: #f7f7f7; -.config_list_head { width: 100%; - height: 40px; + padding-bottom: 20px; + box-sizing: border-box; + height: calc(100vh - 140px); display: flex; align-items: center; justify-content: space-between; -span { - font-size: 18px; - font-weight: 500; - color: #222222; + + .config_list { + width: 543px; + height: 100%; + flex-shrink: 0; + border-radius: 2px; + padding: 20px; + 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); + padding-top: 45px; + box-sizing: border-box; + overflow-y: scroll; + 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; + border: 2px solid #f7f7f7; + height: 80px; + background: #4456ac; + border-radius: 2px; + position: relative; + display: flex; + flex-direction: column; + + .head { + height: 32px; + line-height: 32px; + padding: 2px 12px; + color: #fff; + } + + .content { + flex: 1; + background-color: #fff; + display: flex; + align-items: center; + 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; + color: #999999; + 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; + font-weight: 400; + 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; + color: #999999; + margin-left: 8px; + } + } + } + } + } + } } -} -.config_content { - width: 100%; - height: calc(100% - 40px); - padding-top: 45px; - box-sizing: border-box; - overflow-y: scroll; - 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; - border: 2px solid #f7f7f7; - height: 80px; - background: #4456ac; - border-radius: 2px; - position: relative; - display: flex; - flex-direction: column; -.head { - height: 32px; - line-height: 32px; - padding: 2px 12px; - color: #fff; -} -.content { - flex: 1; - background-color: #fff; - display: flex; - align-items: center; - 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; - color: #999999; - 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; - font-weight: 400; - 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; - color: #999999; - margin-left: 8px; - } -} -} -} -} -} -} + .config_data_item_reviewed_content { width: 400px; margin-top: 10px; @@ -665,46 +613,62 @@ display: flex; align-items: flex-start; flex-wrap: wrap; -.add { - font-size: 12px; - font-weight: 400; - color: #435ebe; - cursor: pointer; - margin-top: 3px; + + .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_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; -::v-deep .el-transfer-panel__body { - height: 500px; -} -::v-deep .el-transfer-panel__list.is-filterable { - height: 480px; -} -} + + .left { + width: 240px; + 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