【EDI前端】暂存

Web/src/components/elTable/index.vue

@@ -1,6 +1,6 @@
 <template>
   <el-table 
-    ref="tableRef" 
+    ref="table_Ref" 
     row-key="id" 
     :data="props.tableData" 
     :border="true"
@@ -33,91 +33,93 @@
           :type="btn.type"
           :link="btn.link"
           @click="leftOperationHadel(btn,scope)"
+          :disabled="typeof btn.disabled == 'function' ? btn.disabled(scope.row,scope) : btn.disabled"
+          v-show="typeof btn.hide == 'function' ? !btn.hide(scope.row,scope) : !btn.hide"
         >{{btn.label}}</el-button>
       </template>
     </el-table-column>
-
-    <!-- 数据列 -->
-    <el-table-column
-      v-for="(item, index) in props.tableColumns" 
-      :key="index"
-      :label="item.title"
-      :prop="item.prop"
-      :sortable="item.sortable || 'custom'"
-      :fixed="item.fixed"
-      :width="item.width || props.columnWidth"
-      :align="item.align || props.columnAlign"
-      :show-overflow-tooltip="item.tooltip"
-      :header-align="item.headerAlign || props.columnHeaderAlign">
-      <template #default="scope">
-        <!-- 时间格式 -->
-        <span v-if="item.type == 'datetime'"> {{ formatTableDate(scope.row[item.prop]) }} </span>
-        <!-- 标签格式 -->
-        <el-tag
-          v-else-if="item.type == 'tagFilter'"
-          :type="formatTableTagFilter('type',scope.row,item)"
-        >
-          {{ formatTableTagFilter('label',scope.row,item) }}
-        </el-tag>
-        <!-- 字典 -->
-        <span v-else-if="item.type == 'filter'">{{ formatTableTagFilter('label',scope.row,item) }}</span>
-        <!-- 【可编辑】文本 -->
-        <el-input 
-          v-else-if="item.type == 'input'"
-          v-model="scope.row[item.prop]" 
-          :placeholder="item.label" 
-          :disabled="getEditItemDisabled(item,scope.row,scope)"
-          :clearable="!item.noClear"
-          @focus="(event)=>{editItemFocusHandle(item,scope,event)}"
-          @change="editItemChangeHandle(item,scope,arguments)"
-          @clear="editItemClearHandle(item,scope)"
-        />
-        <!-- 【可编辑】字典选择 -->
-        <el-select
-          v-else-if="item.type == 'filterSelect'"
-          v-model="scope.row[item.prop]"
-          :filterable="!item.noSearch"
-          placeholder="请选择"
-          :disabled="getEditItemDisabled(item,scope.row,scope)"
-          :clearable="!item.noClear"
-          @focus="(event)=>{editItemFocusHandle(item,scope,event)}"
-          @change="editItemChangeHandle(item,scope,arguments)"
-          @clear="editItemClearHandle(item,scope)">
-          <el-option
-            v-for="(op,op_index) in item.options"
-            :key="op_index"
-            :label="op.label"
-            :value="op.value"
+    <template v-for="(item, index) in innerTableColums" :key="index">
+      <!-- 数据列 -->
+      <el-table-column
+        v-if="!item.setNoShow"
+        :label="item.title"
+        :prop="item.prop"
+        :sortable="item.sortable || 'custom'"
+        :fixed="item.fixed"
+        :width="item.width || props.columnWidth"
+        :align="item.align || props.columnAlign"
+        :show-overflow-tooltip="item.tooltip"
+        :header-align="item.headerAlign || props.columnHeaderAlign">
+        <template #default="scope">
+          <!-- 时间格式 -->
+          <span v-if="item.type == 'datetime'"> {{ formatTableDate(scope.row[item.prop]) }} </span>
+          <!-- 标签格式 -->
+          <el-tag
+            v-else-if="item.type == 'tagFilter'"
+            :type="formatTableTagFilter('type',scope.row,item)"
+          >
+            {{ formatTableTagFilter('label',scope.row,item) }}
+          </el-tag>
+          <!-- 字典 -->
+          <span v-else-if="item.type == 'filter'">{{ formatTableTagFilter('label',scope.row,item) }}</span>
+          <!-- 【可编辑】文本 -->
+          <el-input 
+            v-else-if="item.type == 'input'"
+            v-model="scope.row[item.prop]" 
+            :placeholder="item.label" 
+            :disabled="getEditItemDisabled(item,scope.row,scope)"
+            :clearable="!item.noClear"
+            @focus="(event)=>{editItemFocusHandle(item,scope,event)}"
+            @change="editItemChangeHandle(item,scope,arguments)"
+            @clear="editItemClearHandle(item,scope)"
           />
-        </el-select>
-        <!-- 【可编辑】时间 -->
-        <el-date-picker
-          v-else-if="item.type == 'datetimeInput'"
-          v-model="scope.row[item.prop]"
-          style="width:100%"
-          :type="item.inputType || 'datetime'"
-          :format="item.format || 'YYYY-MM-DD HH:mm:ss'"
-          :value-format="item.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
-          :clearable="!item.noClear"
-          :disabled="getEditItemDisabled(item,scope.row,scope)"
-          @focus="(event)=>{editItemFocusHandle(item,scope,event)}"
-          @change="editItemChangeHandle(item,scope,arguments)"
-          @clear="editItemClearHandle(item,scope)"
-        />
-        <!-- 【可编辑】数字 -->
-        <el-input-number 
-          v-else-if="item.type == 'numberInput'"
-          v-model="scope.row[item.prop]" 
-          :min="item.min"
-          :max="item.max"
-          :disabled="getEditItemDisabled(item,scope.row,scope)"
-          @focus="(event)=>{editItemFocusHandle(item,scope,event)}"
-          @change="editItemChangeHandle(item,scope,arguments)"
-        />
-        <!-- 正常直接显示 -->
-        <span v-else> {{ scope.row[item.prop] }} </span>
-      </template>
-    </el-table-column>
+          <!-- 【可编辑】字典选择 -->
+          <el-select
+            v-else-if="item.type == 'filterSelect'"
+            v-model="scope.row[item.prop]"
+            :filterable="!item.noSearch"
+            placeholder="请选择"
+            :disabled="getEditItemDisabled(item,scope.row,scope)"
+            :clearable="!item.noClear"
+            @focus="(event)=>{editItemFocusHandle(item,scope,event)}"
+            @change="editItemChangeHandle(item,scope,arguments)"
+            @clear="editItemClearHandle(item,scope)">
+            <el-option
+              v-for="(op,op_index) in item.options"
+              :key="op_index"
+              :label="op.label"
+              :value="op.value"
+            />
+          </el-select>
+          <!-- 【可编辑】时间 -->
+          <el-date-picker
+            v-else-if="item.type == 'datetimeInput'"
+            v-model="scope.row[item.prop]"
+            style="width:100%"
+            :type="item.inputType || 'datetime'"
+            :format="item.format || 'YYYY-MM-DD HH:mm:ss'"
+            :value-format="item.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
+            :clearable="!item.noClear"
+            :disabled="getEditItemDisabled(item,scope.row,scope)"
+            @focus="(event)=>{editItemFocusHandle(item,scope,event)}"
+            @change="editItemChangeHandle(item,scope,arguments)"
+            @clear="editItemClearHandle(item,scope)"
+          />
+          <!-- 【可编辑】数字 -->
+          <el-input-number 
+            v-else-if="item.type == 'numberInput'"
+            v-model="scope.row[item.prop]" 
+            :min="item.min"
+            :max="item.max"
+            :disabled="getEditItemDisabled(item,scope.row,scope)"
+            @focus="(event)=>{editItemFocusHandle(item,scope,event)}"
+            @change="editItemChangeHandle(item,scope,arguments)"
+          />
+          <!-- 正常直接显示 -->
+          <span v-else> {{ scope.row[item.prop] }} </span>
+        </template>
+      </el-table-column>
+    </template>
 
     <!-- 右侧操作列 -->
     <el-table-column 
@@ -144,13 +146,18 @@
   
 <script setup>
   defineOptions({ name: 'elTable' })
-  import { h,reactive, ref, onMounted } from 'vue'
+  import { useRoute } from 'vue-router'
+  import { h,reactive, ref, onMounted,defineExpose,nextTick } from 'vue'
   import { ElMessageBox, ElMessage,ElTable, ElTableColumn } from 'element-plus'
   import { formatTimeStrToStr } from "@/utils/formatTime";
-  
-  const state = reactive({})
+  import { getLocalTableColumnsName } from '@/utils/common/index'
 
   const props = defineProps({
+    // 特殊的column缓存名称
+    specialLocalColumnName:{
+      type: String,
+      default: null
+    },
     // 多选
     multipleTable:{
       type: Boolean,
@@ -228,6 +235,9 @@
     },
   })
 
+  const innerTableColums = ref([])
+  innerTableColums.value = props.tableColumns
+
   const emits = defineEmits([
     'sortChange',
     'leftOperationHadel',
@@ -238,6 +248,20 @@
     'editItemClearHandle',
   ])
 
+  const table_Ref = ref(null)
+  let _localColumName = props.specialLocalColumnName || useRoute().name
+  const localTableColumnsName = getLocalTableColumnsName(_localColumName)
+
+  window.addEventListener('setItemEvent', (data) => {
+    // console.log("监听到触发了localStorage.setItem事件",data)
+    nextTick(() => {
+      if(data.key == localTableColumnsName){
+        innerTableColums.value = JSON.parse(data.newValue)
+        if(table_Ref.value)table_Ref.value.doLayout()
+      }
+    })
+  })
+
   // 多选
   function tableSelectionHandle (val){
     emits('tableSelectionHandle',val)
@@ -317,6 +341,10 @@
     emits('rightOperationHadel',btn,scope)
   }
 
+  defineExpose({
+    table_Ref,
+  })
+
   onMounted(() => {})
 
 </script>
@@ -333,5 +361,8 @@
     background:#fff;
   }
 }
+.table-danger-row{
+  background:#ffe8e8 !important;
+}
 </style>