|
@@ -0,0 +1,554 @@
|
|
|
|
+<template>
|
|
|
|
+ <el-dialog
|
|
|
|
+ class="dialog-set"
|
|
|
|
+ :visible.sync="visible"
|
|
|
|
+ width="70%"
|
|
|
|
+ append-to-body
|
|
|
|
+ >
|
|
|
|
+ <div slot="title" class="dialog-title">
|
|
|
|
+ <div>
|
|
|
|
+ <i class="el-icon-connection" ></i>
|
|
|
|
+ <span style="margin-left: 10px;">关联元素</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="marginTop-10">设置获取数据的元素位置,用于回显数据到相应位置</div>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ <div class="conditions-container">
|
|
|
|
+ <!-- 左侧条件列表 -->
|
|
|
|
+ <div class="conditions-left">
|
|
|
|
+ <div class="condition-header">
|
|
|
|
+ <i class="el-icon-s-operation" style="color: rgb(46, 123, 115);"></i>
|
|
|
|
+ <span>参数列表</span>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ <div class="condition-list">
|
|
|
|
+ <div class="condition-item">
|
|
|
|
+ <span
|
|
|
|
+ v-for="(item, index) in paramList"
|
|
|
|
+ :key="index"
|
|
|
|
+ :class="{ active: activeIndex === index }"
|
|
|
|
+ @click="handleSelect(index, item)"
|
|
|
|
+
|
|
|
|
+ >
|
|
|
|
+ {{ item.paramName }}
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- 右侧操作列表 -->
|
|
|
|
+ <div class="conditions-right">
|
|
|
|
+ <div class="condition-header1">
|
|
|
|
+ <div class="header-left">
|
|
|
|
+ <i class="el-icon-s-operation" style="color: rgb(46, 123, 115);"></i>
|
|
|
|
+ <span>条件列表</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="header-right">
|
|
|
|
+ <el-button
|
|
|
|
+ type="primary"
|
|
|
|
+ size="small"
|
|
|
|
+ :style="{ background: 'rgb(37, 80, 162)', borderColor: 'rgb(37, 80, 162)' }"
|
|
|
|
+ @click="addCondition"
|
|
|
|
+ >
|
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
|
+ 添加元素
|
|
|
|
+ </el-button>
|
|
|
|
+ <el-button
|
|
|
|
+ type="success"
|
|
|
|
+ size="small"
|
|
|
|
+ @click="saveEle"
|
|
|
|
+ >
|
|
|
|
+ <i class="el-icon-check"></i>
|
|
|
|
+ 保存元素
|
|
|
|
+ </el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="condition-list">
|
|
|
|
+ <div class="condition-item1">
|
|
|
|
+ <div
|
|
|
|
+ v-for="(item, index) in paramList[activeIndex].codeList"
|
|
|
|
+ :key="index"
|
|
|
|
+
|
|
|
|
+ >
|
|
|
|
+ <div>
|
|
|
|
+ <span>
|
|
|
|
+ <div class="condition-header-content">
|
|
|
|
+ <div style="color: black;">
|
|
|
|
+ {{item.codeName}}
|
|
|
|
+ </div>
|
|
|
|
+ <i class="el-icon-close" @click.stop="handleDeleteItem(item,index)"></i>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="code-list">
|
|
|
|
+ <div v-for="(item1,index) in item.codeValue" :key="index" class="code-item">
|
|
|
|
+ {{ item1.name }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
|
+
|
|
|
|
+ <el-button type="primary" @click="handleConfirm" :style="{ background: 'rgb(37, 80, 162)', borderColor: 'rgb(37, 80, 162)' }">保存</el-button>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <el-dialog
|
|
|
|
+ class="dialog-set"
|
|
|
|
+ :visible.sync="addDialogVisible"
|
|
|
|
+ width="80%"
|
|
|
|
+ append-to-body
|
|
|
|
+ close-on-click-modal="false"
|
|
|
|
+ >
|
|
|
|
+ <div slot="title" class="dialog-title">
|
|
|
|
+ <div>
|
|
|
|
+ <i class="el-icon-plus" ></i>
|
|
|
|
+ <span style="margin-left: 10px;">添加元素</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="marginTop-10">根据表单选择回显的元素位置。根据条件判定后,自动将满足条件的数据回显到选择的元素位置</div>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ <div class="condition-header1-title">
|
|
|
|
+ <span>选择表单</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="condition-header1-table">
|
|
|
|
+ <el-table
|
|
|
|
+ :data="tableData"
|
|
|
|
+ height="250"
|
|
|
|
+ border
|
|
|
|
+ style="width: 100%">
|
|
|
|
+ <el-table-column
|
|
|
|
+ prop="tableName"
|
|
|
|
+ label="表单名称"
|
|
|
|
+ >
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column
|
|
|
|
+ align="center"
|
|
|
|
+ prop="tableType"
|
|
|
|
+ :formatter="formatTableType"
|
|
|
|
+ width="100"
|
|
|
|
+ label="表单类型"
|
|
|
|
+ ></el-table-column>
|
|
|
|
+ <el-table-column
|
|
|
|
+ width="150"
|
|
|
|
+ label="操作"
|
|
|
|
+ >
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <el-button
|
|
|
|
+ v-if="!scope.row.isSelected"
|
|
|
|
+ type="text"
|
|
|
|
+ size="small"
|
|
|
|
+ @click="handleRowSelect(scope.row)"
|
|
|
|
+ >
|
|
|
|
+ 选择
|
|
|
|
+ </el-button>
|
|
|
|
+ <el-button
|
|
|
|
+ v-else
|
|
|
|
+ type="text"
|
|
|
|
+ size="small"
|
|
|
|
+ style="color: #F56C6C;"
|
|
|
|
+ @click="handleCancelSelect(scope.row)"
|
|
|
|
+ >
|
|
|
|
+ 取消选择
|
|
|
|
+ </el-button>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="condition-header1-title" style="margin-top: 10px;">
|
|
|
|
+ <span>选择元素</span>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="condition-header1-html-box">
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <el-button type="primary" @click="confirmAdd" :style="{ background: 'rgb(37, 80, 162)', borderColor: 'rgb(37, 80, 162)' }">确认添加</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </el-dialog>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { getDictionary } from "@/api/system/dict";
|
|
|
|
+import { selectByNodeTable as findNodeTableByCondition1 } from "@/api/manager/wbstree";
|
|
|
|
+export default {
|
|
|
|
+ name: 'ConditionsSet',
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ visible: true,
|
|
|
|
+ treeId: '', // 树节点ID
|
|
|
|
+ paramList: [
|
|
|
|
+ {
|
|
|
|
+ paramName: '<0.75',
|
|
|
|
+ codeList:[
|
|
|
|
+ {codeName: 'C3A', codeValue: [
|
|
|
|
+ {name:'矿渣硅酸盐水泥',value:'1'}
|
|
|
|
+ ]},
|
|
|
|
+ {codeName: 'C3S', codeValue: []},
|
|
|
|
+ ]
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ ] , // 参数列表数据
|
|
|
|
+ activeIndex: 0, // 当前选中的参数索引
|
|
|
|
+
|
|
|
|
+ addDialogVisible: false,
|
|
|
|
+ tableData: [
|
|
|
|
+ { date: '2016-05-02', name: '王小明', address: '上海市普陀区金沙江路 1518 弄' },
|
|
|
|
+ { date: '2016-05-04', name: '张三', address: '北京市朝阳区建国路 88 号' },
|
|
|
|
+ { date: '2016-05-01', name: '李四', address: '广州市天河区体育西路 100 号' },
|
|
|
|
+ { date: '2016-05-03', name: '赵六', address: '深圳市南山区科技园北路 200 号' }
|
|
|
|
+ ],
|
|
|
|
+ tableTypelist: [],
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ show(val,treeId) {
|
|
|
|
+ this.getTableTypelist();
|
|
|
|
+ this.visible = true
|
|
|
|
+ if(val.length > 0&&val[0].name) {
|
|
|
|
+ console.log(val,'val');
|
|
|
|
+ this.paramList = val.map(item => {
|
|
|
|
+ return {
|
|
|
|
+ paramName: item.select + item.name,
|
|
|
|
+ codeList: []
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ this.treeId = treeId
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }else{
|
|
|
|
+ this.paramList = []
|
|
|
|
+ this.treeId = ''
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ getTableTypelist() {
|
|
|
|
+ getDictionary({
|
|
|
|
+ code:'trial_table_type',
|
|
|
|
+ }).then((res) => {
|
|
|
|
+ res.data.data.forEach((element) => {
|
|
|
|
+ element.dictKey = Number(element.dictKey);
|
|
|
|
+ });
|
|
|
|
+ this.tableTypelist = res.data.data;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ async getTableData(){
|
|
|
|
+ const { data: res } = await findNodeTableByCondition1( this.treeId);
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
+ console.log(Array.isArray(res.data));
|
|
|
|
+ if (Array.isArray(res.data)) {
|
|
|
|
+ this.tableData = res.data
|
|
|
|
+
|
|
|
|
+ } else {
|
|
|
|
+ this.tableData = []
|
|
|
|
+ this.$message.error('获取表单数据失败,请先关联清表');
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ hide() {
|
|
|
|
+ this.visible = false
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ handleConfirm() {
|
|
|
|
+ this.hide()
|
|
|
|
+ this.$emit('confirm')
|
|
|
|
+ },
|
|
|
|
+ addCondition() {
|
|
|
|
+ // 添加条件逻辑
|
|
|
|
+ this.addDialogVisible = true
|
|
|
|
+ this.getTableData();
|
|
|
|
+ },
|
|
|
|
+ handleSelect(index) {
|
|
|
|
+ this.activeIndex = index
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ handleDeleteItem(item, index) {
|
|
|
|
+ this.paramList[this.activeIndex].codeList.splice(index, 1)
|
|
|
|
+ this.$message.success('删除成功')
|
|
|
|
+ },
|
|
|
|
+ confirmAdd() {
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ //保存条件
|
|
|
|
+ saveEle(){
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ formatTableType(row, column, cellValue) {
|
|
|
|
+ for (let i = 0; i < this.tableTypelist.length; i++) {
|
|
|
|
+ if (this.tableTypelist[i].dictKey == cellValue) {
|
|
|
|
+ return this.tableTypelist[i].dictValue;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return cellValue;
|
|
|
|
+ //console.log(cellValue)
|
|
|
|
+ },
|
|
|
|
+ handleRowSelect(row) {
|
|
|
|
+ // 设置选中状态
|
|
|
|
+ // 先取消其他行的选中状态
|
|
|
|
+ this.tableData.forEach(item => {
|
|
|
|
+ if(item !== row) {
|
|
|
|
+ this.$set(item, 'isSelected', false)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ // 设置当前行选中状态
|
|
|
|
+ this.$set(row, 'isSelected', true)
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ handleCancelSelect(row) {
|
|
|
|
+ // 取消选中状态
|
|
|
|
+ this.$set(row, 'isSelected', false)
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.conditions-container {
|
|
|
|
+ display: flex;
|
|
|
|
+ gap: 20px;
|
|
|
|
+// height: 200px;
|
|
|
|
+.green-txt{
|
|
|
|
+ color: rgb(46, 123, 115);;
|
|
|
|
+}
|
|
|
|
+ .conditions-left,
|
|
|
|
+ .conditions-right {
|
|
|
|
+ flex: 1;
|
|
|
|
+ border: 1px solid #EBEEF5;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ background: #f5f7fa;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .condition-header {
|
|
|
|
+ display: flex;
|
|
|
|
+ // justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ padding: 10px;
|
|
|
|
+ border-bottom: 1px solid #EBEEF5;
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ span {
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ margin-left: 10px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .condition-list,
|
|
|
|
+ .condition-content {
|
|
|
|
+ padding: 10px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .condition-item {
|
|
|
|
+ span {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ padding: 8px 8px;
|
|
|
|
+ margin: 5px;
|
|
|
|
+ background: white;
|
|
|
|
+ color: #409EFF;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ cursor: pointer; // 添加指针样式
|
|
|
|
+ transition: all 0.3s; // 添加过渡效果
|
|
|
|
+ &.active { // 选中状态
|
|
|
|
+ background: #67C23A;;
|
|
|
|
+ color: white;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .content-item {
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ padding: 10px;
|
|
|
|
+ border: 1px solid #EBEEF5;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+
|
|
|
|
+ .item-title {
|
|
|
|
+ display: flex;
|
|
|
|
+ gap: 10px;
|
|
|
|
+ align-items: center;
|
|
|
|
+
|
|
|
|
+ span {
|
|
|
|
+ &:first-child {
|
|
|
|
+ color: #666;
|
|
|
|
+ }
|
|
|
|
+ &:nth-child(2) {
|
|
|
|
+ color: #409EFF;
|
|
|
|
+ }
|
|
|
|
+ &:last-child {
|
|
|
|
+ color: #666;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.dialog-title {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ color:white ;
|
|
|
|
+ padding: 10px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+
|
|
|
|
+ .marginTop-20{
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+ }
|
|
|
|
+ background: rgb(37, 80, 162);
|
|
|
|
+ .el-dialog__header{
|
|
|
|
+ padding: 0px;
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.condition-header1 {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between; // 两端对齐
|
|
|
|
+ align-items: center;
|
|
|
|
+ padding: 10px;
|
|
|
|
+ border-bottom: 1px solid #EBEEF5;
|
|
|
|
+
|
|
|
|
+ .header-left {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+
|
|
|
|
+ span {
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ margin-left: 10px;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .header-right {
|
|
|
|
+ display: flex;
|
|
|
|
+ gap: 10px; // 按钮间距
|
|
|
|
+
|
|
|
|
+ .el-button {
|
|
|
|
+ padding: 7px 15px;
|
|
|
|
+
|
|
|
|
+ &:hover {
|
|
|
|
+ opacity: 0.8;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.code-list{
|
|
|
|
+ display: flex;
|
|
|
|
+ .code-item{
|
|
|
|
+ margin-right: 5px;
|
|
|
|
+ margin-top: 5px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+ .condition-item1 {
|
|
|
|
+ display: flex;
|
|
|
|
+ span {
|
|
|
|
+ margin-left: 5px;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ padding: 8px 8px;
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ background: rgb(213, 222, 255);;
|
|
|
|
+ color: #409EFF;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ cursor: pointer; // 添加指针样式
|
|
|
|
+ transition: all 0.3s; // 添加过渡效果
|
|
|
|
+ height: 40px;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+.condition-header-content {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ width: 100%;
|
|
|
|
+
|
|
|
|
+ .delete-icon {
|
|
|
|
+ color: #F56C6C;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+
|
|
|
|
+ &:hover {
|
|
|
|
+ opacity: 0.8;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.condition-header1-title{
|
|
|
|
+ width: 99%;
|
|
|
|
+ background: rgb(238, 238, 238);
|
|
|
|
+ color: rgba(130, 130, 130, 1);
|
|
|
|
+ padding: 10px;
|
|
|
|
+ border-radius: 10px;
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+}
|
|
|
|
+.condition-header1-html-box{
|
|
|
|
+ height: 600px;
|
|
|
|
+ border: 1px solid red;
|
|
|
|
+}
|
|
|
|
+</style>
|
|
|
|
+<style lang="scss">
|
|
|
|
+.dialog-set {
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ .el-dialog__header{
|
|
|
|
+ padding: 0px;
|
|
|
|
+ background: rgb(37, 80, 162);
|
|
|
|
+ font-family: 16px;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ .dialog-footer{
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+ .el-dialog {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ margin: 0 !important;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 50%;
|
|
|
|
+ left: 50%;
|
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
|
+ max-height: 90vh; // 设置最大高度
|
|
|
|
+
|
|
|
|
+ // 设置弹窗主体内容滚动
|
|
|
|
+ .el-dialog__body {
|
|
|
|
+ flex: 1;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ padding: 20px;
|
|
|
|
+
|
|
|
|
+ // 美化滚动条样式
|
|
|
|
+ &::-webkit-scrollbar {
|
|
|
|
+ width: 6px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
|
+ background: #c1c1c1;
|
|
|
|
+ border-radius: 3px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
|
+ background: #f1f1f1;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 保持头部和底部固定
|
|
|
|
+ .el-dialog__header,
|
|
|
|
+ .el-dialog__footer {
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+// 添加内容容器的样式
|
|
|
|
+.dialog-content {
|
|
|
|
+ min-height: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+}
|
|
|
|
+</style>
|