Source/plt-web/plt-web-ui/src/views/modelingMenu/queryTemplate/businessTypeQuery/formDialog.vue

@@ -1,23 +1,23 @@
<template>
  <el-dialog v-dialogDrag
             :append-to-body="true"
             :close-on-click-modal="false"
             :destroy-on-close="true"
             :title="dialog.title"
             :visible.sync="dialog.showDialog"
             width="1620px"
             :append-to-body="true"
             class="avue-dialog"
             :destroy-on-close="true"
             :close-on-click-modal="false"
             width="1620px"
             @close="cancelDialog">
    <div style="min-height: 665px;max-height: 85vh;padding-bottom: 50px;">
      <basic-form key="linkQueryForm" style="margin-bottom: 0"
                  ref="form"
                  :span="4"
                  :formItems="formItems"
      <basic-form key="businessQueryForm" ref="form"
                  :formData="form"
                  :formItems="formItems"
                  :span="4"
                  style="margin-bottom: 0"
                  @getFormData="getFormData">
      </basic-form>
      <avue-crud  ref="crud" title="设置排序"
                  :data="orderInfoList" :option="crudOption">
      <avue-crud ref="crud" :data="orderInfoList"
                 :option="crudOption" title="设置排序">
        <template slot="menuLeft" slot-scope="scope">
          <el-button icon="el-icon-plus" size="small" type="primary" @click="addRow">创建</el-button>
        </template>
@@ -27,17 +27,17 @@
        </template>
      </avue-crud>
      <el-dialog v-dialogDrag
                 title="创建"
                 :visible.sync="crudDialog.showDialog"
                 width="500px"
                 :append-to-body="true"
                 class="avue-dialog"
                 :destroy-on-close="true"
                 :close-on-click-modal="false"
                 :destroy-on-close="true"
                 :visible.sync="crudDialog.showDialog"
                 class="avue-dialog"
                 title="创建"
                 width="500px"
                 @close="crudDialog.showDialog=false">
        <avue-form ref="tableForm" :option="tableFormOption" v-model="tableForm"></avue-form>
        <avue-form ref="tableForm" v-model="tableForm" :option="tableFormOption"></avue-form>
        <div class="dialog-footer avue-dialog__footer">
          <el-button type="primary" plain size="small" @click="rowSave" >保 存</el-button>
          <el-button plain size="small" type="primary" @click="rowSave">保 存</el-button>
        </div>
      </el-dialog>
      <el-container style="margin-top: 10px;">
@@ -46,42 +46,66 @@
            <legend>&nbsp;候选条件&nbsp;</legend>
            <div>
              查询模板定义
              <avue-select @change="businessQueryDefineChange" class="el-input--small" v-model="businessQueryDefineForm" placeholder="请选择内容" type="tree" :dic="businessQueryDefineDic" style="width: 240px;"></avue-select>
              <avue-tree style="height: 265px" :data="businessTreeData" :option="treeOption"  @node-drag-start="handleDragStart" @node-drag-end="handleDragEnd">
              <avue-select v-model="businessQueryDefineForm" :dic="businessQueryDefineDic" class="el-input--small"
                           placeholder="请选择内容" style="width: 245px;" type="tree"
                           @change="businessQueryDefineChange"></avue-select>
              <avue-tree :data="businessTreeData" :option="treeOption" style="width:335px;height: 268px"
                         @node-drag-start="handleDragStart" @node-drag-end="handleDragEnd">
              </avue-tree>
            </div>
          </fieldset>
        </el-aside>
        <el-main>
          <fieldset style="margin: 0 10px">
          <fieldset style="margin: 0 0 0 10px">
            <legend>&nbsp;查询条件&nbsp;</legend>
            <form-query-dialog ref="formQuery"
                               style="height: 300px;"
                               :levelFlag.sync="form.levelFlag"
                               :queryCondition="queryCondition"
                               :queryTree="queryTree"
                               :levelFlag.sync="form.levelFlag"
                               :searchColumn="searchColumn"
                               style="height: 300px;"
                               @queryHandler="queryHandler"
            ></form-query-dialog>
          </fieldset>
        </el-main>
      </el-container>
    </div>
    <div class="dialog-footer avue-dialog__footer">
      <el-button type="primary" plain size="small" @click="submitDialog" >保 存</el-button>
      <el-button size="small" type="primary" @click="submitDialog">保 存</el-button>
      <el-button size="small" @click="cancelDialog">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {linkSave,getBizTypeQTDs} from "@/api/queryTemplate/businessTypeQuery";
import {btmSave, getBizTypeQTDs, getCriteriaBtm} from "@/api/queryTemplate/businessTypeQuery";
import basicOption from "@/util/basic-option";
import {queryTemplateListByAttr} from "@/api/queryTemplate/queryDefine";
import formQueryDialog from "./formQueryDialog.vue";
import formQueryDialog from "@/views/modelingMenu/queryTemplate/linkTypeQuery/formQueryDialog.vue";

export default {
  name: "formDialog",
  components:{formQueryDialog},
  data(){
  components: {formQueryDialog},
  data() {
    return {
      searchColumn: [
        {
          label: 'OID',
          prop: 'OID',
        },
        {
          label: 'REVISIONOID',
          prop: 'REVISIONOID'
        },
        {
          label: 'NAMEOID',
          prop: 'NAMEOID'
        },
        {
          label: 'BTMNAME',
          prop: 'BTMNAME'
        }
      ],
      dialog: {
        showDialog: false,
        title: "创建",
@@ -95,22 +119,22 @@
        submitTxt: "保存",
        submitIcon: "el-icon-check",
      },
      formItems:[{
      formItems: [{
        label: '查询模板名称',
        prop: 'qtName',
        type: 'input',
        span:5,
        span: 5,
        rules: [{
          required: true,
          message: "请输入查询模板名称",
          trigger: "blur"
        }]
      }],
      form:{
        btmName:'',
      form: {
        btmName: '',
        qtName: '',
        levelFlag:0,//0:普通查询模板; 1:高级查询模板"
        queryTemplate:{}
        levelFlag: 0,//0:普通查询模板; 1:高级查询模板"
        queryTemplate: {}
      },
      //已有排序列表配置
      crudOption: {
@@ -127,10 +151,10 @@
        }, {
          label: '排序方式',
          prop: 'orderMode',
          formatter:function (row, value) {
          formatter: function (row, value) {
            if (row.orderMode == 'ASC') {
              return '升序'
            }else{
            } else {
              return '降序'
            }
          }
@@ -140,25 +164,25 @@
        }]
      },
      //已有排序
      orderInfoList:[],
      orderInfoList: [],
      //设置排序弹窗表单数据
      tableForm:{
        orderField:'',
        orderMode:'ASC',
        level:''
      tableForm: {
        orderField: '',
        orderMode: 'ASC',
        level: ''
      },
      //设置排序弹窗所有可排序字段
      orderFieldList:[],
      orderFieldList: [],
      //设置排序弹窗表单配置
      tableFormOption: {
        menuBtn: false,
        submitBtn: false,
        emptyBtn: false,
        span:24,
        span: 24,
        column: [{
          label: '排序字段',
          prop: 'orderField',
          type:'select',
          type: 'select',
          props: {
            label: 'id',
            value: 'id'
@@ -184,7 +208,7 @@
          label: '优先级',
          prop: 'level',
          type: 'number',
          min:1,
          min: 1,
          rules: [{
            required: true,
            message: "请输入优先级",
@@ -192,31 +216,35 @@
          }]
        }]
      },
      treeOption:{
        defaultExpandAll:true,
      treeOption: {
        defaultExpandAll: true,
        menu: false,
        addBtn: false,
        filter:false,
        filter: false,
        draggable: true,
        allowDrop: () => {
          return false;
        },
        allowDrag: () => {
        allowDrag: (dropNode) => {
          return true;
        },
        props: {
          label: 'name',
          value: 'name',
          children: 'attrs'
        }
      },
      businessQueryDefineForm:'',//业务类型查询模板定义选中值
      businessQueryDefineDic:[],//业务类型查询模板定义下拉数据
      businessQueryDefineForm: '',//业务类型查询模板定义选中值
      businessQueryDefineDic: [],//业务类型查询模板定义下拉数据
      //业务类型查询模板定义选中项属性
      businessTreeData: [],
      //高级查询条件
      queryTree:{},
      queryTree: {},
      //普通查询条件
      queryCondition:[],
      queryCondition: [],
    };
  },
  watch: {
  },
  watch: {},
  methods: {
    openDialog(btmName, title, mode, data) {
      this.dialog.title = title;
@@ -227,23 +255,23 @@
      if (data.selectData) {
        this.selectData = data.selectData;
        this.form.qtName = this.selectData.qtName;
        this.form.level = this.selectData.queryTemplate.level;
        if (data.selectData.queryTemplate.orderInfoList && data.selectData.queryTemplate.orderInfoList.length > 0) {
          this.orderInfoList = JSON.parse(JSON.stringify(data.selectData.queryTemplate.orderInfoList));//已有排序
        }
        this.queryCondition=this.selectData.queryTemplate.condition;
        this.queryTree=this.selectData.tree;
        this.form.levelFlag=this.selectData.levelFlag;
        this.queryCondition = this.selectData.queryTemplate.condition;
        this.queryTree = this.selectData.tree;
        this.form.levelFlag = this.selectData.levelFlag;
      } else {
        this.selectData = {};
        this.orderInfoList = [];
        this.queryCondition=[];
        this.queryTree={
          connector:'并且',
          child:[]
        this.queryCondition = [];
        this.queryTree = {
          connector: '并且',
          child: []
        };
      }
      this.dialog.showDialog = true;
      this.treeOption.defaultExpandedKeys = [data.treeData.label]
      this.getTemp(data.treeData.label)
      this.getAllAttr();
    },
@@ -254,26 +282,25 @@
        this.form = {
          btmName: '',
          qtName: '',
          levelFlag:0,
          levelFlag: 0,
          queryTemplate: {}
        };
        this.orderInfoList =[];
        this.businessQueryDefineForm='';
        this.linkQueryDefineForm='';
        this.orderInfoList = [];
        this.businessQueryDefineForm = '';
        this.linkQueryDefineForm = '';
        this.$refs.form.clearValidate();
      });
    },
    submitDialog() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const formData=this.initFormData();
          console.log(formData)
          linkSave(formData).then(res => {
          const formData = this.initFormData();
          btmSave(formData).then(res => {
            if (res.data.success) {
              this.$message.success("保存成功");
              this.cancelDialog();
              this.$emit("refresh");
            }else {
            } else {
              this.$refs.form.clearValidate();
            }
          });
@@ -288,21 +315,13 @@
        qtName: this.form.qtName,
        levelFlag: this.form.levelFlag,
        queryTemplate: {
          clauseList: ['*'],
          direction: this.form.direction,
          id: this.form.qtName,
          linkType: this.form.btmName,
          orderInfoList: this.orderInfoList,
          recReturnMode: 1,//递归返回数据模式:1：RECRETURNMODE_FLAT, 2：RECRETURNMODE_FILTER
          rightFlag: true,
          secretFlag: true,
          type: 'link',
          version: this.form.version
        }
      }
      if (formData.levelFlag == 1) {
        //高级
        let that = this;

        function initValue(nodeChild) {
          let children = [];
          if (nodeChild) {
@@ -341,12 +360,11 @@
    },
    // 行删除
    rowDeleteHandler(data) {
      debugger;
      this.orderInfoList.splice(data.index,1);
      this.orderInfoList.splice(data.index, 1);
      this.orderFieldList.unshift({
        id: data.row.orderField
      });
      this.tableFormOption.column[0].dicData= this.orderFieldList
      this.$refs.tableForm.updateDic('orderField',this.orderFieldList);
    },
    //获取排序设置中所有排序字段
    getAllAttr() {
@@ -360,16 +378,16 @@
            dicData.push(item);
          }
        })
        this.tableFormOption.column[0].dicData=dicData;
        this.orderFieldList=dicData;
        this.tableFormOption.column[0].dicData = dicData;
        this.orderFieldList = dicData;
      })
    },
    //排序设置保存
    rowSave() {
      this.$refs.tableForm.validate((valid) => {
        if(valid){
        if (valid) {
          this.orderInfoList.push(JSON.parse(JSON.stringify(this.tableForm)));
          this.crudDialog.showDialog=false;
          this.crudDialog.showDialog = false;
          const orderInfoStr = JSON.stringify(this.orderInfoList);
          const dicData = [];
          this.orderFieldList.forEach(item => {
@@ -377,9 +395,9 @@
              dicData.push(item);
            }
          })
          this.tableFormOption.column[0].dicData=dicData;
          this.orderFieldList=dicData;
          this.tableForm= {
          this.tableFormOption.column[0].dicData = dicData;
          this.orderFieldList = dicData;
          this.tableForm = {
            orderField: '',
            orderMode: 'ASC',
            level: ''
@@ -390,58 +408,74 @@
    //获取查询模板定义下拉
    getTemp(btmName) {
      if (btmName) {
        queryTemplateListByAttr({btmName: btmName}).then(res => {
        queryTemplateListByAttr({btmName: btmName, linkFlag: false}).then(res => {
          const data = res.data.data.map(item => {
            item.label = item.name + '-' + (item.linkTypeName || item.btmName);
            item.label = item.name + '-' + item.btmName;
            item.value = item.name;
            return item;
          });
            this.businessQueryDefineDic=data;
            data.length>0 && (this.businessQueryDefineForm= data[0].value);

          this.businessQueryDefineDic = data;
          data.length > 0 && (this.businessQueryDefineForm = data[0].value);
        })
      }
    },
    businessQueryDefineChange(data) {
      if (data.value) {
        const childData = data.item.attrs.map(item => {
          return {
            label: item.name,
            value: item.name,
            atttributes:item
          };
        });
        this.businessTreeData = [{
          label: data.value,
          value: data.value,
          children: childData
        }]
        this.businessTreeData = [data.item]
      }
    },
    // 开始拖拽树节点事件
    handleDragStart(node, ev) {
      // 使用 setData 方法设置数据
      ev.dataTransfer.setData('item', JSON.stringify(node.data));
      if(this.form.levelFlag==1){
        this.$refs.formQuery.$refs.tree.$emit('tree-node-drag-start', ev,{node:this.$refs.formQuery.initItem(node)});
      if (this.form.levelFlag == 1) {
        this.$refs.formQuery.$refs.tree.$emit('tree-node-drag-start', ev, {node: this.$refs.formQuery.initItem(node)});
      }
    },
    handleDragEnd(draggingNode,endNode,position,ev){
      if(this.form.levelFlag==1) {
    handleDragEnd(draggingNode, endNode, position, ev) {
      if (this.form.levelFlag == 1) {
        this.$refs.formQuery.$refs.tree.$emit('tree-node-drag-end', ev);
      }
    }
    },
    //查询
    queryHandler() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$refs.formQuery.queryResultDialog.loading = true;
          const formData = this.initFormData();
          getCriteriaBtm(formData).then(res => {
            if (res.data.success) {
              const data = res.data.data;
              const result = data.map(item => {
                const filteredAttrs = item.hisAttrValList.filter(attr =>
                  attr.attrName === "OID" || attr.attrName === "REVISIONOID" || attr.attrName === "BTMNAME" || attr.attrName === "NAMEOID"
                );

                const newObj = filteredAttrs.reduce((acc, attr) => {
                  acc[attr.attrName] = attr.attrVal;
                  return acc;
                }, {});

                return newObj;
              });

              this.$refs.formQuery.resultData = result;
              this.$refs.formQuery.queryResultDialog.showDialog = true;
              this.$refs.formQuery.queryResultDialog.loading = false;
            }
          });
        } else {
          return false;
        }
      });
    },
  },
}
</script>

<style scoped>
fieldset {
  border-radius: 5px;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  padding: 10px 6px;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid #EBEEF5;
}