This commit is contained in:
仲么了
2024-01-16 10:34:34 +08:00
parent 14c55a4e51
commit d50adb9d30
3 changed files with 140 additions and 110 deletions

7
pnpm-lock.yaml generated
View File

@@ -28,6 +28,9 @@ dependencies:
html2canvas: html2canvas:
specifier: ^1.4.1 specifier: ^1.4.1
version: 1.4.1 version: 1.4.1
jquery:
specifier: ^3.7.1
version: 3.7.1
lodash-es: lodash-es:
specifier: ^4.17.21 specifier: ^4.17.21
version: 4.17.21 version: 4.17.21
@@ -1480,6 +1483,10 @@ packages:
resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==} resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
dev: false dev: false
/jquery@3.7.1:
resolution: {integrity: sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==}
dev: false
/js-tokens@4.0.0: /js-tokens@4.0.0:
resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
dev: true dev: true

View File

@@ -1,31 +1,31 @@
<template> <template>
<el-dialog class='cn-operate-dialog' v-model='dialogVisible' :title='title'> <el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
<el-scrollbar> <el-scrollbar>
<el-form :inline='false' :model='form' label-width='120px'> <el-form :inline="false" :model="form" label-width="120px">
<el-form-item label='名称'> <el-form-item label="名称">
<el-input v-model='form.name' placeholder='请输入名称' /> <el-input v-model="form.name" placeholder="请输入名称" />
</el-form-item> </el-form-item>
<el-form-item label='编码'> <el-form-item label="编码">
<el-input v-model='form.code' placeholder='请输入编码' /> <el-input v-model="form.code" placeholder="请输入编码" />
</el-form-item> </el-form-item>
<el-form-item label='备注'> <el-form-item label="备注">
<el-input v-model='form.remark' placeholder='请输入备注' /> <el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item> </el-form-item>
<el-form-item label='排序'> <el-form-item label="排序">
<el-input-number v-model='form.sort' :min='0' /> <el-input-number v-model="form.sort" :min="0" />
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-scrollbar> </el-scrollbar>
<template #footer> <template #footer>
<span class='dialog-footer'> <span class="dialog-footer">
<el-button @click='dialogVisible = false'>取消</el-button> <el-button @click="dialogVisible = false">取消</el-button>
<el-button type='primary' @click='submit'>确认</el-button> <el-button type="primary" @click="submit">确认</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script lang='ts' setup> <script lang="ts" setup>
import { ref, inject } from 'vue' import { ref, inject } from 'vue'
import { reactive } from 'vue' import { reactive } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'

View File

@@ -1,65 +1,70 @@
<template> <template>
<el-dialog class='cn-operate-dialog statistical-type-binding' v-model='dialogVisible' title='绑定指标'> <el-dialog class="cn-operate-dialog statistical-type-binding" v-model="dialogVisible" title="绑定指标">
<el-scrollbar style='padding-right: 0'> <el-scrollbar style="padding-right: 0">
<div class='box'> <div class="box">
<div class='box-left'> <div class="box-left">
<el-cascader-panel <el-cascader-panel
v-model='fromDataValue' v-model="fromDataValue"
:props='{ :props="{
multiple: true multiple: true
}' }"
:options='fromData' :options="fromData"
></el-cascader-panel> ></el-cascader-panel>
</div> </div>
<div class='box-center'> <div class="box-center">
<el-button type='primary' icon='el-icon-Plus' @click='newGroup'>新建分组</el-button> <el-button type="primary" icon="el-icon-Plus" @click="newGroup">新建分组</el-button>
<el-popover v-model='popoverVisible' placement='right' width='400' trigger='click' <el-popover
popper-style='width:auto'> v-model="popoverVisible"
<div class='statistical-type-binding-button-group'> placement="right"
width="400"
trigger="click"
popper-style="width:auto"
>
<div class="statistical-type-binding-button-group">
<el-button <el-button
type='primary' type="primary"
style='margin-left: 0' style="margin-left: 0"
v-for='item in toData' v-for="item in toData"
@click='leftCheckChange(item)' @click="leftCheckChange(item)"
> >
{{ item.label }} {{ item.label }}
</el-button> </el-button>
</div> </div>
<div v-if='toData.length === 0'>请先创建分组</div> <div v-if="toData.length === 0">请先创建分组</div>
<template #reference> <template #reference>
<el-button style='margin-left: 0' class='mt20' type='primary' icon='el-icon-ArrowRight'> <el-button style="margin-left: 0" class="mt20" type="primary" icon="el-icon-ArrowRight">
向右 向右
</el-button> </el-button>
</template> </template>
</el-popover> </el-popover>
<el-button <el-button
style='margin-left: 0' style="margin-left: 0"
icon='el-icon-ArrowLeft' icon="el-icon-ArrowLeft"
class='mt20' class="mt20"
type='primary' type="primary"
@click='rightCheckChange' @click="rightCheckChange"
> >
向左 向左
</el-button> </el-button>
</div> </div>
<div class='box-right'> <div class="box-right">
<el-cascader-panel <el-cascader-panel
v-model='toDataValue' v-model="toDataValue"
:props='{ :props="{
multiple: true multiple: true
}' }"
:options='toData' :options="toData"
> >
<template #default='{ node, data }'> <template #default="{ node, data }">
<div style='display: flex; align-items: center'> <div style="display: flex; align-items: center">
<div class='hide-txt'>{{ data.label }}</div> <div class="hide-txt">{{ data.label }}</div>
<template v-if='!node.isLeaf'> <template v-if="!node.isLeaf">
<div class='ml5'>({{ data.children.length }})</div> <div class="ml5">({{ data.children.length }})</div>
<div style='flex: 1'></div> <div style="flex: 1"></div>
<i <i
class='el-icon-delete ml10' class="el-icon-delete ml10"
style='cursor: pointer' style="cursor: pointer"
@click='deleteStatistical(data)' @click="deleteStatistical(data)"
></i> ></i>
</template> </template>
</div> </div>
@@ -70,28 +75,83 @@
</el-scrollbar> </el-scrollbar>
<template #footer> <template #footer>
<span class='dialog-footer'> <span class="dialog-footer">
<el-button @click='dialogVisible = false'>取消</el-button> <el-button @click="dialogVisible = false">取消</el-button>
<el-button type='primary' @click='submit'>确认</el-button> <el-button type="primary" @click="submit">确认</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
<PopupAdd ref='addRef' @over='init'></PopupAdd>
</template> </template>
<script lang='ts' setup> <script lang="ts" setup>
import { ref, inject } from 'vue' import { ref, inject } from 'vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { queryStatistical } from '@/api/system-boot/csstatisticalset' import { queryStatistical } from '@/api/system-boot/csstatisticalset'
import PopupAdd from './add.vue'
defineOptions({ defineOptions({
name: 'govern/setting/statisticalType/binding' name: 'govern/setting/statisticalType/binding'
}) })
const addRef = ref()
// 统计类型pid
const pid = ref('')
const dialogVisible = ref(false) const dialogVisible = ref(false)
const popoverVisible = ref(false) const popoverVisible = ref(false)
const fromData = ref<treeData[]>([]) const fromData = ref<treeData[]>([])
const fromDataValue = ref<treeData[]>([]) const fromDataValue = ref<treeData[]>([])
const toData = ref<treeData[]>([]) const toData = ref<treeData[]>([])
const toDataValue = ref<treeData[]>([]) const toDataValue = ref<treeData[]>([])
const init = () => {
queryStatistical(pid.value).then(res => {
fromData.value = []
fromDataValue.value = []
toData.value = []
toDataValue.value = []
res.data.unSelectedList.forEach((item: any) => {
const obj = {
id: item.dataType,
value: item.dataType,
pid: 0,
label: item.dataTypeName,
children: [] as any[]
}
item.eleEpdPqdVOS.forEach((item2: any) => {
const obj2 = {
id: item2.id,
pid: item.dataType,
value: item2.id,
label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
}
if (item2.showName) {
obj.children.push(obj2)
}
})
fromData.value.push(obj)
})
res.data.selectedList.forEach((item: any) => {
const obj = {
id: item.dataType,
value: item.dataType,
pid: 0,
label: item.dataTypeName,
children: [] as any[]
}
item.eleEpdPqdVOS.forEach((item2: any) => {
const obj2 = {
id: item2.id,
pid: item2.dataType,
value: item2.id,
label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
}
if (item2.showName) {
obj.children.push(obj2)
}
})
toData.value.push(obj)
})
})
}
// 左侧源数据选中事件 // 左侧源数据选中事件
const leftCheckChange = (e: any) => { const leftCheckChange = (e: any) => {
if (fromDataValue.value.length === 0) { if (fromDataValue.value.length === 0) {
@@ -186,58 +246,20 @@ const deleteStatistical = (data: any) => {
} }
const newGroup = () => { const newGroup = () => {
addRef.value.open('新增菜单', {
sort: toData.value.length ? toData.value[toData.value.length - 1].sort + 1 : 1,
code: '',
pid: pid.value,
id: '',
remark: '',
name: ''
})
} }
const open = (id: string) => { const open = (id: string) => {
dialogVisible.value = true dialogVisible.value = true
queryStatistical(id).then(res => { pid.value = id
fromData.value = [] init()
fromDataValue.value = []
toData.value = []
toDataValue.value = []
res.data.unSelectedList.forEach((item: any) => {
const obj = {
id: item.dataType,
value: item.dataType,
pid: 0,
label: item.dataTypeName,
children: [] as any[]
}
item.eleEpdPqdVOS.forEach((item2: any) => {
const obj2 = {
id: item2.id,
pid: item.dataType,
value: item2.id,
label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
}
if (item2.showName) {
obj.children.push(obj2)
}
})
fromData.value.push(obj)
})
res.data.selectedList.forEach((item: any) => {
const obj = {
id: item.dataType,
value: item.dataType,
pid: 0,
label: item.dataTypeName,
children: [] as any[]
}
item.eleEpdPqdVOS.forEach((item2: any) => {
const obj2 = {
id: item2.id,
pid: item2.dataType,
value: item2.id,
label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
}
if (item2.showName) {
obj.children.push(obj2)
}
})
toData.value.push(obj)
})
})
} }
const submit = async () => { const submit = async () => {
dialogVisible.value = false dialogVisible.value = false
@@ -245,7 +267,7 @@ const submit = async () => {
defineExpose({ open }) defineExpose({ open })
</script> </script>
<style lang='scss'> <style lang="scss">
.statistical-type-binding-button-group { .statistical-type-binding-button-group {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
@@ -253,7 +275,6 @@ defineExpose({ open })
} }
.statistical-type-binding { .statistical-type-binding {
.box { .box {
display: flex; display: flex;
width: 1000px; width: 1000px;
@@ -275,12 +296,15 @@ defineExpose({ open })
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
flex: 1; flex: 1;
.el-cascader-menu{
.el-cascader-menu {
padding-right: 0; padding-right: 0;
.el-scrollbar__wrap{
.el-scrollbar__wrap {
height: 100%; height: 100%;
} }
} }
.el-cascader-panel { .el-cascader-panel {
height: 100%; height: 100%;
@@ -289,7 +313,6 @@ defineExpose({ open })
} }
} }
} }
} }
} }
</style> </style>