Source/UBCS-WEB/src/views/modeling/original.vue

@@ -1,288 +1,380 @@
<template>
  <basic-container>
    <avue-crud v-model="form" :option="option" :data="data" ref="crud" :before-open="beforeOpen" @on-load="onLoad" @row-save="rowSave" @row-update="rowUpdate" @row-del="rowDel" :page.sync="page">
      <template slot-scope="{row,index,type}" slot="selInputForm">
        <div style="margin-left: 75px">
          <el-input  v-model="form.text" :size="size"
                     style="width: 210px" :readonly="true"></el-input>
          <el-button type="primary" style="margin-left: 10px" @click="addHandle">选择</el-button>
          <el-button type="info">取消</el-button>
        </div>
      </template>
    </avue-crud>
    <el-dialog :visible.sync="packageBox"
               append-to-body
               title="查看业务类型"
               width="1000px">
      <original-range @rowchange="rowchange"></original-range>
      <span slot="footer" class="dialog-footer">
  <el-container>
    <el-main>
      <basic-container>
        <avue-crud v-model="form" :option="option" :data="data" ref="crud" @on-load="onLoad" @row-save="rowSave"
          @row-update="rowUpdate" :before-open="beforeOpen" @row-del="rowDel" :page.sync="page"
          @refresh-change="refreshChange" @row-click="rowClick"
          @selection-change="selectChange">
          <template slot-scope="{row,index,type}" slot="selInputForm">
          <div style="margin-left: 75px">
            <el-input v-model="form.text" :size="size" style="width: 210px" :readonly="true" @focus="selectBtmType" :disabled="referType.disable"></el-input>
          </div>
        </template>
        <template slot="radio"
                slot-scope="{row}">
                    <el-radio v-model="selectRow"
                        :label="row.$index">&nbsp;
                    </el-radio>
                </template>
         <template slot="menuLeft">
            <el-button size="small"
                       plain
                       type="primary"
                       icon="el-icon-zoom-in"
                       @click="applyRangeOpen">查看使用范围
            </el-button>
          </template>
        </avue-crud>
        <el-dialog :visible.sync="applyRange.display" append-to-body :title="applyRange.title" width="600px"
        @close="applyRangeClose">
            <avue-crud v-model="applyRange.model" :option="applyRange.option" :data="applyRange.data" class="applyRangeTable"
            ></avue-crud>
        </el-dialog>
        <el-dialog :visible.sync="referType.display" append-to-body :title="referType.title" width="1000px">
          <original-range @rowchange="rowchange"></original-range>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialoghandelfalse">取 消</el-button>
            <el-button type="primary" @click="dialoghandeltrue">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog :visible.sync="packageLinkBox"
               append-to-body
               title="查看链接类型"
               width="1000px">
      <original-link @rowLinkchange="rowLinkchange"></original-link>
      <span slot="footer" class="dialog-footer">
          </span>
        </el-dialog>
        <!-- <el-dialog :visible.sync="packageLinkBox" append-to-body title="查看链接类型" width="1000px">
          <original-link @rowLinkchange="rowLinkchange"></original-link>
          <span slot="footer" class="dialog-footer">
            <el-button @click="Linkdialoghandelfalse">取 消</el-button>
            <el-button type="primary" @click="Linkdialoghandeltrue">确 定</el-button>
  </span>
    </el-dialog>
  </basic-container>
          </span>
        </el-dialog> -->
      </basic-container>
    </el-main>
    <el-aside>
      <basic-container class="itemForm">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="属性项" name="attrTab">
            <el-form ref="form" :model="itemData" label-width="80px" style="height: 656px;">
              <el-form-item label="属性编码">
                <el-input v-model="itemData.id" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="属性名称">
                <el-input v-model="itemData.name" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="属性类型">
                <el-input v-model="itemData.typeValue" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="标签">
                <el-input v-model="itemData.hashtag" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="默认值">
                <el-input v-model="itemData.defaultValue" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="允许为空">
                <el-switch v-model="itemData.nullable" :disabled="true"></el-switch>
              </el-form-item>
              <el-form-item label="长度">
                <el-input v-model="itemData.maxLength" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="描述">
                <el-input v-model="itemData.description" :disabled="true"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="参照" name="valueTab">
            <el-form ref="form" :model="itemData" label-width="80px" style="height: 656px;">
              <el-form-item label="参照类型">
                <el-input v-model="itemData.referTypeValue" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="参照名称">
                <el-input v-model="itemData.referToName" :disabled="true"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="枚举" name="enumTab">
            <el-form ref="form" :model="itemData" label-width="80px" style="height: 656px;">
              <el-form-item label="使用枚举">
                <el-switch v-model="itemData.usingDict" :disabled="true"></el-switch>
              </el-form-item>
              <el-form-item label="枚举类型">
                <el-input v-model="form.dictCode" :disabled="true"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </basic-container>
    </el-aside>
  </el-container>
</template>

<script>
import {
  getList,
  remove,
  add,
  update, getPage, getApplyRange
} from "@/api/omd/OmdAttribute";

import { getDictionary } from "@/api/omd/enum";

export default {
  name: "passwords.vue",
  name: "original",
  data() {
    return {
      rouname:"",
      // 业务类型对话框
      packageBox:false,
      //链接类型对话框
      packageLinkBox:false,
      datas: [],
      itemData: {},
      activeName: 'attrTab',
      formAtrr: {},
      rouname: "",
      referType: {
        code: 'referType',
        key: '',
        value: '',
        display: false,
        title: '',
        disable: true
      },
      //值域下拉框数据
      Typelist:[],
      Typelist: [],
      //版本数据
      banList:[],
      form:{
        text:""
      banList: [],
      // 属性类型下拉框数据
      typeSelectList: [
        {
          label: "哈哈哈",
          value: 0
        },],
      // 是否为空
      nullable: [],
      form: {
        text: ""
      },
      detailForm: {
        text: ""
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 100
      },
      selectRow: '',
      data: [
        {
          name:"a",
          prop:"VTstring",
          admin:"默认",
          desc:"测试A"
        },
        {
          name:"b",
          prop:"VTstring",
          admin:"默认",
          desc:"测试B"
        },
        {
          name:"c",
          prop:"VTstring",
          admin:"默认",
          desc:"测试C"
        },
        {
          name:"d",
          prop:"VTstring",
          admin:"默认",
          desc:"测试D"
        }

      ],
      option:{
        selection: true,
      option: {
        height: "550px",
        headerAlign: 'center',
        border: true,
        index: true,
        rowKey:'id',
        rowKey: 'id',
        tabs: true,
        column:[
        highlightCurrentRow: true,
        column: [{
            label: '选择',
            prop: 'radio',
            width: 60,
            hide: false,
            display: false
          },
          {
            label: '属性名',
            label: '属性编号',
            prop: 'id',
            align: 'left',
            display: false,
            width: 200
          }, {
            label: '属性名称',
            prop: 'name',
            align: 'left',
            display:false
            display: false
          },
          {
            label: '标签',
            prop: 'tag',
            hide:true,
            prop: 'hashtag',
            // hide: true,
            display: false
          },
          {
            label: '是否使用枚举',
            prop: 'isnot',
            prop: 'usingDict',
            type: 'switch',
            hide:true,
            hide: true,
            labelWidth: 132,
            display: false,
            dicData:[{
              label:'是',
              value:0
            },{
              label:'否',
              value:1
            dicData: [{
              label: '是',
              value: 0
            }, {
              label: '否',
              value: 1
            }]
          },
          {
            label: '属性类型',
            prop: 'prop',
            type:"select",
            prop: 'typeValue',
            display: false,
            dicData:[
              {
                label:"测试1",
                value:0
              },
              {
                label:"测试2",
                value:1
              },
              {
                label:"测试3",
                value:2
              }
            ]
            // hide: true
          },
          {
            label: '默认值',
            prop: 'admin',
            prop: 'defaultValue',
            display: false
          },
          {
            label: '允许为空',
            prop: 'isDefault',
            prop: 'nullable',
            type: 'switch',
            display: false,
            hide:true,
            hide: true,
            labelWidth: 132,
            dicData:[{
              label:'不允许',
              value:0
            },{
              label:'允许',
              value:1
            dicData: [{
              label: '否',
              value: 1
            }, {
              label: '是',
              value: 0
            }]
          },
          {
            label: "长度",
            prop: "length",
            prop: "maxLength",
            hide: true,
            display: false
          },
          {
            label: '描述',
            prop: 'desc',
            type:"textarea",
            prop: 'description',
            type: "textarea",
            display: false
          },
        ],
        group:[
        group: [
          {
            label: '属性项',
            prop:"index",
            prop: "index",
            column: [
              {
                label: '属性名',
                label: '属性编号',
                prop: 'id',
                align: 'left',
              },
              {
                label: '属性名称',
                prop: 'name',
                align: 'left',
              },
              {
                label: '标签',
                prop: 'tag',
                hide:true
                prop: 'hashtag',
                hide: true
              }, {
                label: '属性类型字典码',
                prop: 'typeCode',
                display: false,
                value: 'attributeType'
              },
              {
                label: '属性类型',
                prop: 'prop',
                type:"select",
                dicData:[
                prop: 'typeKey',
                type: "select",
                dicUrl: '/api/ubcs-omd/dict-biz/dictionary?code=attributeType',
                dicType: 'String',
                props: {
                  label: 'dictValue',
                  value: 'dictKey'
                },
                rules: [
                  {
                    label:"测试1",
                    value:0
                  },
                  {
                    label:"测试2",
                    value:1
                  },
                  {
                    label:"测试3",
                    value:2
                    required: true,
                    message: "请选择属性类型",
                    trigger: "click"
                  }
                ]
              },
              {
                label: '默认值',
                prop: 'admin',
                prop: 'defaultValue',
              },
              {
                label: '允许为空',
                prop: 'isDefault',
                prop: 'nullable',
                type: 'switch',
                hide:true,
                hide: true,
                labelWidth: 132,
                dicData:[{
                  label:'不允许',
                  value:0
                },{
                  label:'允许',
                  value:1
                dicData: [{
                  label: '否',
                  value: 1
                }, {
                  label: '是',
                  value: 0
                }]
              },
              {
                label: "长度",
                prop: "length",
                prop: "maxLength",
                hide: true
              },
              {
                label: '描述',
                prop: 'desc',
                type:"textarea"
                prop: 'description',
                type: "textarea"
              },
            ]
          },
          {
            label: '值域',
            column:[
            label: '参照',
            column: [
              {
                placeholder:"请选择值域",
                span:12,
                label: '值域',
                prop: 'range',
                value:0,
                type:"select",
                change:this.selectChange,
                dicData:[
                label: '参照类别',
                prop: 'referTypeCode',
                display: false,
                hide: true
              },{
                span: 12,
                label: '参照类别',
                prop: 'referTypeKey',
                type: "select",
                change: this.selectChange,
                dicUrl: '/api/ubcs-omd/dict-biz/dictionary?code=referType',
                dicType: 'String',
                props: {
                  label: 'dictValue',
                  value: 'dictKey'
                },
                rules: [
                  {
                    label:"业务类型",
                    value:0
                  },
                  {
                    label:"链接类型",
                    value:1
                  },
                ]},
              {
                prop:"selInput",
                placeholder: false,
                readonly:true,
                display: true,
                formslot: true,
              },
              {
                label: "选择版本",
                prop:"banben",
                type:'select',
                value:0,
                change: this.selchange,
                display: true,
                dicData: [
                  {
                    label: '当前版本次',
                    value:0
                  },
                  {
                    label: '最新版本次',
                    value:1
                    required: true,
                    message: "请选择参照类别",
                    trigger: "click"
                  }
                ]
              },
              {
                prop: "selInput",
                placeholder: false,
                readonly: true,
                display: true,
                formslot: true,
              },
              // {
              //   label: "选择版本",
              //   prop: "banben",
              //   type: 'select',
              //   value: 0,
              //   change: this.selchange,
              //   display: true,
              //   dicData: [
              //     {
              //       label: '当前版本次',
              //       value: 0
              //     },
              //     {
              //       label: '最新版本次',
              //       value: 1
              //     }
              //   ]
              // },
              {
                //默认表格插槽
                prop:"default",
                span:24,
                prop: "default",
                span: 24,
                display: false
              }
            ]
@@ -294,30 +386,30 @@
                label: '是否使用枚举',
                prop: 'isnot',
                type: 'switch',
                hide:true,
                hide: true,
                labelWidth: 132,
                span:8,
                dicData:[{
                  label:'是',
                  value:0
                },{
                  label:'否',
                  value:1
                span: 8,
                dicData: [{
                  label: '否',
                  value: 1
                }, {
                  label: '是',
                  value: 0
                }]
              },
              {
                prop:'text',
                type:'input',
                placeholder:'请输入内容',
                hide:true,
                display:false
                prop: 'text',
                type: 'input',
                placeholder: '请输入内容',
                hide: true,
                display: false
              },
              {
                prop: 'enumerationSelect',
                type: 'select',
                placeholder: '请选择',
                hide: true,
                span:12,
                span: 12,
                dicData: [
                  {
                    label: 'a',
@@ -336,144 +428,198 @@
              {
                label: '描述',
                prop: 'endesc',
                type:"textarea",
                type: "textarea",
                labelWidth: 132,
              },
            ]
          }
        ]
      },

      applyRange: {
        model: "",
        title: "应用的业务类型",
        option: {
          height: 360,
          addBtn: false,
          refreshBtn: false,
          columnBtn: false,
          menu: false,
          border: true,
          reserveSelection: true,
          searchMenuSpan:8,
          searchShowBtn: false,
          highlightCurrentRow: true,
          column: [
            {
                label: '业务类型编号',
                prop: 'id',
                align: 'left',
              },
              {
                label: '业务类型名称',
                prop: 'name',
                align: 'left',
              },
          ]
        },
        data: [],
        display: false,
      }
    }
  },


  created() {
    const column =this.findObject(this.option.group,"referTypeKey")
    console.log(column);
  },
  methods:{
    rowLinkchange(row){
      this.form.text=row.name
  methods: {
    rowLinkchange(row) {
      this.form.text = row.name
    },
    rowchange(row){
      this.form.text=row.name
    rowchange(row) {
      this.form.text = row.name
    },
    //值域类型选择
    addHandle() {
      this.packageBox=true
      if(this.Typelist.value == 0){
        this.packageBox=true
        this.packageLinkBox=false
      }else if(this.Typelist.value == 1){
        this.packageBox=false
        this.packageLinkBox=true
      this.packageBox = true
      if (this.Typelist.value == 0) {
        this.packageBox = true
        this.packageLinkBox = false
      } else if (this.Typelist.value == 1) {
        this.packageBox = false
        this.packageLinkBox = true
      }
    },
    // 值域业务类型对话框取消
    dialoghandelfalse() {
      this.packageBox=false;
      this.form.text=""
      this.packageBox = false;
      this.form.text = ""
    },
    //值域业务类型对话框确定
    dialoghandeltrue(){
      this.packageBox=false
    dialoghandeltrue() {
      this.packageBox = false
    },
    // 值域链接类型对话框取消
    Linkdialoghandelfalse(){
      this.packageLinkBox=false;
      this.form.text=""
    Linkdialoghandelfalse() {
      this.packageLinkBox = false;
      this.form.text = ""
    },
    //值域链接类型对话框确定
    Linkdialoghandeltrue(){
      this.packageLinkBox=false
    Linkdialoghandeltrue() {
      this.packageLinkBox = false
    },
    selectChange(val){
      this.Typelist=val

     if(val.value == 0 ){
       this.option.group[1].column[2].display=false
     }else if(val .value == 1  ){
       this.option.group[1].column[2].display=true
     }else if(val.column.value == 0){
       this.option.group[1].column[2].display=false
     }
      },
    selchange(val){
      this.banList=val
    selectChange(val) {
       this.referType.key = val.value
      if (val.value == 'businessType'){
        this.referType.value = '业务类型'
      }
      if (val.value == 'linkType'){
        this.referType.value = '链接类型'
      }
      if(val.value){
        this.referType.disable = false
      }
    },
    // beforeOpen (done, type) {
    //   if (['view', 'edit'].includes(type)) {
    //     // 查看和编辑逻辑
    //     console.log("编辑")
    //   } else {
    //     //新增逻辑
    //     console.log(this.Typelist)
    //     console.log(this.banList)
    //
    //     console.log("新增")
    //   }
    //   done();
    //
    // }
    selchange(val) {
      this.banList = val
      console.log(val);
    },
    refreshChange() {
      this.onLoad(this.pageParent, this.query);
    },
    beforeOpen(done, type) {
      
      done();

    // rowDel(row){
    //   this.$confirm("确定将选择数据删除?", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   })
    //     .then(() => {
    //       return getremove(row.id);
    //     })
    //     .then(() => {
    //       this.$message({
    //         type: "success",
    //         message: "操作成功!"
    //       });
    //       this.onLoad();
    //     });
    // },
    // rowSave(row,done){
    //   getadd(row).then(()=>{
    //     this.$message({
    //       type: "success",
    //       message: "操作成功!"
    //     });
    //     done(row)
    //     this.onLoad()
    //   }).catch((res)=>{
    //     this.$message({
    //       type: "success",
    //       message:res
    //     });
    //   })
    // },
    // rowUpdate(row,index,done){
    //   getupdata(row).then(()=>{
    //     this.onLoad()
    //     this.$message({
    //       type: "success",
    //       message: "修改成功!"
    //     });
    //     done(row)
    //   })
    // },
    // onLoad(page, params = {}) {
    //   // this.loading = true;
    //   // getPage(this.page.currentPage, this.page.pageSize, Object.assign(params, this.query)).then(res => {
    //   //   // const data = res.data.data;
    //   //   // this.page.total = data.total;
    //   //   // this.data = data.records;
    //   //   // this.loading = false;
    //   //   // this.selectionClear();
    //   //   this.data=res.data.data.records
    //   // })
    // }
  // }
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.onLoad();
        });
    },
    rowSave(row, done) {
      add(row).then(() => {
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done(row)
        this.onLoad()
      }).catch((res) => {
        this.$message({
          type: "success",
          message: res
        });
      })
    },
    rowUpdate(row, index, done) {
      update(row).then(() => {
        this.onLoad()
        this.$message({
          type: "success",
          message: "修改成功!"
        });
        done(row)
      })
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getPage(this.page.currentPage, this.page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.data = res.data.data.records
        this.itemData = this.data[0];
      })
    },
    rowClick(row) {
      this.itemData = row;
      this.selectRow = row.$index;

    }
    ,selectBtmType(){
        this.referType.display = true;
        this.referType.title = "请选择" + this.referType.value
    },
    applyRangeOpen(){
        if (!this.selectRow){
          this.$message({
            type:"warning",
            message: "请先选择属性"
          })
        }
        var oid = this.data[this.selectRow].oid;
        console.log(oid);
        getApplyRange(oid).then(res => {
            this.applyRange.data = res.data.data;
        })
        console.log("success");
        this.applyRange.display = true;
    },
    applyRangeClose(){
      this.applyRange.data = [];
      this.applyRange.display = false;
    }
  },
}
</script>

<style lang="scss">

.applyRangeTable > .el-card:nth-of-type(2) > .el-card__body > .avue-crud__menu{
    display: none !important;
}
</style>