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

@@ -1,549 +1,364 @@
<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="hideboxForm">
        <avue-form :option="option.codomainoption"></avue-form>
        <div v-if="tablefalge">
          <el-input style="width: 140px;margin-left: 300px"></el-input>
          <el-button style="margin-left: 15px" type="primary">搜索</el-button>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            max-height="510"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>

            <el-table-column
              prop="name"
              label="业务类型名"
            >
            </el-table-column>
            <el-table-column
              prop="label"
              label="标签"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="father"
              label="父类"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="rules"
              label="版本规则"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="cycle"
              label="生命周期"
              show-overflow-tooltip>
            </el-table-column>
          </el-table>
          <el-button style="margin-left: 320px;margin-top: 13px" type="primary">确定</el-button>
          <el-button>取消</el-button>
        </div>
        <div  v-if="!tablefalge">
          <el-input style="width: 140px;margin-left: 300px"></el-input>
          <el-button style="margin-left: 15px" type="primary">搜索</el-button>
          <el-table
            :data="tableDatas"
            stripe
            style="width: 100%">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="name"
              label="链接类型">
            </el-table-column>
          </el-table>
          <el-button style="margin-left: 320px;margin-top: 13px" type="primary">确定</el-button>
          <el-button>取消</el-button>
        </div>

<!--        <div v-if="tablefalge">-->
<!--          <el-button style="margin-left: 320px;margin-top: 13px" type="primary">确定</el-button>-->
<!--          <el-button>取消</el-button>-->
<!--        </div>-->
      </template>

    </avue-crud>


  </basic-container>
  <el-container>
    <el-main>
      <basic-container>
        <avue-crud v-model="form" 
          ref="crud" 
          :option="option" 
          :data="data" 
          @on-load="onLoad" 
          :page.sync="page"
          @refresh-change="refreshChange" 
          @row-click="rowClick">
               <template slot="radio"
                  slot-scope="{row}">
                      <el-radio v-model="selectRow"
                          :label="row.$index">&nbsp;
                      </el-radio>
                </template>
          <template slot="menu">
             <el-button icon="el-icon-edit" size="small" type="text" @click="updateSave">编辑</el-button>
             <el-button icon="el-icon-delete" size="small" type="text" @click="deleteSave">删除</el-button>
          </template>
         <template slot="menuLeft">
            <el-button size="small"
              type="primary"
              icon="el-icon-plus"
              @click="addSave">新&nbsp;&nbsp;增
            </el-button>
            <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>
      </basic-container>
    </el-main>
    <el-aside>
      <basic-container class="itemForm">
            <el-descriptions class="margin-top" :column="1" size="medium" border title="属性项">
              <el-descriptions-item>
                <template slot="label">
                  属性编号
                </template>
                {{ itemForm.itemData.id }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  属性名称
                </template>
                {{ itemForm.itemData.name }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  属性类型
                </template>
                {{ itemForm.itemData.typeValue }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  标签
                </template>
                {{ itemForm.itemData.hashtag }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  默认值
                </template>
                {{ itemForm.itemData.defaultValue }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  允许为空
                </template>
                {{ itemForm.itemData.nullable }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  长度
                </template>
                {{ itemForm.itemData.maxLength }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  描述
                </template>
                {{ itemForm.itemData.description }}
              </el-descriptions-item>
            </el-descriptions>
            <div style="height:15px"></div>
        <el-descriptions class="margin-top" :column="1" size="medium" border title="属性配置"></el-descriptions>
        <el-tabs v-model="itemForm.activeName" @tab-click="handleClick" stretch="true" style="height:235px">
        <el-tab-pane label="参照" name="referTab">
            <el-descriptions class="margin-top" :column="1" size="medium" border>
              <el-descriptions-item>
                <template slot="label">
                  使用参照
                </template>
                {{ itemForm.itemData.referTypeValue ? '是' : '否' }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  参照类型
                </template>
                {{ itemForm.itemData.referTypeValue }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  参照名称
                </template>
                {{ itemForm.itemData.referToName }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="枚举" name="enumTab">
            <el-descriptions class="margin-top" :column="1" :size="small" border>
              <el-descriptions-item>
                <template slot="label">
                  使用枚举
                </template>
                {{ itemForm.itemData.usingDict ? '是' : '否' }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  枚举类型
                </template>
                {{ itemForm.itemData.dictCode }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
      </basic-container>
    </el-aside>
    <originalAdd ref="originalAdd" :attribute="attribute" @refreshTable="refreshChange"></originalAdd>
  </el-container>
</template>

<script>
export default {
  name: "passwords.vue",
  data() {
    return {
      tablefalge:false,
      tableDatas: [ {
        name: 'input',
      }, {
        name: 'checkbox',
      }, {
        name: 'switch',
      }],
      tableData: [{
        name: 'abc',
        label: '客户',
        father:'客户',
        rules:'规则',
        cycle:'cba'
      },
        {
          name: 'abc',
          label: '客户',
          father:'客户',
          rules:'规则',
          cycle:'cba'
        },
        {
          name: 'abc',
          label: '客户',
          father:'客户',
          rules:'规则',
          cycle:'cba'
        },
        {
          name: 'abc',
          label: '客户',
          father:'客户',
          rules:'规则',
          cycle:'cba'
        },
        {
          name: 'abc',
          label: '客户',
          father:'客户',
          rules:'规则',
          cycle:'cba'
        },
        {
          name: 'abc',
          label: '客户',
          father:'客户',
          rules:'规则',
          cycle:'cba'
        },
        {
          name: 'abc',
          label: '客户',
          father:'客户',
          rules:'规则',
          cycle:'cba'
        },
        {
          name: 'abc',
          label: '客户',
          father:'客户',
          rules:'规则',
          cycle:'cba'
        },   {
          name: 'abc',
          label: '客户',
          father:'客户',
          rules:'规则',
          cycle:'cba'
        },
import {
  getList,
  remove,
  add,
  update, getPage, getApplyRange
} from "@/api/omd/OmdAttribute";

        {
          name: 'abc',
          label: '客户',
          father:'客户',
          rules:'规则',
          cycle:'cba'
        },],
      form:{},
export default {
  name: "original",
  data() {
    return {  
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 100
      },
      appflage:true,
      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,
        dialogType:'drawer',
      selectRow: '',
      data: [],
      form:{},
      attribute: {
        nullable: true
      },
      option: {
        height: "550px",
        headerAlign: 'center',
        border: true,
        index: true,
        rowKey:'id',
        rowKey: 'id',
        tabs: true,
        codomainoption:{
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              placeholder:"请选择值域",
              span:24,
              label: '值域',
              prop: 'select',
              type:"select",
              value:0,
              change:this.selectChange,
              dicData:[
                {
                  label:"业务类型",
                  value:0
                },
                {
                  label:"链接类型",
                  value:1
                },
              ]},
            {
              label: "选择版本",
              prop:"banben",
              type:'select',
              display:false,
              dicData: [
                {
                  label: '当前版本次',
                  value:0
                },
                {
                  label: '最新版本次',
                  value:1
                }
              ]
            }
          ]
        },
        column:[
        stripe:true,
        indexFixed: false,
        menuWidth: 150,
        highlightCurrentRow: true,
        addBtn:false,
        editBtn:false,
        delBtn:false,
        column: [{
            label: '选择',
            prop: 'radio',
            width: 60,
            hide: false,
            display: false
          },
          {
            label: '属性名',
            label: '属性编号',
            prop: 'id',
            align: 'left',
            display: false,
            width: 200,
            required: true
          }, {
            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: 'true'
            }, {
              label: '否',
              value: 'false'
            }]
          },
          {
            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: 'false'
            }, {
              label: '是',
              value: 'true'
            }]
          },
          {
            label: "长度",
            prop: "length",
            prop: "maxLength",
            hide: true,
            display: false
          },
          {
            label: '描述',
            prop: 'desc',
            type:"textarea",
            prop: 'description',
            type: "textarea",
            display: false
          },
        ],
        group:[
          {
            label: '属性项',
            prop:"index",
            column: [
              {
                label: '属性名',
                prop: 'name',
        ]
      },
      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: 'tag',
                hide:true
                label: '业务类型名称',
                prop: 'name',
                align: 'left',
              },
              {
                label: '属性类型',
                prop: 'prop',
                type:"select",
                dicData:[
                  {
                    label:"测试1",
                    value:0
                  },
                  {
                    label:"测试2",
                    value:1
                  },
                  {
                    label:"测试3",
                    value:2
                  }
                ]
              },
              {
                label: '默认值',
                prop: 'admin',
              },
              {
                label: '允许为空',
                prop: 'isDefault',
                type: 'switch',
                hide:true,
                labelWidth: 132,
                dicData:[{
                  label:'不允许',
                  value:0
                },{
                  label:'允许',
                  value:1
                }]
              },
              {
                label: "长度",
                prop: "length",
                hide: true
              },
              {
                label: '描述',
                prop: 'desc',
                type:"textarea"
              },
            ]
          },
          {
            label: '值域',
            column:[
              {
                prop: 'hidebox',
                formsolt:true,
                hide: true,
                span:24,
              },
            ]
          },
          {
            label: '枚举',
            column: [
              {
                label: '是否使用枚举',
                prop: 'isnot',
                type: 'switch',
                hide:true,
                labelWidth: 132,
                span:8,
                dicData:[{
                  label:'是',
                  value:0
                },{
                  label:'否',
                  value:1
                }]
              },
              {
                prop:'text',
                type:'input',
                placeholder:'请输入内容',
                hide:true,
                display:false
              },
              {
                prop: 'enumerationSelect',
                type: 'select',
                placeholder: '请选择',
                hide: true,
                span:12,
                dicData: [
                  {
                    label: 'a',
                    value: 0
                  },
                  {
                    label: 'b',
                    value: 1
                  },
                  {
                    label: 'c',
                    value: 2
                  }
                ]
              },
              {
                label: '描述',
                prop: 'endesc',
                type:"textarea",
                labelWidth: 132,
              },
            ]
          }
        ]
          ]
        },
        data: [],
        display: false,
      },

      itemForm:{
        itemData: {},
        activeName: 'referTab',
        form:{}
      }
    }
  },


  created() {
    
  },
  methods:{
    selectChange(val){
      console.log(val)
      this.tablefalge=!this.tablefalge
      if(val.value == 0){
        this.tablefalge=true
        this.option.codomainoption.column[1].display=false
      }else if(val.value == null || val.value == 1){
        this.tablefalge=false;
        this.option.codomainoption.column[1].display=true
      }
  methods: {
    refreshChange() {
      this.onLoad(this.pageParent, this.query);
    },
    beforeOpen (done, type) {
          if (['view', 'edit'].includes(type)) {
            // 查看和编辑逻辑
            console.log("编辑")
          } else {
            //新增逻辑
            this.tablefalge=false
            console.log(this.tablefalge)
            console.log("新增")
          }
          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
    //   // })
    // }
  }

    addSave(){
      this.$refs.originalAdd.showSubmitDialog = true;
      this.$refs.originalAdd.attribute = {};
    },
    updateSave(){
      this.$refs.originalAdd.showSubmitDialog = true;
      this.$refs.originalAdd.attribute = this.attribute;
    },
    deleteSave(){
      remove(this.itemForm.itemData).then(res => {
        this.$message.success("删除成功");
      })
    },
    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.itemForm.itemData = row;
      this.selectRow = row.$index;
      this.attribute = row;
    }
    ,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;
        getApplyRange(oid).then(res => {
            this.applyRange.data = res.data.data;
        })
        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>