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

@@ -2,142 +2,155 @@
  <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>
        <avue-crud ref="crud" v-model="form" :data="data" :option="option" :page.sync="page"
                   :permission="permissionList"
                   style="height: calc(100vh - 148px)"
                   @on-load="onLoad" @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="menuLeft">
            <el-button size="small"
              type="primary"
              icon="el-icon-plus"
              @click="addSave">新&nbsp;&nbsp;增
          <template slot="menu" slot-scope="{row,index}">
            <el-button v-if="permissionList.editBtn" icon="el-icon-edit" size="small" type="text"
                       @click="updateSave(row,index)">编辑
            </el-button>
            <el-button size="small"
                       plain
                       type="primary"
                       icon="el-icon-zoom-in"
                       @click="applyRangeOpen">查看使用范围
            <el-button v-if="permissionList.delBtn" icon="el-icon-delete" size="small" type="text"
                       @click="deleteSave(row,index)">删除
            </el-button>
          </template>
          <template slot="menuLeft">
            <div>
              <el-button v-if="permissionList.addBtn" icon="el-icon-plus" size="small" type="primary" @click="addSave">新&nbsp;&nbsp;增
              </el-button>
              <el-button v-if="permissionList.apply" icon="el-icon-zoom-in" plain size="small" type="primary"
                         @click="applyRangeOpen">查看使用范围
              </el-button>
              <span style="width: 200px;display: inline-block">
                <el-select slot="prepend" v-model="oriValue" placeholder="请选择" size="small">
                <el-option v-for="item in oriData" :key="item.prop" :label="item.label" :value="item.prop"
                ></el-option>
              </el-select>
            </span>
              <span>
                 <el-input v-model="searchId" class="attrSearch" clearable placeholder="请输入内容"
                           prefix-icon="el-icon-search"
                           size="small" type="text" @change="doSearch"></el-input>
              <el-button icon="el-icon-search" plain size="small" type="primary" @click="doSearch">&nbsp;搜索</el-button>
              </span>
            </div>
          </template>
          <template slot="typeValue" slot-scope="{row}">
            <el-tag>{{ row.typeValue }}</el-tag>
          </template>
        </avue-crud>
        <el-dialog :visible.sync="applyRange.display" append-to-body :title="applyRange.title" width="600px"
        <!-- <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> -->
        <Versionpackage ref="applyRange" :rangeData="applyRangeData"></Versionpackage>
      </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>
        <div style="height: 44vh">
          <el-descriptions :column="1" border class="margin-top" size="medium" 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>
              {{ 'true' == 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>
        <div style="  height: 40vh">
          <el-descriptions :column="1" border class="margin-top" size="medium" title="属性配置"></el-descriptions>
          <el-tabs v-model="itemForm.activeName" stretch="true" style="height:235px" @tab-click="handleClick">
            <el-tab-pane label="参照" name="referTab">
              <el-descriptions :column="1" border class="margin-top" size="medium">
                <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 :column="1" :size="small" border class="margin-top">
                <el-descriptions-item>
                  <template slot="label">
                    使用枚举
                  </template>
                  {{ itemForm.itemData.usingDict ? '是' : '否' }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    枚举类型
                  </template>
                  {{ itemForm.itemData.dictValue }}
                </el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>
          </el-tabs>
        </div>
      </basic-container>
    </el-aside>
    <originalAdd ref="originalAdd" :attribute="attribute" @refreshTable="refreshChange"></originalAdd>
    <originalAdd ref="originalAdd" :attribute="editAttribute" @refreshTable="refreshChange"></originalAdd>
  </el-container>
</template>

@@ -148,173 +161,191 @@
  add,
  update, getPage, getApplyRange
} from "@/api/omd/OmdAttribute";
import Versionpackage from "./Versionpackage.vue";
import {getDictionary} from "@/api/omd/enum";
import {mapGetters} from "vuex";

export default {
  name: "original",
  data() {
    return {  
    return {
      oriData: [
        {
          label: "属性编号",
          prop: "id",
          align: "left",
          display: false,
          width: 200,
          required: true
        }, {
          label: "属性名称",
          prop: "name",
          align: "left",
          display: false
        }
      ],
      oriValue: "id",
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 100
      },
      selectRow: '',
      selectRow: "",
      data: [],
      form:{},
      form: {},
      attribute: {
        nullable: true
      },
      editAttribute: {},
      applyRangeData: [],
      option: {
        height: "550px",
        headerAlign: 'center',
        height: 'auto',
        calcHeight: 20,
        headerAlign: "center",
        border: true,
        index: true,
        rowKey: 'id',
        rowKey: "id",
        tabs: true,
        stripe:true,
        stripe: true,
        indexFixed: false,
        menuWidth: 150,
        highlightCurrentRow: true,
        addBtn:false,
        editBtn:false,
        delBtn:false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        columnBtn: false,
        column: [{
            label: '选择',
            prop: 'radio',
            width: 60,
            hide: false,
            display: false
          },
          {
            label: '属性编号',
            prop: 'id',
            align: 'left',
            display: false,
            width: 200,
            required: true
          label: "选择",
          prop: "radio",
          width: 60,
          hide: false,
          display: false
        }, {
          label: "属性编号",
          prop: "id",
          align: "left",
          display: false,
          width: 200,
          required: true
        }, {
          label: "属性名称",
          prop: "name",
          align: "left",
          display: false
        },/* {
          label: "标签",
          prop: "hashtag",
          // hide: true,
          display: false
        },*/ {
          label: "是否使用枚举",
          prop: "usingDict",
          type: "switch",
          hide: true,
          labelWidth: 132,
          display: false,
          dicData: [{
            label: "是",
            value: "true"
          }, {
            label: '属性名称',
            prop: 'name',
            align: 'left',
            display: false
          },
          {
            label: '标签',
            prop: 'hashtag',
            // hide: true,
            display: false
          },
          {
            label: '是否使用枚举',
            prop: 'usingDict',
            type: 'switch',
            hide: true,
            labelWidth: 132,
            display: false,
            dicData: [{
              label: '是',
              value: 'true'
            }, {
              label: '否',
              value: 'false'
            }]
          },
          {
            label: '属性类型',
            prop: 'typeValue',
            display: false,
            // hide: true
          },
          {
            label: '默认值',
            prop: 'defaultValue',
            display: false
          },
          {
            label: '允许为空',
            prop: 'nullable',
            type: 'switch',
            display: false,
            hide: true,
            labelWidth: 132,
            dicData: [{
              label: '否',
              value: 'false'
            }, {
              label: '是',
              value: 'true'
            }]
          },
          {
            label: "长度",
            prop: "maxLength",
            hide: true,
            display: false
          },
          {
            label: '描述',
            prop: 'description',
            type: "textarea",
            display: false
          },
            label: "否",
            value: "false"
          }]
        }, {
          label: "属性类型",
          prop: "typeValue",
          display: false,
          // hide: true
        }, {
          label: "默认值",
          prop: "defaultValue",
          display: false
        }, {
          label: "允许为空",
          prop: "nullable",
          type: "switch",
          display: false,
          hide: true,
          labelWidth: 132,
          dicData: [{
            label: "否",
            value: "false"
          }, {
            label: "是",
            value: "true"
          }]
        }, {
          label: "长度",
          prop: "maxLength",
          hide: true,
          display: false
        }, {
          label: "描述",
          prop: "description",
          type: "textarea",
          display: false
        },
        ]
      },
      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,
      },
      itemForm:{
      itemForm: {
        itemData: {},
        activeName: 'referTab',
        form:{}
        activeName: "referTab",
        enumInitFlag: false,
        referInitFlag: false,
        form: {}
      },
      searchId: '',
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.modeling_original.original_add, false),
        apply: this.vaildData(this.permission.modeling_original.original_applyopen, false),
        delBtn: this.vaildData(this.permission.modeling_original.original_delete, false),
        editBtn: this.vaildData(this.permission.modeling_original.original_edit, false),
      }
    }
    },
  },
  created() {
    
  },
  methods: {
    refreshChange() {
      this.onLoad(this.pageParent, this.query);
    },
    addSave(){
    addSave() {
      this.$refs.originalAdd.showSubmitDialog = true;
      this.$refs.originalAdd.attribute = {};
      const newAttr = {};
      newAttr.nullable = true;
      this.$refs.originalAdd.attribute = newAttr;
    },
    updateSave(){
    updateSave(row, index) {
      this.selectRow = index;
      var json = JSON.stringify(row);
      this.editAttribute = JSON.parse(json);
      this.editAttribute.nullable = row.nullable == 'true' ? true : false;
      this.$refs.originalAdd.attribute = this.editAttribute;
      this.$refs.originalAdd.showSubmitDialog = true;
      this.$refs.originalAdd.attribute = this.attribute;
      this.checkUsingReferDict(row);
      this.$refs.originalAdd.activeName = this.itemForm.activeName;
      this.$refs.originalAdd.enumInitFlag = this.itemForm.enumInitFlag;
      this.$refs.originalAdd.referInitFlag = this.itemForm.referInitFlag;
      // this.refreshChange()
    },
    deleteSave(){
      remove(this.itemForm.itemData).then(res => {
        this.$message.success("删除成功");
      })
    deleteSave(row, index) {
      this.$confirm("删除元数据将无法被恢复, 是否继续?", "提示", {
        iconClass: 'el-icon-question',
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showClose: true,
        type: "warning"
      }).then(() => {
        remove(row.oid).then(res => {
          this.$message.success("删除成功");
          this.refreshChange();
        });
      });
    },
    onLoad(page, params = {}) {
      this.loading = true;
@@ -323,42 +354,75 @@
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.data = res.data.data.records
        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
      this.checkUsingReferDict(row);
    },
    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;
    checkUsingReferDict(row) {
      if (row.referToId !== null && row.referToId !== "") {
        this.itemForm.activeName = 'referTab';
        this.itemForm.referInitFlag = true;
        this.itemForm.enumInitFlag = false;
      } else if (row.usingDict === 'true') {
        this.itemForm.activeName = 'enumTab';
        this.itemForm.referInitFlag = false;
        this.itemForm.enumInitFlag = true;
        getDictionary({code: row.dictCode}).then(res => {
          this.editAttribute.dictValue = res.data.data[0].label;
          this.itemForm.itemData.dictValue = this.editAttribute.dictValue;
          this.$refs.originalAdd.dictEnums = res.data.data;
        })
        this.applyRange.display = true;
      } else {
        this.itemForm.activeName = 'referTab';
        this.itemForm.referInitFlag = true;
        this.itemForm.enumInitFlag = false;
      }
    },
    applyRangeClose(){
      this.applyRange.data = [];
      this.applyRange.display = false;
    selectBtmType() {
      this.referType.display = true;
      this.referType.title = "请选择" + this.referType.value;
    },
    applyRangeOpen() {
      if (!this.selectRow && this.selectRow != 0) {
        this.$message({
          type: "warning",
          message: "请先选择属性"
        });
      }
      var oid = this.data[this.selectRow].oid;
      getApplyRange(oid).then(res => {
        this.applyRangeData = res.data.data;
        this.$refs.applyRange.rangeData = this.applyRangeData;
        this.$refs.applyRange.showDialog = true;

      });
    },
    doSearch() {

      var params = {[this.oriValue + "_like"]: this.searchId};
      this.onLoad(this.page, params);
    }
  },
  components: {Versionpackage}
}
</script>

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

.attrSearch {
  width: 201px;
}

.attrSearch > .el-input__inner {
  width: 200px;
}
</style>