From 6023b713ba3cf468b5fb43ec101ef3cfc383e9d9 Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期四, 14 十二月 2023 09:11:43 +0800
Subject: [PATCH] 项目左侧树文字提示
---
Source/UBCS-WEB/src/views/modeling/Business.vue | 503 +++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 411 insertions(+), 92 deletions(-)
diff --git a/Source/UBCS-WEB/src/views/modeling/Business.vue b/Source/UBCS-WEB/src/views/modeling/Business.vue
index a9ef549..df22c8a 100644
--- a/Source/UBCS-WEB/src/views/modeling/Business.vue
+++ b/Source/UBCS-WEB/src/views/modeling/Business.vue
@@ -1,111 +1,430 @@
<template>
- <div>
- <avue-form :model="form" :rules="rules">
- <avue-form-item label="濮撳悕" prop="name">
- <el-input v-model="form.name"></el-input>
- </avue-form-item>
- <avue-form-item label="瀛﹀巻" prop="education">
- <el-select v-model="form.education" placeholder="璇烽�夋嫨">
- <el-option label="鍗氬＋" value="鍗氬＋"></el-option>
- <el-option label="纭曞＋" value="纭曞＋"></el-option>
- <el-option label="鏈" value="鏈"></el-option>
- <el-option label="澶т笓" value="澶т笓"></el-option>
- <el-option label="涓笓" value="涓笓"></el-option>
- </el-select>
- </avue-form-item>
- <avue-form-item label="宸ヤ綔缁忓巻">
- <table class="table">
- <thead>
- <tr>
- <th>鍏徃</th>
- <th>鑱屼綅</th>
- <th>璧锋鏃堕棿</th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="(item, index) in form.workExperience" :key="index">
- <td>
- <el-input v-model="item.company"></el-input>
- </td>
- <td>
- <el-input v-model="item.position"></el-input>
- </td>
- <td>
- <el-date-picker
- v-model="item.dateRange"
- range-separator="鑷�"
- type="daterange"
- start-placeholder="寮�濮嬫棩鏈�"
- end-placeholder="缁撴潫鏃ユ湡"
- format="yyyy-MM-dd"
- ></el-date-picker>
- </td>
- </tr>
- </tbody>
- </table>
- </avue-form-item>
- </avue-form>
- </div>
+ <el-container>
+ <!-- <el-header class="businessHeader" style="height: 40px;padding:0 8px">-->
+
+ <!-- </el-header>-->
+ <el-container>
+ <el-aside style="width: 20%">
+ <basic-container class="businessTreeContainer">
+ <div class="app">
+ <div style="display: flex;margin-bottom: 10px;justify-content: space-around;">
+ <el-button v-if="permissionList.addBtn" plain size="mini" style="width: 60px" type="primary"
+ @click="businessAdd">
+ 鏂板
+ </el-button>
+ <el-button v-if="permissionList.editBtn" plain size="mini" style="width: 60px" type="primary"
+ @click="businessEdit">
+ 淇敼
+ </el-button>
+ <el-button v-if="permissionList.table" plain size="mini"
+ type="primary" @click="selectFromTable"> 浠庡凡鏈変腑鑾峰彇
+ </el-button>
+ </div>
+ <avue-tree :data="treeData" :option="treeOption" class="businessTree" style="height: 70.3vh"
+ @node-click="nodeClick">
+ <template slot-scope="{ node, data }" class="el-tree-node__label">
+ <el-tooltip :content="$createElement('div', { domProps: { innerHTML: node.label } })" class="item" effect="dark"
+ open-delay="250"
+ placement="right-start">
+ <span>
+ <i :class="(node || {}).level === 2 ? 'el-icon-star-off' : 'el-icon-folder-opened'"></i>
+ {{ (node || {}).label }}
+ </span>
+ </el-tooltip>
+ </template>
+ </avue-tree>
+ </div>
+
+ </basic-container>
+ </el-aside>
+ <el-container>
+ <el-main>
+ <!--鍩烘湰淇℃伅-->
+ <basic-container>
+ <p style="margin-top: 10px;font-weight: 570;font-size: 19px">鍩烘湰淇℃伅</p>
+ <el-descriptions :column="3" :size="size" border class="margin-top">
+ <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
+ :labelStyle="descriptionOption.labelStyle">
+ <template slot="label">
+ <i :class="icons.key"></i>
+ 鑻辨枃鍚嶇О
+ </template>
+ {{ obj.id }}
+ </el-descriptions-item>
+ <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
+ :labelStyle="descriptionOption.labelStyle">
+ <template slot="label">
+ <i :class="icons.name"></i>
+ 涓枃鍚嶇О
+ </template>
+ {{ obj.name }}
+ </el-descriptions-item>
+ <el-descriptions-item>
+ <template slot="label" :contentStyle="descriptionOption.contentStyle"
+ :labelStyle="descriptionOption.labelStyle">
+ <i :class="icons.tableName"></i>
+ 鏁版嵁搴撹〃鍚�
+ </template>
+ {{ obj.tableName }}
+ </el-descriptions-item>
+ <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
+ :labelStyle="descriptionOption.labelStyle">
+ <template slot="label">
+ <i :class="icons.domain"></i>
+ 鎵�灞為鍩�
+ </template>
+ <el-tag v-if="obj.domainText" size="small">
+ {{ obj.domainText }}
+ </el-tag>
+ <span v-else></span>
+ </el-descriptions-item>
+ <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
+ :labelStyle="descriptionOption.labelStyle">
+ <template slot="label">
+ <i :class="icons.revisionRule"></i>
+ 鐗堟湰瑙勫垯
+ </template>
+ {{ obj.revisionRuleName ? obj.revisionRuleName + '(' + obj.revisionRuleId + ')' : '' }}
+ </el-descriptions-item>
+ <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
+ :labelStyle="descriptionOption.labelStyle">
+ <template slot="label">
+ <i :class="icons.lifeCycle"></i>
+ 鐢熷懡鍛ㄦ湡
+ </template>
+ {{ obj.lifeCycleName ? obj.lifeCycleName + '(' + obj.lifeCycleId + ')' : '' }}
+ </el-descriptions-item>
+ <!-- <el-descriptions-item :contentStyle="descriptionOption.contentStyle"-->
+ <!-- :labelStyle="descriptionOption.labelStyle">-->
+ <!-- <template slot="label">-->
+ <!-- <i :class="icons.view"></i>-->
+ <!-- 瑙嗗浘-->
+ <!-- </template>-->
+ <!-- <el-tag v-if="obj.viewText" size="small">-->
+ <!-- {{ obj.viewText }}-->
+ <!-- </el-tag>-->
+ <!-- <span v-else></span>-->
+ <!-- </el-descriptions-item>-->
+ <!-- <el-descriptions-item>
+ <template slot="label">
+ <i class="el-icon-arrow-down"></i>
+ 瀹炵幇绫�
+ </template>
+ {{ obj.implClass }}
+ </el-descriptions-item> -->
+ <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
+ :labelStyle="descriptionOption.labelStyle">
+ <template slot="label">
+ <i :class="icons.desc"></i>
+ 鎻忚堪
+ </template>
+ {{ obj.description }}
+ </el-descriptions-item>
+ </el-descriptions>
+ </basic-container>
+ <!-- 灞炴�у垪琛�-->
+ <basic-container>
+ <p style="margin-top: 10px;font-weight: 570;font-size: 19px">灞炴�у垪琛�</p>
+ <avue-crud v-model="obj" :data="obj.attributes" :option="loadOption" class="attributeCrud">
+ <template slot="attrDataTypeText" slot-scope="{row}">
+ <el-tag>{{ row.attrDataTypeText }}</el-tag>
+ </template>
+ </avue-crud>
+ </basic-container>
+ </el-main>
+ <el-dialog :visible="ref.visible" append-to-body title="浠庢暟鎹簱涓坊鍔�" top="9vh" width="700px"
+ @close="dialoghandelfalse">
+ 閫夋嫨棰嗗煙锛�
+ <el-select v-model="domain" placeholder="璇烽�夋嫨" size="small" @change="refOnLoad">
+ <el-option v-for="item in domainOptions" :key="item.value" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ <div class="sep" style="height:7px">
+
+ </div>
+ <avue-crud ref="businessCrud" v-model="ref.form" :data="ref.data" :option="ref.option" class="businessCrud"
+ @selection-change="selectionChange">
+ </avue-crud>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="dialoghandelfalse">鍙� 娑�</el-button>
+ <el-button type="primary" @click="dialoghandeltrue">纭� 瀹�</el-button>
+ </span>
+ </el-dialog>
+ </el-container>
+ </el-container>
+ <business-add ref="btmAdd" :btmType="addOption.btmType" :domainOption="domainOptions" :icons="icons" :type="type"
+ @refreshTable="initTreeOnLoad">
+ </business-add>
+ </el-container>
</template>
-
<script>
-
-
+import {
+ initTree,
+ refOnLoad,
+ getDomain,
+ saveFromTable,
+ getDetail
+} from "@/api/omd/btmType"
+import {mapGetters} from "vuex";
export default {
name: "Business",
-
- data(){
+ data() {
return {
- form: {
- name: "",
- education: "",
- workExperience: [
- { company: "", position: "", dateRange: [] },
- { company: "", position: "", dateRange: [] },
- ],
+ type: "",
+ //鐢熷懡鍛ㄦ湡瀵硅瘽妗嗙姸鎬�
+ packageLifeBox: false,
+ //鐗堟湰瑙勫垯鐘舵��
+ rulesFalg: false,
+ obj: {},
+ selectionList: [],
+ treeData: [],
+ treeOption: {
+ defaultExpandAll: false,
+ title: '涓氬姟绫诲瀷鏍�',
+ addBtn: false,
+ menu: false,
+ props: {
+ labelText: '',
+ label: 'label',
+ value: 'oid',
+ children: 'childList',
+ }
},
- rules: {
- name: [{ required: true, message: "璇疯緭鍏ュ鍚�", trigger: "blur" }],
- education: [{ required: true, message: "璇烽�夋嫨瀛﹀巻", trigger: "change" }],
- "workExperience.0.company": [
- { required: true, message: "璇疯緭鍏ュ叕鍙稿悕绉�", trigger: "blur" },
- ],
- "workExperience.0.position": [
- { required: true, message: "璇疯緭鍏ヨ亴浣嶅悕绉�", trigger: "blur" },
- ],
- "workExperience.0.dateRange": [
- { required: true, message: "璇烽�夋嫨璧锋鏃堕棿", trigger: "change" },
- ],
- "workExperience.1.company": [
- { required: true, message: "璇疯緭鍏ュ叕鍙稿悕绉�", trigger: "blur" },
- ],
- "workExperience.1.position": [
- { required: true, message: "璇疯緭鍏ヨ亴浣嶅悕绉�", trigger: "blur" },
- ],
- "workExperience.1.dateRange": [
- { required: true, message: "璇烽�夋嫨璧锋鏃堕棿", trigger: "change" },
- ],
+ addOption: {
+ btmType: {},
},
+ loadOption: {
+ height: 'auto',
+ border: true,
+ editBtn: false,
+ addBtn: false,
+ menu: false,
+ highlightCurrentRow: true,
+ refreshBtn: false,
+ columnBtn: false,
+ column: [
+ {
+ label: '鑻辨枃鍚嶇О',
+ prop: 'id',
+ align: 'center'
+ }, {
+ label: '涓枃鍚嶇О',
+ prop: 'name',
+ align: 'center'
+ },
+ {
+ label: "绫诲瀷",
+ prop: "attrDataTypeText",
+ align: 'center',
+ slot: true
+ },
+ {
+ label: "榛樿鍊�",
+ prop: "defaultValue",
+ align: 'center'
+ },
+ {
+ label: "璇存槑",
+ prop: "description",
+ align: 'center'
+ }
+ ]
+ },
+ descriptionOption: {
+ labelStyle: 'text-align:center;width:120px',
+ contentStyle: 'width:240px;text-align:center;word-break;break-all;'
+ },
+ domain: null,
+ domainOptions: [],
+ icons: {
+ key: 'el-icon-finished',
+ name: 'el-icon-tickets',
+ tableName: 'el-icon-date',
+ domain: 'el-icon-folder-opened',
+ revisionRule: 'el-icon-s-check',
+ lifeCycle: 'el-icon-refresh-right',
+ view: 'el-icon-view',
+ desc: 'el-icon-chat-line-square',
+ referType: 'el-icon-search'
+ },
+ ref: {
+ // 浠庤〃涓�夋嫨dialog鐘舵��
+ visible: false,
+ form: {},
+ option: {
+ height: "550px",
+ selection: true,
+ headerAlign: 'center',
+ border: true,
+ index: true,
+ rowKey: 'id',
+ tabs: true,
+ addBtn: false,
+ menu: false,
+ highlightCurrentRow: true,
+ column: [
+ {
+ label: '琛ㄥ悕',
+ prop: 'tableName',
+ align: 'center',
+ display: false
+ },
+ {
+ label: '鎻忚堪',
+ prop: 'description',
+ align: 'center',
+ display: false
+ }
+ ]
+ },
+ data: [],
+ }
}
- }
+ },
+ computed: {
+ ...mapGetters(["permission"]),
+ permissionList() {
+ return {
+ addBtn: this.vaildData(this.permission.modeling_Business.Business_add, false),
+ table: this.vaildData(this.permission.modeling_Business.Business_table, false),
+ editBtn: this.vaildData(this.permission.modeling_Business.Business_edit, false),
+ }
+ }
+ },
+ created() {
+ this.initTreeOnLoad();
+ this.initDomainOption();
+ },
+ methods: {
+ nodeClick(data, node, leaf) {
+ if (data.oid) {
+ getDetail(data.oid).then(res => {
+ this.obj = res.data.data;
+ })
+ } else {
+ this.$message.warning('璇风偣鍑诲瓙鑺傜偣');
+ }
+ },
+ // 鍩烘湰淇℃伅娣诲姞
+ basicSave(row, done, loading) {
+ add(Object.assign({
+ createUser: this.userInfo.name
+ }, row)).then(() => {
+ this.$message.success('鏂板鎴愬姛')
+ done();
+ this.getList();
+ }).catch(() => {
+ loading()
+ })
+ },
+ //灞炴�ф坊鍔�
+ loadSave(row, done, loading) {
+ add(Object.assign({
+ createUser: this.userInfo.name
+ }, row)).then(() => {
+ this.$message.success('鏂板鎴愬姛')
+ done();
+ this.getList();
+ }).catch(() => {
+ loading()
+ })
+ },
+ selectFromTable() {
+ this.ref.visible = true;
+ },
+ refOnLoad(domain) {
+ refOnLoad(domain).then(res => {
+ this.ref.data = res.data.data;
+ })
+ },
+ initTreeOnLoad() {
+ initTree().then(res => {
+ this.treeData = res.data.data;
+ });
+ },
+ initDomainOption() {
+ getDomain().then(res => {
+ this.domainOptions = res.data.data;
+ })
+ },
+ selectionChange(list) {
+ this.selectionList = list;
+ },
+ dialoghandelfalse() {
+ this.ref.visible = false;
+ this.$refs.businessCrud.toggleSelection()
+ this.selectionList = [];
+ this.domain = null;
+ },
+ dialoghandeltrue() {
+ if (this.selectionList.length < 1) {
+ this.$message.warning('璇烽�夋嫨鏁版嵁');
+ return false;
+ }
+ saveFromTable(this.selectionList, this.domain).then(res => {
+ this.$message.success('淇濆瓨鎴愬姛');
+ this.dialoghandelfalse();
+ this.initTreeOnLoad();
+ })
+ },
+ businessAdd() {
+ this.$refs.btmAdd.showSubmitDialog = true;
+ this.$refs.btmAdd.btmType = {};
+ this.type = 'add';
+ this.ifRefreshBtmAddRefresh();
+ },
+ businessEdit() {
+ if (!this.obj.oid) {
+ this.$message.warning("璇烽�夋嫨涓�鏉″彾瀛愯妭鐐圭殑涓氬姟绫诲瀷");
+ return;
+ }
+ const json = JSON.stringify(this.obj);
+ this.$refs.btmAdd.btmType = JSON.parse(json);
+ this.$refs.btmAdd.showSubmitDialog = true;
+ this.type = 'edit'
+ this.ifRefreshBtmAddRefresh();
+ },
+ ifRefreshBtmAddRefresh() {
+ // this.$refs.btmAdd.refreshAttrTable();
+ }
+ },
}
</script>
-<style scoped>
-.table {
- width: 100%;
- border-collapse: collapse;
+<style lang="scss" scoped>
+
+.businessCrud > .el-card:nth-of-type(2) > .el-card__body > .avue-crud__menu {
+ display: none !important;
}
-.table th,
-.table td {
- padding: 10px;
- border: 1px solid #ccc;
+.attributeCrud > .el-card:nth-of-type(2) > .el-card__body > .avue-crud__menu {
+ display: none !important;
}
-.table th {
- background-color: #f0f0f0;
- font-weight: bold;
+
+.app {
+ overflow-y: auto;
+ height: 84.3vh;
}
+
+//
+//.app::-webkit-scrollbar {
+// height: 15px; // 绾靛悜婊氬姩鏉� 蹇呭啓
+// background: white;
+// border: white;
+// width: 10px;
+//
+//}
+//
+//// 婊氬姩鏉＄殑婊戝潡
+//.app::-webkit-scrollbar-thumb {
+// width: 10px;
+// height: 10px;
+// background-color: #ececec;
+// border-radius: 20px;
+// border: #ececec;
+//}
+
+
</style>
--
Gitblit v1.9.3