Source/plt-web/plt-web-ui/src/views/modelingMenu/modeling/businessType/index.vue

@@ -46,34 +46,555 @@
        </div>
      </basic-container>
    </el-aside>
    <el-main>
      <basic-container>
        <div style="display: flex;justify-content: center; height: 230px">
          <div class="descBox" style="max-height: 100px">
            <el-descriptions :column="1" border class="margin-top" size="medium" title="属性信息">
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  名称
                </template>
                <el-tag v-if="nodeRow.id">{{ nodeRow.id }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  标签
                </template>
                <el-tag v-if="nodeRow.name">{{ nodeRow.name }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  实现类
                </template>
                <el-tooltip v-if="nodeRow.implClass" :content="nodeRow.implClass" class="item" effect="dark"
                            placement="top-start">
                  <el-tag style="max-width: 250px;overflow: hidden">{{ nodeRow.implClass }}
                  </el-tag>
                </el-tooltip>
              </el-descriptions-item>
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  描述
                </template>
                <span v-if="nodeRow.description">{{ nodeRow.description }}</span>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="descBox">
            <el-descriptions :column="1" border class="margin-top" size="medium" title="版本规则">
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  版本规则
                </template>
                <el-tag v-if="nodeRow.revLevel"
                        :type="nodeRow.revLevel === '0' ? 'warning' : nodeRow.revLevel === '1' ? '' : 'success'">
                  {{
                    nodeRow.revLevel === '0'
                      ? '不可修订'
                      : nodeRow.revLevel === '1'
                      ? '采用一级版本管理'
                      : '采用二级版本管理'
                  }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item v-if="nodeRow.revLevel !== '0'" :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  版本号规则
                </template>
                <el-tag v-if="nodeRow.revisionRuleId">{{ nodeRow.revisionRuleId }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item v-if="nodeRow.revLevel !== '0'" :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  分隔符
                </template>
                <el-tag v-if="nodeRow.delimiter">{{ nodeRow.delimiter }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item v-if="nodeRow.revLevel !== '0' && nodeRow.revLevel !== '1'"
                                    :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  版次号规则
                </template>
                <el-tag v-if="nodeRow.revisionRuleId"
                        :type="nodeRow.revisionRuleId === '0' ? 'warning' : nodeRow.revisionRuleId === '1' ? '' : 'success'">
                  {{
                    nodeRow.versionRule === '0'
                      ? '1.2.3...'
                      : nodeRow.versionRule === '1'
                      ? 'a.b.c...'
                      : '0.1.2...'
                  }}
                </el-tag>
              </el-descriptions-item>

            </el-descriptions>
          </div>
          <div class="descBox">
            <el-descriptions :column="1" border class="margin-top" size="medium" title="生命周期">
              <el-descriptions-item :contentStyle="descriptionOption.contentStyle"
                                    :labelStyle="descriptionOption.labelStyle">
                <template slot="label">
                  生命周期
                </template>
                <el-tag v-if="nodeRow.lifeCycleId">{{ nodeRow.lifeCycleId }}</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
        <div style="margin-top: 30px">
          <h3>属性列表</h3>
          <avue-crud
            :data="attrData"
            :option="attrOption">
          </avue-crud>
        </div>
      </basic-container>
    </el-main>

    <!-- 新增 && 编辑 -->
    <el-dialog
      v-dialogDrag
      :title="title === 'add' ? '创建' : '修改'"
      :visible.sync="visible"
      append-to-body="true"
      class="avue-dialog"
      width="75%"
      @close="addDialogClose">
      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
        <div class="dialogForm">
          <div class="leftForm">
            <el-form-item label="类型名称：" prop="name">
              <el-input v-model="form.id" :readOnly="title === 'edit'"></el-input>
            </el-form-item>
            <el-form-item label="标签：">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="继承自：">
              <el-input v-model="form.fName" :readOnly="title === 'edit'"></el-input>
            </el-form-item>
            <el-form-item label="实现类：">
              <el-input v-model="form.implClass"></el-input>
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="form.description" :rows="2" type="textarea"></el-input>
            </el-form-item>
          </div>
          <div class="centerForm">
            <el-form-item label="版本规则：" label-width="100px" prop="revLevel">
              <el-select v-model="form.revLevel">
                <el-option label="不可修订" value="0"></el-option>
                <el-option label="采用一级版本管理" value="1"></el-option>
                <el-option label="采用二级版本管理" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="form.revLevel !== '0'" label="版本号规则：" label-width="100px" prop="revisionRuleName">
              <div style="display: flex;gap: 5px;align-items: center">
                <el-input v-model="form.revisionRuleId" :readOnly="true"></el-input>
                <el-button plain size="small" style="margin-left: 5px;height: 30px" type="success" @click="versionAddHandler">添加</el-button>
                <el-switch
                  style="width: 300px"
                  v-model="form.inputRevisionFlag"
                  active-text="手工输入">
                </el-switch>
              </div>
            </el-form-item>
            <el-form-item v-if="form.revLevel !== '0'" label="分隔符：" label-width="100px" prop="delimiter">
              <el-select v-model="form.delimiter" clearable>
                <el-option label="." value="."></el-option>
                <el-option label="-" value="-"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="form.revLevel !== '0' && form.revLevel !== '1'" label="版次号规则：" label-width="100px"
                          prop="revLevel">
              <el-select v-model="form.versionRule" clearable>
                <el-option label="1.2.3..." value="1.2.3..."></el-option>
                <el-option label="a.b.c..." value="a.b.c..."></el-option>
                <el-option label="0.1.2..." value="0.1.2..."></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="rightForm">
            <el-form-item label="生命周期：" label-width="138px" prop="revLevel">
              <div style="display: flex;gap: 5px;align-items: center">
                <el-input v-model="form.lifeCycleId" :readOnly="true"></el-input>
                <el-button plain size="small" style="margin-left: 5px;height: 30px" type="success" @click="lifeAddHandler('input')">添加</el-button>
              </div>
            </el-form-item>

            <el-form-item label="备选生命周期列表：" label-width="138px">
              <div style="display: flex; align-items: center">
                <div style="height: 200px; width: 280px; border: 1px solid #bdbbbb;overflow-y: auto">
                  <!-- 内容 -->
                  <el-table
                    :data="dialogLifeTable"
                    :show-header="false"
                    style="width: 100%">
                    <el-table-column
                      align="center"
                      prop="id">
                    </el-table-column>
                    <el-table-column
                      fixed="right"
                      label="操作"
                      width="60">
                      <template slot-scope="scope">
                        <el-button
                          size="small"
                          style="color:#F56C6C;"
                          type="text"
                          @click.native.prevent="dialogDeleteLifeTable(scope.$index)">
                          移除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-button plain size="mini" style="margin-left: 5px" type="success"
                           @click="lifeAddHandler('table')">添加
                </el-button>

              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div class="bottomForm">
        <h3>属性池列表</h3>
        <avue-crud
          :data="dialogAttrData"
          :option="dialogAttrOption">
          <template slot="menuLeft">
            <el-button icon="el-icon-plus" size="small" type="primary" @click="addDialogClickHandler">创建</el-button>
          </template>
        </avue-crud>
      </div>
      <span slot="footer" class="dialog-footer">
         <el-button @click="addDialogClose">取 消</el-button>
         <el-button type="primary" @click="addDialogSavaHandler">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 属性池添加 -->
    <el-dialog
      v-dialogDrag
      :visible.sync="attrPollDialogVisible"
      append-to-body="true"
      class="avue-dialog"
      title="属性池"
      width="60%"
      @close="dialogAttrClose"
    >
      <avue-crud
        :key="dialogAttrReload"
        ref="dialogAttrCrud"
        :data="dialogAttrSaveData"
        :option="dialogAttrSaveOption"
        :page.sync="attrPage"
        :table-loading="dialogAttrLoading"
        @selection-change="dialogAttrSelectChange"
        @row-click="dialogAttrRowClickHandler"
        @size-change="attrSizeChange"
        @current-change="attrCurrentChange"
        @search-change="attrHandleSearch"
        @search-reset="attrHandleReset"
      >
      </avue-crud>
      <span slot="footer" class="dialog-footer">
         <el-button @click="dialogAttrClose">取 消</el-button>
         <el-button type="primary" @click="dialogAttrAddClickHandler">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog
      v-dialogDrag
      :visible.sync="dialogVersionVisible"
      append-to-body="true"
      class="avue-dialog"
      title="版本号规则"
      width="60%"
    >

      <avue-crud
        :key="dialogVersionKey"
        ref="dialogAttrCrud"
        :data="dialogVersionData"
        :option="dialogVersionOption"
        :table-loading="dialogVersionLoading"
        @row-click="dialogVersionRowClick"
        @search-change="versionHandleSearch"
        @search-reset="versionHandleReset"
      >
      </avue-crud>

      <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVersionVisible = false">取 消</el-button>
         <el-button type="primary" @click="dialogVersionAddClickHandler">确 定</el-button>
        </span>

    </el-dialog>

    <!-- 生命周期 -->
    <el-dialog
      v-dialogDrag
      :visible.sync="dialogLfeVisible"
      append-to-body="true"
      class="avue-dialog"
      title="生命周期模板"
      width="60%"
    >
      <avue-crud
        :key="dialogLifeKey"
        ref="dialogAttrCrud"
        :data="dialogLifeData"
        :option="dialogLifeOption"
        :table-loading="dialogLifeLoading"
        @row-click="dialogLifeRowClick"
        @search-change="lifeHandleSearch"
        @search-reset="lifeHandleReset"
      >
      </avue-crud>
      <span slot="footer" class="dialog-footer">
         <el-button @click="dialogLfeVisible = false">取 消</el-button>
         <el-button type="primary" @click="dialogLifeAddClickHandler">确 定</el-button>
        </span>

    </el-dialog>

  </el-container>
</template>

<script>
import basicOption from '@/util/basic-option'
import {getBizTypes} from "@/api/modeling/businessType/api"
import {gridAttribute} from "@/api/modeling/attributePool/api";
import func from "@/util/func";
import {getVersionRuleAllList} from "@/api/modeling/version/api";
import {gridLifeCycle} from "@/api/modeling/lifeCycle/api";

export default {
  name: "index",
  data() {
    return {
      dialogLifeDefalutData:[], // 查询重置默认数据
      lifeType:'',
      dialogLifeTable:[],
      dialogLifeSaveRow:{},
      dialogLifeKey:Math.random(),
      dialogLifeData:[],
      dialogLifeOption:{
        ...basicOption,
        addBtn:false,
        selection:false,
        refreshBtn:false,
        menu:false,
        height:450,
        searchMenuSpan: 8,
        highlightCurrentRow:true,
        column:[
          {
            label:'生命周期模板名',
            prop:'id',
            searchLabelWidth:120,
            search:true
          }
        ]
      },
      dialogLifeLoading:false,
      dialogLfeVisible:false,
      dialogVersionDefalutData:[], // 查询重置默认数据
      dialogSwitchValue:false,
      dialogVersionSaveRow:{},
      dialogVersionVisible:false,
      dialogVersionKey:Math.random(),
      dialogVersionData:[],
      dialogVersionOption:{
        ...basicOption,
        addBtn:false,
        selection:false,
        refreshBtn:false,
        menu:false,
        height:450,
        searchMenuSpan: 8,
        highlightCurrentRow:true,
        // calcHeight: 100,
        column:[
          {
            label:'版本号规则',
            prop:'id',
            searchLabelWidth:110,
            search:true
          }
        ]
      },
      dialogVersionLoading:false,
      dialogAttrSelectList: [],
      searchAttrParams: {},
      dialogAttrLoading: false,
      dialogAttrReload: Math.random(),
      attrPage: {
        currentPage: 1,
        pageSize: 30,
        total: 0,
        pageSizes: [30, 50, 100, 200],
      },
      dialogAttrSaveOption: {
        ...basicOption,
        addBtn: false,
        menu: false,
        refreshBtn: false,
        index: false,
        highlightCurrentRow: true,
        height: 450,
        searchMenuSpan: 8,
        column: [
          {
            label: '属性名',
            prop: 'id',
            sortable: true,
            search: true,
          },
          {
            label: '属性类型',
            prop: 'attributeDataType',
            sortable: true,
          },
          {
            label: '初始值',
            prop: 'defaultValue',
            sortable: true,
          },
          {
            label: '说明',
            prop: 'description',
            sortable: true,
            overHidden: true
          }
        ]
      },
      dialogAttrSaveData: [],
      attrPollDialogVisible: false,
      rules: [],
      dialogAttrData: [],
      dialogAttrOption: {
        ...basicOption,
        editBtn: false,
        refreshBtn: false,
        selection: false,
        height: 210,
        addBtn: false,
        // index:false,
        column: [
          {
            label: '属性名',
            prop: 'id',
            sortable: true,
          },
          {
            label: '属性类型',
            prop: 'attributeDataType',
            sortable: true,
          },
          {
            label: '初始值',
            prop: 'defaultValue',
            sortable: true,
          },
          {
            label: '说明',
            prop: 'description',
            overHidden: true
          }
        ]
      },
      title: '',
      visible: false,
      attrData: [],
      attrOption: {
        ...basicOption,
        calcHeight: -40,
        addBtn: false,
        menu: false,
        index: false,
        selection: false,
        refreshBtn: false,
        column: [
          {
            prop: 'id',
            label: '属性名',
            sortable: true
          },
          {
            prop: 'btmTypeId',
            label: '业务类型',
            sortable: true
          },
          {
            prop: 'attrDataType',
            label: '属性类型',
            sortable: true
          },
          {
            prop: 'defaultValue',
            label: '默认值',
            sortable: true
          },
          {
            prop: 'description',
            label: '说明',
            overHidden: true
          }
        ]
      },
      form: {
        id:'', // 类型名称
        name:'', // 标签
        fName:'', // 继承自
        implClass:'', // 实现类
        description:'', // 描述
        revLevel:'', // 版本规则
        revisionRuleId:'',// 版本号规则
        inputRevisionFlag:'', // 手工输入
        versionRule:'', // 版次号规则
        lifeCycleId:'', // 生命周期
        subLifeCycleId:'', // 生命周期备选列表
      },
      nodeRow: {},
      treeOption: {
        height: 'auto',
        defaultExpandAll: false,
        menu: false,
        addBtn: false,
        props: {
          label: 'name',
          value: 'name',
          label: 'id',
          value: 'id',
          children: 'children'
        }
      },
      treeData: []
      treeData: [],
      descriptionOption: {
        labelStyle: 'text-align:center;width:100px;',
        contentStyle: 'max-width:200px;text-align:center;word-break;break-all;'
      },
      icons: {
        id: 'el-icon-finished',
        name: 'el-icon-tickets',
        desc: 'el-icon-chat-line-square'
      },
    }
  },
  created() {
    this.getTreeList();
  },
  methods: {
    //树表查询
    getTreeList() {
      getBizTypes().then(res => {
        const data = res.data.data.map(item => {
@@ -81,13 +602,278 @@
        });
        this.treeData = data;
      })
    },

    // 树点击
    nodeClick(row) {
      this.attrData = JSON.parse(row.attributes);
      this.nodeRow = row;
    },

    // 创建按钮
    addClickHandler() {
      this.title = 'add';
      this.visible = true;
    },

    // 对话框 属性池列表增加按钮
    addDialogClickHandler() {
      this.dialogAttrLoading = true;
      this.attrPollDialogVisible = true;
      this.dialogAttrReload = Math.random(); // 强制刷新表格 解决表格错行
      this.getAttrDialogDta();
    },

    // 查询属性池列表数据
    getAttrDialogDta() {
      gridAttribute(this.attrPage.currentPage, this.attrPage.pageSize, this.searchAttrParams).then(res => {
        const data = res.data.data;
        this.dialogAttrSaveData = data;
        this.attrPage.total = res.data.total;
        this.dialogAttrLoading = false;
      }).catch(err => {
        this.$message.error(err);
      });
    },

    // 新增属性池列表关闭对话框
    dialogAttrClose() {
      this.attrPollDialogVisible = false;
      this.searchAttrParams = {};
    },

    // 添加属性池表格选择框
    dialogAttrSelectChange(row) {
      this.dialogAttrSelectList = row;
    },

    // 添加属性池 行点击
    dialogAttrRowClickHandler(row) {

      func.rowClickHandler(
        row,
        this.$refs.dialogAttrCrud,
        this.attrLastIndex,
        (newIndex) => {
          this.attrLastIndex = newIndex;
        },
        () => {
          this.selectList = [];
        }
      );
    },

    //添加属性池 条数
    attrSizeChange(val) {
      this.attrPage.pageSize = val;
      this.getAttrDialogDta()
    },

    //添加属性池 页码
    attrCurrentChange(val) {
      this.attrPage.currentPage = val;
      this.getAttrDialogDta();
    },

    //添加属性池 搜索
    attrHandleSearch(params, done) {
      if (func.isEmptyObject(params)) {
        this.searchAttrParams = {};
      } else {
        this.searchAttrParams = {
          "conditionMap[id]": "*" + params.id + "*"
        };
      }

      this.getAttrDialogDta();
      done();
    },

    //添加属性池 清空搜索
    attrHandleReset() {
      this.searchAttrParams = {};
      this.getAttrDialogDta();
    },

    // 添加属性池 保存
    dialogAttrAddClickHandler() {
      let hasDuplicate = false;

      // 先创建一个临时数组来存储不重复的项
      const newItems = [];

      this.dialogAttrSelectList.forEach(item => {
        const exists = this.dialogAttrData.some(existingItem => existingItem.id === item.id);

        if (exists) {
          hasDuplicate = true;
          return;
        }

        // 如果没有重复项，则将该项添加到临时数组中
        newItems.push({
          id: item.id,
          attributeDataType: item.attributeDataType,
          defaultValue: item.defaultValue,
          description: item.description
        });
      });

      if (hasDuplicate) {
        this.$message.error('请检查是否有添加重复项！');
      } else {
        // 如果没有重复项，将新项添加到 dialogAttrData
        this.dialogAttrData.push(...newItems);
        this.attrPollDialogVisible = false;
      }
    },

    // 版本规则管理添加
    versionAddHandler(){
      this.dialogVersionVisible = true;
      this.dialogVersionKey = Math.random(); // 打开时刷新表格避免表格错行
      this.dialogVersionLoading = true;
      getVersionRuleAllList().then(res => {
        const data = res.data.data.map(item => {
          return {
            id:item.id
          }
        });
        this.dialogVersionData = data;
        this.dialogVersionDefalutData = data;
        this.dialogVersionLoading = false;
      }).catch(err => {
        this.$message.error(err)
      });
    },

    // 版本规则行点击
    dialogVersionRowClick(row){
      this.dialogVersionSaveRow = row;
    },

    // 版本规则搜索
    versionHandleSearch(params,done){
      const {id} = params;

      if (!params.id) {
        this.dialogVersionData = this.dialogVersionDefalutData;
        return done();
      }
      ;

      this.dialogVersionData = this.dialogVersionDefalutData.filter(item => {
        return item.id && item.id.includes(id);
      });

      done();

    },

    // 版本管理置空
    versionHandleReset(){
      this.dialogVersionData = this.dialogVersionDefalutData;
    },

    // 版本规则保存
    dialogVersionAddClickHandler(){
      if(func.isEmptyObject(this.dialogVersionSaveRow)){
        this.$message.error('请至少选择一条数据');
        return;
      }
      this.form.revRuleName = this.dialogVersionSaveRow.id;
      this.dialogVersionVisible = false;
    },

    // 生命周期新增
    lifeAddHandler(val){
      this.dialogLfeVisible = true;
      this.dialogLifeKey = Math.random(); // 打开时刷新表格避免表格错行
      this.dialogLifeLoading = true;
      this.lifeType = val;
      gridLifeCycle().then(res => {
        const data = res.data.data.map(item => {
          return {
            id:item.id
          }
        });
        this.dialogLifeData = data;
        this.dialogLifeDefalutData = data;
        this.dialogLifeLoading = false
      }).catch(err => {
        this.$message.error(err)
      });
    },

    // 生命周期行点击
    dialogLifeRowClick(row){
      this.dialogLifeSaveRow = row;
    },

    // 生命周期保存
    dialogLifeAddClickHandler(){
      if(func.isEmptyObject(this.dialogLifeSaveRow)){
        this.$message.error('请至少选择一条数据');
        return;
      }
      if(this.lifeType === 'input'){
        this.form.lifeCycle = this.dialogLifeSaveRow.id;
      }else {
        const flag = this.dialogLifeTable.some(item => item.id === this.dialogLifeSaveRow.id);

        if (flag) {
          this.$message.error('已存在相同的数据，请添加其他数据');
          return;
        }
        this.dialogLifeTable.push(this.dialogLifeSaveRow);
      }
      this.dialogLfeVisible = false;
    },

    // 生命周期备选列表移除
    dialogDeleteLifeTable(index){
      this.dialogLifeTable.splice(index,1)
    },

    // 生命周期搜索
    lifeHandleSearch(params,done){
      const {id} = params;

      if (!params.id) {
        this.dialogLifeData = this.dialogLifeDefalutData;
        return done();
      }
      ;

      this.dialogLifeData = this.dialogLifeDefalutData.filter(item => {
        return item.id && item.id.includes(id);
      });

      done();

    },

    // 生命周期重置
    lifeHandleReset(){
      this.dialogLifeData = this.dialogLifeDefalutData;
    },

    // 新增编辑保存
    addDialogSavaHandler(){
      console.log(this.form)
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .avue-dialog .el-dialog__body{
    padding: 20px 20px 0px 20px; // 上右下左
    margin-bottom: 10px !important;
  }

  .el-scrollbar__wrap {
    overflow: auto !important;
  }
@@ -140,4 +926,23 @@
  text-align: center;
  padding-left: 4.5px;
}

.descBox {
  width: 32%;
  margin-left: 20px;
}

.dialogForm {
  display: flex;
  justify-content: space-around;
}

.dialogForm > div {
  width: 29%;
  border: 1px solid #eee;
  padding: 25px 20px 5px 10px; /* 上 右 下 左 */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}


</style>