PLTWEB.git - Gitblit

<template>
  <el-dialog v-dialogDrag
             :title="dialog.title"
             :visible.sync="dialog.showDialog"
             width="1600px"
             :append-to-body="true"
             class="avue-dialog"
             :destroy-on-close="true"
             :close-on-click-modal="false"
             @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"
                  :formData="form"
                  @getFormData="getFormData">
      </basic-form>
      <avue-crud  ref="crud" title="设置排序"
                  :data="orderInfoList" :option="crudOption">
        <template slot="menuLeft" slot-scope="scope">
          <el-button icon="el-icon-plus" size="small" type="primary" @click="addRow">创建</el-button>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button icon="el-icon-delete" size="small" type="text" @click="rowDeleteHandler(scope)">删除
          </el-button>
        </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"
                 @close="crudDialog.showDialog=false">
        <avue-form ref="tableForm" :option="tableFormOption" v-model="tableForm"></avue-form>
        <div class="dialog-footer avue-dialog__footer">
          <el-button type="primary" plain size="small" @click="rowSave" >保 存</el-button>
        </div>
      </el-dialog>
      <el-container style="margin-top: 10px;">
        <el-aside style="width:350px">
          <fieldset>
            <legend>&nbsp;链接类型候选条件&nbsp;</legend>
            <div>
              查询模板定义
              <avue-select @change="linkQueryDefineChange" class="el-input--small" v-model="linkQueryDefineForm" placeholder="请选择内容" type="tree" :dic="linkQueryDefineDic" style="width:240px"></avue-select>
              <avue-tree style="height: 265px" :data="linkTreeData" :option="treeOption">
              </avue-tree>
            </div>
          </fieldset>
        </el-aside>
        <el-main>
          <fieldset style="margin: 0 10px">
            <legend>&nbsp;查询条件&nbsp;</legend>
            <div style="height: 300px;">
 
            </div>
          </fieldset>
        </el-main>
        <el-aside style="width:350px">
          <fieldset>
            <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">
              </avue-tree>
            </div>
          </fieldset>
        </el-aside>
      </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" @click="cancelDialog">取 消</el-button>
    </div>
  </el-dialog>
</template>
 
<script>
import {getAllOrderbyAttributeByLink} from "@/api/modeling/linkType/api";
import {linkSave} from "@/api/queryTemplate/linkTypeQuery";
import basicOption from "@/util/basic-option";
import {gridTemplate} from "@/api/queryTemplate/queryDefine";
import {deleteAttributes} from "@/api/modeling/attributePool/api";
export default {
  name: "formDialog",
  data(){
    return {
      dialog: {
        showDialog: false,
        title: "创建",
        submitTxt: "保存",
        submitIcon: "el-icon-check",
        loading: false,
        type: "add",
      },
      crudDialog: {
        showDialog: false,
        submitTxt: "保存",
        submitIcon: "el-icon-check",
      },
      formItems:[{
        label: '查询模板名称',
        prop: 'qtName',
        type: 'input',
        span:5,
        rules: [{
          required: true,
          message: "请输入查询模板名称",
          trigger: "blur"
        }]
      },{
        label: '方向',
        prop: 'direction',
        type: 'radio',
        value:'positive',
        labelWidth:70,
        span: 3,
        dicData: [{
          label: '正向',
          value: 'positive'
        }, {
          label: '反向',
          value: 'opposite'
        }]
      },{
        label: '业务类型',
        prop: 'btmType',
        type: 'select',
        labelWidth:110,
        dicData: []
      }, {
        label: '版本版次',
        prop: 'version',
        type: 'select',
        span:5,
        dicData: [{
          label: '当前版本当前版次',
          value: 1
        }, {
          label: '当前版本最新版次',
          value: 2
        }, {
          label: '最新版本最新版次',
          value: 3
        }, {
          label: '已发布的最新版本',
          value: 7
        }],
        value: 1
      },{
        label: '查询是否有下级',
        prop: 'queryISLeaf',
        type: 'switch',
        labelWidth:140,
        dicData: [ {
          label: '否',
          value: false
        },{
          label: '是',
          value: true
        }],
        value:false
      }, {
        label: '子节点层次数',
        prop: 'level',
        type: 'number',
        span:3,
        value:1
      }],
      form:{
        btmName:'',
        qtName: '',
        queryTemplate:{
 
        }
      },
      formTemplate:{
        btmName:'',
        qtName: '',
        queryTemplate:{
 
        }
      },
      //已有排序列表配置
      crudOption: {
        ...basicOption,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        selection: false,
        height: "220",
        tip: false,
        column: [{
          label: '排序字段',
          prop: 'orderField'
        }, {
          label: '排序方式',
          prop: 'orderMode'
        }, {
          label: '优先级',
          prop: 'level'
        }]
      },
      //已有排序
      orderInfoList:[],
      //设置排序弹窗表单数据
      tableForm:{
        orderField:'',
        orderMode:'ASC',
        level:''
      },
      //设置排序弹窗所有可排序字段
      orderFieldList:[],
      //设置排序弹窗表单配置
      tableFormOption: {
        menuBtn: false,
        submitBtn: false,
        emptyBtn: false,
        span:24,
        column: [{
          label: '排序字段',
          prop: 'orderField',
          type:'select',
          props: {
            label: 'id',
            value: 'id'
          },
          rules: [{
            required: true,
            message: "请选择排序字段",
            trigger: "blur"
          }]
        }, {
          label: '排序方式',
          prop: 'orderMode',
          type: 'select',
          dicData: [{
            label: '升序',
            value: 'ASC'
          }, {
            label: '降序',
            value: 'DESC'
          }],
          value: 'ASC'
        }, {
          label: '优先级',
          prop: 'level',
          type: 'number',
          min:1,
          rules: [{
            required: true,
            message: "请输入优先级",
            trigger: "blur"
          }]
        }]
      },
      treeOption:{
        defaultExpandAll:true,
        menu: false,
        addBtn: false,
        filter:false,
      },
      linkQueryDefineForm:'',//链接类型查询模板定义选中值
      linkQueryDefineDic:[],//链接类型查询模板定义下拉数据
      //链接类型查询模板定义选中项属性
      linkTreeData: [],
      businessQueryDefineForm:'',//业务类型查询模板定义选中值
      businessQueryDefineDic:[],//业务类型查询模板定义下拉数据
      //业务类型查询模板定义选中项属性
      businessTreeData: [],
    };
  },
  watch: {
    //方向
    'form.direction': {
      handler(val) {
        if(val=='positive'){
          //正向
          const dicData=this.treeData.btmItemsTo.map(item=>{
            return {
              label: item,
              value: item
            }
          })
          dicData.push({
            label: '所有类型',
            value: '*'
          })
          this.$refs.form.updateDic('btmType', dicData);
          this.form.btmType=dicData[0].value
          this.getAllAttr();
        }else if(val=='opposite'){
          //反向
          const dicData=this.treeData.btmItemsFrom.map(item=>{
            return {
              label: item,
              value: item
            }
          })
          dicData.push({
            label: '所有类型',
            value: '*'
          })
          this.$refs.form.updateDic('btmType', dicData);
          this.form.btmType=dicData[0].value
          this.getAllAttr();
        }
      },
      immediate: true,
    },
    //业务类型
    'form.btmType': {
      handler(val) {
        if(val && val!='*'){
          this.getTemp(val,false);
        }
      },
      immediate: true,
    },
  },
  methods: {
    openDialog(btmName, title, mode, data) {
      this.dialog.title = title;
      this.dialog.showDialog = true;
      this.dialog.type = mode;
      this.form.btmName = btmName;
      this.treeData = data.treeData;
 
      if (data.selectData) {
        this.selectData = data.selectData;
        this.orderInfoList = JSON.parse(JSON.stringify(data.selectData.queryTemplate.orderInfoList));//已有排序
      } else {
        this.selectData = {};
        this.orderInfoList =[];
      }
      this.getTemp(data.treeData.label,true)
    },
    cancelDialog() {
      this.$nextTick(() => {
        this.form = this.formTemplate;
        this.orderInfoList =[];
        this.dialog.loading = false;
        this.dialog.showDialog = false;
        this.$refs.form.resetFields();
        this.businessQueryDefineForm='';
        this.linkQueryDefineForm='';
      });
    },
    submitDialog() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          linkSave(this.form).then(res => {
            if (res.success) {
              this.$message.success("保存成功");
              this.cancelDialog();
              this.$emit("refresh");
            }
          });
        } else {
          return false;
        }
      });
    },
    getFormData(form) {
      this.form = form;
    },
    addRow() {
      this.crudDialog.showDialog = true;
    },
    // 行删除
    rowDeleteHandler(data) {
      this.orderInfoList.splice(data.index,1);
      this.orderFieldList.unshift({
        id: data.row.orderField
      });
      this.tableFormOption.column[0].dicData= this.orderFieldList
    },
    //获取排序设置中所有排序字段
    getAllAttr() {
      getAllOrderbyAttributeByLink({
        name: this.treeData.label,
        btmType: this.form.btmType,
        direction: this.form.direction
      }).then(res => {
        const orderInfoStr = JSON.stringify(this.orderInfoList);
        const dicData = [];
        res.data.data.forEach(item => {
          if (orderInfoStr.indexOf('"orderField":"' + item + '"') == -1) {
            dicData.push({id: item});
          }
        })
        this.tableFormOption.column[0].dicData=dicData;
        this.orderFieldList=dicData;
      })
    },
    //排序设置保存
    rowSave() {
      this.$refs.tableForm.validate((valid) => {
        if(valid){
          this.orderInfoList.push(JSON.parse(JSON.stringify(this.tableForm)));
          this.crudDialog.showDialog=false;
          const orderInfoStr = JSON.stringify(this.orderInfoList);
          const dicData = [];
          this.orderFieldList.forEach(item => {
            if (orderInfoStr.indexOf('"orderField":"' + item.id + '"') == -1) {
              dicData.push(item);
            }
          })
          this.tableFormOption.column[0].dicData=dicData;
          this.orderFieldList=dicData;
          this.tableForm= {
            orderField: '',
            orderMode: 'ASC',
            level: ''
          }
        }
      })
    },
    //获取查询模板定义下拉
    getTemp(btmName,linkFlag) {
      if (btmName) {
        gridTemplate({btmName: btmName, linkFlag: linkFlag}).then(res => {
          const data = res.data.data.map(item => {
            item.label = item.name + '-' + (item.linkTypeName || item.btmName);
            item.value = item.name;
            return item;
          });
          if(linkFlag){
            this.linkQueryDefineDic=data
            data.length>0 && (this.linkQueryDefineForm=data[0].value);
          }else {
            this.businessQueryDefineDic=data;
            data.length>0 && (this.businessQueryDefineForm= data[0].value);
          }
        })
      }
    },
    linkQueryDefineChange(data) {
      if (data.value) {
        const childData = data.item.abNames.map(item => {
          return {
            label: item,
            value: item
          };
        });
        this.linkTreeData = [{
          label: data.value,
          value: data.value,
          children: childData
        }]
      }
    },
    businessQueryDefineChange(data) {
      if (data.value) {
        const childData = data.item.abNames.map(item => {
          return {
            label: item,
            value: item
          };
        });
        this.businessTreeData = [{
          label: data.value,
          value: data.value,
          children: childData
        }]
      }
    }
  },
}
</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;
}
</style>