From aa869225a5f2054cb0253d8f037863aaec866c6e Mon Sep 17 00:00:00 2001
From: wangting <675591594@qq.com>
Date: 星期五, 27 九月 2024 09:51:36 +0800
Subject: [PATCH] UI定义页面
---
Source/plt-web/plt-web-ui/src/views/modelingMenu/queryTemplate/queryDefine/index.vue | 402 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 399 insertions(+), 3 deletions(-)
diff --git a/Source/plt-web/plt-web-ui/src/views/modelingMenu/queryTemplate/queryDefine/index.vue b/Source/plt-web/plt-web-ui/src/views/modelingMenu/queryTemplate/queryDefine/index.vue
index 00df313..1463262 100644
--- a/Source/plt-web/plt-web-ui/src/views/modelingMenu/queryTemplate/queryDefine/index.vue
+++ b/Source/plt-web/plt-web-ui/src/views/modelingMenu/queryTemplate/queryDefine/index.vue
@@ -1,13 +1,409 @@
<template>
- <p>鏌ヨ妯℃澘瀹氫箟</p>
+ <el-container>
+ <el-aside>
+ <basic-container>
+ <div ref="TreeBox" style="height: calc(100vh - 154px);!important;">
+ <div class="headerCon">
+ <avue-radio v-model="radioForm" :dic="radioDic" style="margin: 10px 0 5px"></avue-radio>
+ </div>
+ <!-- 宸︿晶鏍� -->
+ <div style="height: calc(100vh - 230px);">
+ <avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick">
+ <span slot-scope="{ node, data }" class="el-tree-node__label">
+ <span style="font-size: 15px">
+ <i class="el-icon-s-promotion"></i>
+ {{ (node || {}).label }}
+ </span>
+ </span>
+ </avue-tree>
+ </div>
+ </div>
+ </basic-container>
+ </el-aside>
+
+ <el-main>
+ <basic-container>
+ 妯℃澘鍒楄〃锛�<avue-select v-model="templateForm" placeholder="璇烽�夋嫨妯℃澘" type="tree" :dic="templateData" @change="changeTemp"></avue-select>
+ <h3>鏌ヨ灞炴��</h3>
+ <avue-crud ref="queryCrud"
+ :data="attrData" :option="attrOption" :table-loading="tableLoading" style="margin-top: 10px">
+ <template slot="menuLeft" slot-scope="scope">
+ <el-button icon="el-icon-plus" size="small" type="primary" @click="addHandler">鍒涘缓</el-button>
+ <el-button icon="el-icon-edit" plain size="small" type="primary" @click="editHandler">淇敼</el-button>
+ <el-button icon="el-icon-delete" plain size="small" type="danger" @click="delHandler">鍒犻櫎</el-button>
+ </template>
+ </avue-crud>
+ </basic-container>
+ </el-main>
+
+ <!-- 鏂板 && 缂栬緫 -->
+ <el-dialog
+ v-dialogDrag
+ :title="title === 'add' ? '鍒涘缓' : '淇敼'"
+ :visible.sync="visible"
+ append-to-body="true"
+ class="avue-dialog"
+ width="75%"
+ @close="addDialogClose">
+ <el-form ref="form" :model="form" :rules="rules" label-width="95px">
+ <el-form-item label="妯℃澘鍚嶇О锛�" prop="name">
+ <el-input v-model="form.name"></el-input>
+ </el-form-item>
+ </el-form>
+ <avue-crud
+ ref="dialogCrud"
+ :data="attrData"
+ :option="dialogAttrOption"
+ @select="selectHandler">
+ </avue-crud>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="addDialogClose">鍙� 娑�</el-button>
+ <el-button type="primary" @click="addDialogSavaHandler">纭� 瀹�</el-button>
+ </span>
+ </el-dialog>
+ </el-container>
</template>
<script>
+import {getBizTypes, getAllAttributesByBtmId} from "@/api/modeling/businessType/api";
+import {gridLink,getAllAttributeByLink} from "@/api/modeling/linkType/api";
+import {gridTemplate,saveTemplate,updateTemplate,deleteTemplate} from "@/api/queryTemplate/queryDefine";
+import basicOption from "@/util/basic-option";
+import func from "@/util/func";
+
export default {
-name: "index"
+ name: "index",
+ data() {
+ return{
+ treeOption: {
+ height: 'auto',
+ defaultExpandAll: false,
+ menu: false,
+ addBtn: false,
+ props: {
+ label: 'label',
+ value: 'oid',
+ children: 'children'
+ }
+ },
+ nodeRow:{},
+ treeData: [],
+ radioForm:0,
+ radioDic:[{
+ label:'涓氬姟绫诲瀷',
+ value:0
+ },{
+ label:'閾炬帴绫诲瀷',
+ value:1
+ }],
+ templateForm:'',
+ templateData:[],
+ form :{
+ abNames:[],
+ linkTypeName: "",//宸︿晶閫夌殑閾炬帴绫诲瀷鍚嶇О
+ btmName:'',//宸︿晶閫夋嫨鐨勪笟鍔＄被鍨嬪悕绉�
+ name:''
+ },
+ rules: {
+ name: [
+ {required: true, message: '璇疯緭鍏ユā鏉垮悕绉�', trigger: 'blur'}
+ ]
+ },
+ attrData: [],
+ title: '',
+ visible: false,
+ tableLoading: false,
+ attrOption: {
+ ...basicOption,
+ addBtn: false,
+ editBtn: false,
+ delBtn: false,
+ selection: true,
+ selectable:function (){
+ return false;
+ },
+ menu:false,
+ height: "auto",
+ calcHeight: -40,
+ tip:false,
+ column: [{
+ label: '瀛楁缂栫爜',
+ prop: 'id'
+ },
+ {
+ label: '瀛楁鍚嶇О',
+ prop: 'name'
+ }]
+ },
+ selectionRow:[],
+ dialogAttrOption: {
+ ...basicOption,
+ addBtn: false,
+ editBtn: false,
+ delBtn: false,
+ selection: true,
+ menu:false,
+ height: "auto",
+ calcHeight: 140,
+ title:'鏌ヨ灞炴��',
+ tip:false,
+ header:false,
+ column: [{
+ label: '瀛楁缂栫爜',
+ prop: 'id'
+ },
+ {
+ label: '瀛楁鍚嶇О',
+ prop: 'name'
+ }]
+ },
+ dialogSelectionRow:[]
+ }
+ },
+ created() {
+ this.getTreeList();
+ },
+ watch: {
+ radioForm: {
+ handler(newval) {
+ const loading = this.$loading({});
+ if (newval ==0) {
+ getBizTypes().then(res => {
+ const data = res.data.data.map(item => {
+ this.processChildren(item); // 澶勭悊姣忎釜鑺傜偣
+ item.attributes.label = item.attributes.id;
+ return item.attributes;
+ });
+ this.treeData = data;
+ loading.close();
+ })
+ }else {
+ gridLink().then(res => {
+ const data = res.data.data.map(item => {
+ item.label=item.name;
+ return item;
+ });
+ this.treeData = data;
+ loading.close();
+ })
+ }
+ }
+ },
+ },
+ methods: {
+ //鏍戣〃鏌ヨ
+ getTreeList() {
+ const loading = this.$loading({});
+ getBizTypes().then(res => {
+ const data = res.data.data.map(item => {
+ this.processChildren(item); // 澶勭悊姣忎釜鑺傜偣
+ item.attributes.label = item.attributes.id;
+ return item.attributes;
+ });
+ this.treeData = data;
+ loading.close();
+ }).catch(error=>{
+ loading.close();
+ })
+ },
+ // 澶勭悊涓氬姟绫诲瀷鏍戝舰缁撴瀯
+ processChildren(item) {
+ if (item.children && item.children.length > 0) {
+ item.attributes.children = item.children.map(child => {
+ child.attributes.label = child.attributes.id;
+ this.processChildren(child); // 閫掑綊澶勭悊姣忎釜瀛愯妭鐐�
+ return child.attributes; // 鍙繑鍥炲瓙鑺傜偣鐨� attributes
+ });
+ }
+ },
+ // 鏍戠偣鍑�
+ nodeClick(row) {
+ this.nodeRow = row;
+ this.tableLoading = true;
+ if(this.radioForm==1){
+ //閾炬帴绫诲瀷
+ getAllAttributeByLink({name:row.label,linkFlag:true}).then(res => {
+ this.attrData = res.data.data;
+ this.getTemp();
+ })
+ }else {
+ //涓氬姟绫诲瀷
+ getAllAttributesByBtmId({btmId:row.label,linkFlag:false}).then(res => {
+ this.attrData = res.data.data;
+ this.getTemp();
+ })
+ }
+ },
+ getTemp() {
+ gridTemplate({btmName: this.nodeRow.label, linkFlag: this.radioForm == 1}).then(res => {
+ const data = res.data.data.map(item => {
+ item.label = item.name;
+ item.value = item.name;
+ return item;
+ });
+ this.templateData = data;
+ if (res.data.data.length > 0) {
+ this.templateForm = this.templateData[0].value;
+ } else {
+ this.templateForm = '';
+ this.$refs.queryCrud.clearSelection();
+ }
+ this.tableLoading = false;
+ })
+ },
+ selectHandler(selection, row){
+ this.dialogSelectionRow=selection
+ },
+ changeTemp(data) {
+ this.$refs.queryCrud.clearSelection();
+ if (data.value != '') {
+ let abNames = data.item.abNames.join(',').toLowerCase().split(',')
+ this.selectionRow = this.attrData.filter(item => {
+ return abNames.includes(item.id.toLowerCase())
+ })
+ this.$refs.queryCrud.toggleSelection(this.selectionRow);
+ }
+ },
+ //鍒涘缓
+ addHandler(){
+ if (func.isEmptyObject(this.nodeRow)) {
+ this.$message.error('璇烽�夋嫨瑕佹坊鍔犵殑鑺傜偣');
+ return;
+ }
+ this.title = 'add';
+ this.visible = true;
+ this.$nextTick(()=>{
+ this.$refs.dialogCrud.clearSelection();
+ });
+ },
+ //淇敼
+ editHandler(){
+ if (func.isEmptyObject(this.nodeRow)) {
+ this.$message.error('璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹�');
+ return;
+ }
+ this.form.name = this.templateForm;
+ this.title = 'edit';
+ this.visible = true;
+ this.$nextTick(()=>{
+ this.dialogSelectionRow=this.selectionRow;
+ this.$refs.dialogCrud.clearSelection();
+ this.$refs.dialogCrud.toggleSelection(this.dialogSelectionRow );
+ });
+ },
+ // 鏂板缂栬緫淇濆瓨
+ addDialogSavaHandler() {
+ this.$refs.form.validate((valid) => {
+ const saveFunction = this.title === 'add' ? saveTemplate : updateTemplate;
+ if (valid) {
+ if(this.radioForm == 0){
+ this.form.btmName=this.nodeRow.label;
+ delete this.form.linkTypeName
+ }else {
+ this.form.linkTypeName=this.nodeRow.label;
+ delete this.form.btmName
+ }
+ let abNames=this.dialogSelectionRow.map(item => {
+ return item.id
+ })
+ if(abNames.length==0){
+ this.$message.error('璇烽�夋嫨鏌ヨ灞炴��');
+ return false;
+ }
+ this.form.abNames=abNames;
+ saveFunction(this.form).then(res => {
+ if (res.data.code === 200) {
+ this.$message.success(res.data.obj);
+ if(this.title === 'edit'){
+ this.templateForm='';
+ }
+ this.getTemp();
+ this.addDialogClose();
+ }
+ })
+ } else {
+ return false;
+ }
+ });
+ },
+ // 鏂板缂栬緫瀵硅瘽妗嗗彇娑�
+ addDialogClose() {
+ this.form = {
+ abNames:[],
+ linkTypeName: "",//宸︿晶閫夌殑閾炬帴绫诲瀷鍚嶇О
+ btmName:'',//宸︿晶閫夋嫨鐨勪笟鍔＄被鍨嬪悕绉�
+ name:''
+ };
+ this.$refs.form.clearValidate();
+ this.visible = false;
+ },
+ //鍒犻櫎
+ delHandler(){
+ if (func.isEmptyObject(this.nodeRow)) {
+ this.$message.error('璇烽�夋嫨鏁版嵁');
+ return;
+ }
+ this.$confirm('鎮ㄧ‘瀹氳鍒犻櫎鎵�閫夋嫨鐨勬暟鎹悧锛�', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ deleteTemplate({name:this.templateForm}).then(res => {
+ if (res.data.code === 200) {
+ this.$message.success(res.data.obj);
+ this.getTemp();
+ }
+ })
+ }).catch(() => {
+ this.$message({
+ type: 'info',
+ message: '宸插彇娑堝垹闄�'
+ });
+ });
+ }
+ }
}
</script>
-<style scoped>
+<style lang="scss" scoped>
+::v-deep {
+ .el-scrollbar__wrap {
+ overflow: auto !important;
+ }
+ .headerCon{
+ .el-button{
+ width: 82px;
+ }
+ }
+}
+
+.headerCon {
+ display: flex;
+ flex-wrap: wrap;
+ margin-bottom: 5px;
+
+ .el-button + .el-button {
+ margin-left: 5px;
+ }
+
+ .el-button {
+ margin-top: 5px;
+ }
+}
+
+.headerCon > .el-button:nth-child(4) {
+ margin-left: 0;
+}
+
+.headerCon > .el-button:nth-child(7) {
+ margin-left: 0;
+}
+
+
+.smallBtn {
+ width: 82px;
+ text-align: center;
+ padding-left: 4.5px;
+}
</style>
--
Gitblit v1.9.3