田源
2024-01-24 3e17faf676860e7b65079bed632b552bc4be2fc1
Source/UBCS-WEB/src/components/Theme/ThemeAttrCrud.vue
@@ -3,67 +3,87 @@
    <div v-if="this.crudArrayFlag" class="app" style="display: flex;flex-wrap: wrap; display: inline-block">
      <el-button-group>
        <!--新增-->
        <el-button
          v-if="attrEditVisible == false && attrFlagChiledren==false && editOpenFlag &&  (!checkStatus || crudLCStatus=='Editing' )"
          icon="el-icon-plus" plain size="small" type="primary" @click="busineHandle">添加 {{ msg }}
        <span v-if="permissionList.busineStatus">
           <el-button
             v-if="attrEditVisible == false && attrFlagChiledren==false && editOpenFlag &&  (!checkStatus || crudLCStatus=='Editing' )"
             icon="el-icon-plus" plain size="small" type="primary" @click="busineHandle">添加 {{ msg }}
        </el-button>
        </span>
        <!--        全屏编辑-->
        <el-button
          v-if=" attrEditVisible == false && attrFlagChiledren==false && editOpenFlag&&(!checkStatus || crudLCStatus=='Editing')"
          icon="el-icon-full-screen" size="small" @click="fullscreenHandle">全屏编辑
        <span v-if="permissionList.fullscreenStatus">
            <el-button
              v-if=" attrEditVisible == false && attrFlagChiledren==false && editOpenFlag&&(!checkStatus || crudLCStatus=='Editing')"
              icon="el-icon-full-screen" size="small" @click="fullscreenHandle">全屏编辑
        </el-button>
        <!--        验证规则-->
        </span>
        <span v-if="permissionList.ruleStatus">
           <!--        验证规则-->
        <el-button v-if="(!checkStatus || crudLCStatus=='Editing' )&& editOpenFlag" icon="el-icon-info" size="small"
                   @click="ruleAddHandler">验证规则
        </el-button>
        <!--        属性分组-->
        </span>
        <span v-if="permissionList.attrStatus">
          <!--        属性分组-->
        <el-button v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag" icon="el-icon-menu" size="small"
                   @click="attrVisibleHandle">属性分组
        </el-button>
       </span>
      </el-button-group>
      <el-button-group>
        <!--    保存-->
        <span v-if="permissionList.saveStatus">
           <!--    保存-->
        <el-button v-if="(!checkStatus|| crudLCStatus=='Editing') && editOpenFlag" icon="el-icon-check" plain
                   size="small"
                   type="success" @click.prevent="addsHandler">保存
        </el-button>
        </span>
        <!--    预览排序-->
        <el-button icon="el-icon-arrow-down" size="small" @click="orderHandle">预览排序</el-button>
        <!--    删除-->
        <el-button v-if="permissionList.orderStatus" icon="el-icon-arrow-down" size="small" @click="orderHandle">预览排序
        </el-button>
        <span v-if="permissionList.removeStatus">
           <!--    删除-->
        <el-button v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag" icon="el-icon-delete" size="small"
                   @click="CrudRemove">删除
        </el-button>
        </span>
        <!--    重置-->
        <el-button icon="el-icon-refresh-right" size="small" @click="reset">重置</el-button>
        <el-button v-if="permissionList.resetStatus" icon="el-icon-refresh-right" size="small" @click="resetHandler">
          重置
        </el-button>
      </el-button-group>
      <el-button-group>
        <!--新增-->
        <!--        分类注入-->
       <span v-if="permissionList.injectStatus"><!--        分类注入-->
        <el-button v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag" icon="el-icon-magic-stick"
                   size="small" @click="injectBtn">分类注入
        </el-button>
        <!--    组合规则-->
        </el-button></span>
        <span v-if="permissionList.isShowStatus"> <!--    组合规则-->
        <el-button v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag" icon="el-icon-film" size="small"
                   @click="isShowHandler">组合规则
        </el-button>
        <!--        枚举注入-->
        </el-button></span>
        <span v-if="permissionList.enumStatus"> <!--        枚举注入-->
        <el-button v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag" icon="el-icon-c-scale-to-original"
                   size="small" @click="enmuVisHandle">枚举注入
        </el-button>
        <!--    级联属性-->
                   size="small" @click="enumVisHandle">枚举注入
        </el-button></span>
        <span v-if="permissionList.cascadStatus">
               <!--    级联属性-->
        <el-button v-if="(!checkStatus|| crudLCStatus=='Editing') && editOpenFlag" icon="el-icon-coin" size="small"
                   @click="CascadeHandle">级联属性
        </el-button>
        </span>
      </el-button-group>
      <el-button-group>
        <!--    同步到其他模板-->
        <el-button icon="el-icon-share" size="small" @click="syncHandle">同步到其他模板</el-button>
        <el-button v-if="permissionList.syncStatus" icon="el-icon-share" size="small" @click="syncHandle">同步到其他模板
        </el-button>
      </el-button-group>
      <el-button-group>
        <!--    编码申请预览-->
        <el-button icon="el-icon-view" size="small" style="" @click="applicationHandle">编码申请预览</el-button>
        <el-button v-if="permissionList.applicationStatus" icon="el-icon-view" size="small" style=""
                   @click="applicationHandle">编码申请预览
        </el-button>
      </el-button-group>
      <!-- 是否开启编辑     -->
@@ -257,7 +277,7 @@
      <!--        全屏编辑-->
      <el-dialog :before-close="escEdit" :visible.sync="attrEditVisible" append-to-body fullscreen="true">
        <attrCrud :ProData="this.ProData" :attrFlagChiledren="this.attrFlag" :crudArrayFlag="this.crudArrayFlag"
                  :editOpenFlag="editOpenFlag" :editStyleFlag="editStyleFlag"
                  :editOpenFlag="editOpenFlag" :editStyleFlag="editStyleFlag" :btnAuthList="btnAuthList"
                  @editCloseChildren="editClose"></attrCrud>
      </el-dialog>
      <!--      组合规则-->
@@ -292,7 +312,6 @@
          <el-button size="small" type="primary" @click="addVisible=false">取消</el-button>
        </div>
      </el-dialog>
      <!--      参照配置-->
      <refer-config-dialog
        :display="referConfigVisble"
@@ -301,80 +320,83 @@
      ></refer-config-dialog>
    </div>
    <el-table v-if="this.crudArrayFlag"
              ref="referAttrCrud"
              v-loading="loading"
              border
              :data="ProData"
              :height="this.tableHeight"
              style="width: 100%"
              @select="selectHandle"
              @cell-click="handleCellClicks"
              @selection-change="selectionChange"
              @row-click="rowClick"
    >
      <el-table-column
        :fixed="!editStyleFlag ? 'left' : undefined"
        type="selection" width="55">
      </el-table-column>
      <!--<el-table-column fixed label="序号" type="index" width="55"></el-table-column>-->
      <el-table-column v-for="(item,index) in this.option.column" v-if="item.edit !='referName'"
                       :key="item.id"
                       :fixed="!editStyleFlag ? item.fixed : undefined"
                       :formatter="formAttr"
                       :label="item.label"
                       :prop="item.prop"
                       :show-overflow-tooltip="true"
                       :sortable="item.sortable"
                       :width="item.width||(item.label.length >=4 ?'160':item.label.length==3 ?'130':'100')"
                       align="center"
      <el-table v-if="this.crudArrayFlag"
                ref="referAttrCrud"
                v-loading="loading"
                :data="ProData"
                :height="this.tableHeight"
                :header-cell-style="{background:'#FAFAFA',color:'#505050'}"
                border
                style="width: 100%"
                @select="selectHandle"
                @cell-click="handleCellClicks"
                @selection-change="selectionChange"
                @row-click="rowClick"
      >
        <template slot-scope="{ row }">
          <el-input
            v-if="editingRows === row && editShows== item.prop && item.prop != 'codeDateFormat' && (item.edit == 'text'  ||item.edit == 'refer' )"
            v-show="!AddCellFlag"
            :ref="'input' + row.oid"
            v-model="row[item.prop]"
            @blur="saveRows(row)"
          ></el-input>
          <el-input-number v-if="editingRows === row && editShows== item.prop && item.edit == 'number'"
                           v-model="row[item.prop]"
                           :style="{width:(item.width-10)+'px'}"
                           controls-position="right"
                           size="small" @blur="saveRows"></el-input-number>
          <el-select v-if="editingRows === row && editShows== item.prop && item.edit == 'select' " slot="prepend"
                     v-model="row[item.prop]" allow-create default-first-option
                     filterable
                     @blur="selectChangeHandler(item.editConfig,index)">
            <el-option
              v-for="optionItem in item.data"
              :key="optionItem.dictValue"
              :label="optionItem.dictValue"
              :value="optionItem.dictValue">
            </el-option>
          </el-select>
          <el-switch
            v-if="item.edit === 'switch'" v-model="row[item.prop]" :disabled="!editOpenFlag" active-value="true"
            inactive-value="false">
          </el-switch>
          <span v-else>{{ row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="70">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            @click.native.prevent="CrudRowDel(scope.$index)">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
        <el-table-column
          :fixed="!editStyleFlag ? 'left' : undefined"
          type="selection" width="55">
        </el-table-column>
        <!--<el-table-column fixed label="序号" type="index" width="55"></el-table-column>-->
        <el-table-column v-for="(item,index) in this.option.column" v-if="item.edit !='referName'"
                         :key="item.id"
                         :fixed="!editStyleFlag ? item.fixed : undefined"
                         :formatter="formAttr"
                         :label="item.label"
                         :prop="item.prop"
                         :show-overflow-tooltip="true"
                         :sortable="item.sortable"
                         :width="item.width||(item.label.length >=4 ?'160':item.label.length==3 ?'130':'100')"
                         align="center"
        >
          <template slot-scope="{ row }">
            <el-input
              v-if="editingRows === row && editShows== item.prop && item.prop != 'codeDateFormat' && (item.edit == 'text'  ||item.edit == 'refer' )"
              v-show="!AddCellFlag"
              :ref="'input' + row.oid"
              v-model="row[item.prop]"
              @blur="saveRows(row)"
            ></el-input>
            <el-input-number v-if="editingRows === row && editShows== item.prop && item.edit == 'number'"
                             v-show="!AddCellFlag"
                             v-model="row[item.prop]"
                             :style="{width:(item.width-10)+'px'}"
                             controls-position="right"
                             size="small" @blur="saveRows"></el-input-number>
            <el-select v-if="editingRows === row && editShows== item.prop && item.edit == 'select' " slot="prepend" :clearable="true"
                       v-model="row[item.prop]" allow-create default-first-option
                       filterable v-show="!AddCellFlag"
                       @blur="selectChangeHandler(item.editConfig,index)">
              <el-option
                v-for="optionItem in item.data"
                :key="optionItem.dictValue"
                :label="optionItem.dictValue"
                :value="optionItem.dictValue">
              </el-option>
            </el-select>
            <el-switch
              v-if="item.edit === 'switch'" v-model="row[item.prop]" :disabled="!editOpenFlag" active-value="true"
              inactive-value="false">
            </el-switch>
            <span v-else>{{ row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="70">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              @click.native.prevent="CrudRowDel(scope.$index)">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>
<script>
@@ -382,6 +404,7 @@
import {getList} from "@/api/refer/table";
import func from "@/util/func";
import {getCurrentInstance} from "vue";
import {mapGetters} from "vuex";
export default {
  name: "attrCrud .vue",
@@ -428,6 +451,9 @@
      type: Boolean,
      default: false
    },
    btnAuthList: {
      type:Array
    }
  },
  watch: {
    crudOid: {
@@ -642,7 +668,7 @@
        addBtn: false,
        header: false,
        align: 'center',
        columnBtn:false,
        columnBtn: false,
        menuAlign: 'center',
        column: [{
          label: '',
@@ -1084,6 +1110,10 @@
        indexClassName: "序号",
        indexLabelClassName: '序号',
        index: true,
        indexFixed:false,
        selectionFixed:false,
        columnBtn: false,
        refreshBtn:false,
        border: true,
        addBtn: false,
        menu: false,
@@ -1093,7 +1123,7 @@
          {
            label: "属性英文名称",
            prop: "id",
            width: 100,
            width: 130,
          },
          {
            label: "属性中文名称",
@@ -1179,7 +1209,7 @@
      List: [],
      option: {
        index: false,
        columnBtn:false,
        columnBtn: false,
        border: true,
        editBtn: false,
        selection: true,
@@ -1530,6 +1560,25 @@
    }
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        busineStatus: this.vaildData(this.btnAuthList.attr_add, false) ,
        fullscreenStatus: this.vaildData(this.btnAuthList.attr_view_edit, false),
        ruleStatus: this.vaildData(this.btnAuthList.attr_rule, false),
        attrStatus: this.vaildData(this.btnAuthList.attr_group, false),
        saveStatus: this.vaildData(this.btnAuthList.attr_save, false),
        resetStatus: this.vaildData(this.btnAuthList.attr_reset, false),
        injectStatus: this.vaildData(this.btnAuthList.attr_inject, false),
        isShowStatus: this.vaildData(this.btnAuthList.attr_formrule, false),
        enumStatus: this.vaildData(this.btnAuthList.attr_enum, false),
        cascadStatus: this.vaildData(this.btnAuthList.attr_parentcode, false),
        syncStatus: this.vaildData(this.btnAuthList.attr_sync, false),
        applicationStatus: this.vaildData(this.btnAuthList.attr_application, false),
        orderStatus: this.vaildData(this.btnAuthList.attr_sort, false),
        removeStatus: this.vaildData(this.btnAuthList.attr_delete, false),
      }
    },
    attrOids() {
      let oids = [];
      this.attrSelectList.forEach(ele => {
@@ -1548,7 +1597,7 @@
      if (this.editStyleFlag) {
        return '800px'
      } else {
        return 'calc(100vh - 595px)'
        return 'calc(100vh - 565px)'
      }
    }
  },
@@ -1674,7 +1723,10 @@
            attrTableWidth: 120,
            ts: ""
          })
          this.ProData.push(JSON.parse(JSON.stringify(this.busineAddList)))
          // 将英文编号转换为小写
          let { id, ...res } = this.busineAddList;
          this.busineAddList = { id: id.toLowerCase(), ...res };
          this.ProData.push(JSON.parse(JSON.stringify(this.busineAddList)));
        }
      })
      this.addVisible = false;
@@ -1808,8 +1860,8 @@
      // 新函数用于执行batchAddSave方法
      const executeBatchAddSave = () => {
        batchAddSave(JSON.parse(JSON.stringify(this.ProData))).then(res => {
          this.$message.success('保存成功')
          this.editOpenFlag = false;
          this.$message.success('保存成功')
          // 调用父组件修改按钮状态
          this.$emit('editCloseChildren')
          this.AddCellFlag = true;
@@ -1921,7 +1973,7 @@
      this.tableData.splice(row.$index, 1)
    },
    //枚举注入按钮
    enmuVisHandle() {
    enumVisHandle() {
      if (this.attrSelectList.length > 1) {
        this.$message.warning('只能选择一条模板属性')
      } else if (this.attrSelectList < 1) {
@@ -2020,16 +2072,23 @@
      const regex = new RegExp(this.rulesData.ruleRowBds);
      if (regex.test(this.RulesForm.TestContent)) {
        this.$message.success('校验成功')
      }else {
        this.$message.error('校验失败')
      }
    },
    //点击分类注入按钮
    injectBtn() {
      if (this.attrSelectList.length > 1) {
        this.$message.warning('只能选择一条模板数据')
      } else if (this.attrSelectList.length < 1) {
        return;
      }
      if (this.attrSelectList.length < 1) {
        this.$message.warning('请选择一条模板数据')
      } else if (this.attrSelectList.length === 1) {
        return;;
      }
      if (this.attrSelectList.length === 1) {
        this.injectVisible = true;
        return;
      }
    },
    //分类注入保存
@@ -2062,15 +2121,17 @@
      } else {
        this.injectOption.classifyNumber = 0;
      }
      // console.log(this.ProData)
      this.injectVisible = false;
    },
    //分类注入清空
    injectHandleReset() {
      this.$set(this.CurrentCell, 'classifyInvokeText', '')
      this.$set(this.CurrentCell, 'classifyInvokeAttr:', '')
      this.$set(this.CurrentCell, 'classitwInvokeAttrName', '')
      this.$set(this.CurrentCell, 'classifyInvokeEditFlag', 'false')
      this.$set(this.CurrentCell, 'classifyInvokeLevel', 'none')
      this.CurrentCell.classifyInvokeText = null;
      this.CurrentCell.classifyInvokeAttr = '';
      this.CurrentCell.classifyInvokeAttrName = '';
      this.CurrentCell.classifyInvokeEditFlag = '';
      this.CurrentCell.classifyInvokeLevel = null;
      // console.log(this.ProData)
      this.injectVisible = false;
    },
    // 分类注入取消
@@ -2091,7 +2152,7 @@
      })
    },
    //表格重置
    reset() {
    resetHandler() {
      this.CrudRend()
    },
    //同步到其他模板
@@ -2183,8 +2244,9 @@
<style lang="scss" scoped>
//固定列高度
/deep/ .el-table__fixed {
  height: calc(100vh - 612px)!important;
  height: calc(100vh - 584px) !important;
}
///deep/ .el-table__fixed[v-if='editStyleFlag'] {
//  height: calc(100vh - 152px)!important; // 编辑状态下的高度
//}
@@ -2197,6 +2259,7 @@
  width: 10px;
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ececec;