From 42520a28119137034753a002a2c2004a11af8b5d Mon Sep 17 00:00:00 2001
From: "hongrui.an" <297504645@qq.com>
Date: Thu, 12 Jun 2025 17:31:11 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90EQI=E5=89=8D=E7=AB=AF=E3=80=91?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E9=A1=B5=E9=9D=A2+table=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E6=96=B9=E5=BC=8F=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Web/src/api/common/index.js                   |  13 +-
 Web/src/components/ediTtablePage/index.vue    | 790 ++++++++++++++++++
 Web/src/components/elPager/index.vue          |  18 +-
 Web/src/components/elTable/index.vue          |  73 +-
 Web/src/components/tablePage/index.vue        |   3 +-
 Web/src/utils/common/apiTableColumns.js       |  33 +
 .../logisticsPlan/supplierConMmrp/index.vue   |  11 +-
 7 files changed, 909 insertions(+), 32 deletions(-)
 create mode 100644 Web/src/components/ediTtablePage/index.vue

diff --git a/Web/src/api/common/index.js b/Web/src/api/common/index.js
index 6f413b5..ef189f8 100644
--- a/Web/src/api/common/index.js
+++ b/Web/src/api/common/index.js
@@ -84,4 +84,15 @@ export function getCommonDeatailPaged(urlName,data) {
     method: 'post',
     data
   })
-}
\ No newline at end of file
+}
+
+// 通过id获取详情实体
+export function getCommonDetailById(urlName,id) {
+  return request({
+    url: `/api/${urlName}/getdetialbyid`,
+    method: 'get',
+    params:{id:id}
+  })
+}
+
+// getCommonInfoById
\ No newline at end of file
diff --git a/Web/src/components/ediTtablePage/index.vue b/Web/src/components/ediTtablePage/index.vue
new file mode 100644
index 0000000..1de87e0
--- /dev/null
+++ b/Web/src/components/ediTtablePage/index.vue
@@ -0,0 +1,790 @@
+<template>
+  <div class="app-container" v-loading="state.loading">
+    <!-- 查询头部 -->
+    <el-card class="search-container" v-if="!props.hideSearch">
+      <el-form :inline="true">
+        <el-form-item 
+          v-auth="props.apiName + state.searchBtnOptions['search'].auth"
+          v-for="(item,index) in props.searchOptions"
+          :key="index"
+          :label="item.label">
+          <!-- 文本 -->
+          <el-input 
+            v-if="item.type == 'input'"
+            v-model="props.searchFilter[item.prop]" 
+            :placeholder="item.label" 
+            :clearable="!item.noClear"
+          />
+          <!-- 数字 -->
+          <el-input-number 
+            v-if="item.type == 'number'"
+            v-model="props.searchFilter[item.prop]" 
+            :min="item.min"
+            :max="item.max"
+          />
+          <!-- 时间区域 -->
+          <el-date-picker
+            v-if="item.type == 'datetimerange'"
+            v-model="props.searchFilter[item.prop]"
+            type="datetimerange"
+            start-placeholder="起始时间"
+            end-placeholder="结束时间"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+          />
+          <!-- 选择框 -->
+          <el-select
+            v-if="item.type == 'select'"
+            v-model="props.searchFilter[item.prop]"
+            :filterable="!item.noSearch"
+            placeholder="请选择"
+            style="width: 240px"
+            :clearable="!item.noClear"
+          >
+            <el-option
+              v-for="(op,op_index) in item.options"
+              :key="op_index"
+              :label="op.label"
+              :value="op.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            v-for="(btn,btn_key) in props.searchButtons"
+            :key="btn_key"
+            :icon="state.searchBtnOptions[btn].icon"
+            v-auth="state.searchBtnOptions[btn].sAuth || props.apiName + state.searchBtnOptions[btn].auth"
+            :type="state.searchBtnOptions[btn].type"
+            @click="searchBtnHandle(btn)"
+          >{{state.searchBtnOptions[btn].label}}</el-button>
+        </el-form-item>
+      </el-form>
+      <!-- 右侧按钮(如：保存页面) -->
+      <div>
+        <el-button
+          v-for="(btn,btn_key) in state.searchRightBtn"
+          :key="btn_key"
+          :icon="btn.icon"
+          v-auth="btn.sAuth || props.apiName + btn.auth"
+          :type="btn.type"
+          @click="searchRightBtnHandle(btn)"
+        >{{btn.label}}</el-button>
+      </div>
+    </el-card>
+    <!-- 头部详情 -->
+    <el-card v-loading="state.detailLoading" class="headerInfo-container" v-if="!props.hideHeaderInfo">
+      <el-descriptions :border="true" :column="6" v-if="state.headerInfoData && state.headerInfoData.length > 0">
+        <el-descriptions-item 
+          v-for="(item,index) in state.headerInfoData" 
+          :key="index" 
+          :label="item.label">
+          {{item.value}}
+        </el-descriptions-item>
+      </el-descriptions>
+      <el-empty v-else description="暂无数据" class="headerInfoEmpty"/>
+    </el-card>
+    <!-- 列表 -->
+    <el-card class="paged-table-container">
+      <elTable 
+        :columnWidth="props.columnWidth"
+        :columnHeaderAlign="props.columnHeaderAlign"
+        :columnAlign="props.columnAlign"
+        :tableData="state.tableData"
+        :tableColumns="getTableColumns()"
+        @sortChange="sortChange"
+        :leftOperation="props.leftOperation"
+        @leftOperationHadel="leftOperationHadel"
+        :rightOperation="getRightOperation()"
+        @rightOperationHadel="rightOperationHadel"
+        :multipleTable="props.multipleTable"
+        @tableSelectionHandle="tableSelectionHandle"
+        @editItemFocusHandle="(item,scope,event)=>{getItemDetail(item.type,scope.row,'focus')}"
+        @editItemChangeHandle="editItemChangeHandle"
+        @cell-click="(row,column,cell,event)=>{getItemDetail('cell',row,'cellClick')}"
+        @editItemClearHandle="(item,scope)=>{getItemDetail(item.type,scope.row,'clear')}"
+        :getEditItemDisabled="getEditItemDisabled"
+        :selectableDisabled="selectableDisabled"
+      ></elTable>
+
+      <elPager
+        v-loading="state.pageLoading"
+        style="margin-top: 15px;float:right"
+        :pager="state.pager"
+        @size-change="pageSizeChange"
+        @current-change="pageCurrentChange"
+      ></elPager>
+    </el-card>
+
+    <!-- 导入弹窗 -->
+    <importPop 
+      ref="importPopRef" 
+      :apiName="props.apiName"
+      @success="importSuccess"
+    />
+
+    <!-- 编辑弹窗 -->
+    <apiEditPop 
+      ref="apiEditPopRef" 
+      :apiName="props.apiName"
+      @submitEditForm="submitEditForm"
+      :formRules="props.apiEditFormRules"
+    />
+  </div>
+</template>
+  
+<script setup>
+  defineOptions({ name: 'ediTtablePage' })
+  import store from '@/stores'
+  import apiTableColumns from '@/utils/common/apiTableColumns'
+  import { reactive, ref, onMounted,computed } from 'vue'
+  import { 
+    getCommonPaged,
+    getCommonDeatailPaged,
+    postCommonExport,
+    postCommonCreate,
+    putCommonUpdate,
+    deleteCommonApi,
+    getCommonCustominvoke ,
+    getCommonDetailById
+  } from '@/api/common/index'
+  import { ElMessageBox, ElMessage,ElTable, ElTableColumn } from 'element-plus'
+  import elTable from '@/components/elTable/index.vue'
+  import elPager from '@/components/elPager/index.vue'
+  import { getPageParamsForFilter } from '@/utils/common/index'
+  import { downloadByData } from '@/utils/download'
+  import importPop from '@/components/importPop/index.vue'
+  import apiEditPop from '@/components/apiEditPop/index.vue'
+  import { formatDate } from '@/utils/formatTime'
+  import apiServeNames from '@/utils/common/apiServeNames'
+
+  import { useRoute } from 'vue-router'
+  
+  const route = useRoute()
+  const userStore = store.userStore()
+  const userInfo = userStore.state
+  const auths = store.permissionStore()
+
+  const state = reactive({
+    loading:false,
+    detailLoading:false,
+    pageLoading:false,
+    searchBtnOptions:{
+      search:{icon:'Search',auth:':page',label:'查询',type:null},
+      create:{icon:'Plus',auth:':create',label:'新增',type:'primary'},
+      import:{icon:'BottomRight',auth:':import',label:'导入',type:'warning'},
+      export:{icon:'TopRight',auth:':export',label:'导出',type:'success'},
+      custominvoke:{icon:'Position',auth:':custominvoke',label:'手动开关',type:'primary'},
+      outputMany:{icon:'Position',auth:':outputMany',label:'手动传出',type:'primary'},
+    },
+    searchRightBtn:[{icon:'Check',auth:':pageSave',label:'保存页面',type:'warning'}],
+    tableData:[],
+    // table排序处理
+    sortFilter:{
+      sortBy:undefined,
+      isAscending:undefined
+    },
+    pager:{
+      page: 1,
+      pageSize: 10,
+      total: 1,
+    },
+    tableSelectList:[],
+    leaveSaveTip:'此操作将重新渲染页面，检测有数据【未保存】，操作后将【清空未保存数据】，是否确定继续？',
+    // 头部明细数据
+    headerInfoData:[],
+    currentDetailId:null,//当前详情id暂存，避免重复获取
+    // 暂存原始数据（用于校验是否更改）
+    stage_tableData:[],
+    // 暂存更改的行数（用于保留校验更改行数）
+    stage_indexs:[],
+  })
+
+  const props = defineProps({
+    // api名称
+    apiName: {
+      type: String,
+      default: null
+    },
+    // 查看明细colum名称
+    detailColumName:{
+      type: String,
+      default: null
+    },
+    // api类型 detailApi：走getdetail接口，不传或者pageApi：走getdatapaged接口
+    apiType: {
+      type: String,
+      default: null
+    },
+    // 隐藏表头搜索
+    hideSearch:{
+      type: Boolean,
+      default: false
+    },
+    // 多选
+    multipleTable:{
+      type: Boolean,
+      default: false
+    },
+    // 左侧操作列
+    leftOperation:{
+      type: Object,
+      default: null
+    },
+    // 右侧操作列
+    rightOperation:{
+      type: [Object,String],
+      default: null
+    },
+    // 右侧操作列，特殊自定义格式下，包含api操作
+    showApiRightOperation:{
+      type: Object,
+      default: null
+    },
+    // 右侧通用按钮特殊字段判断隐藏规则，默认为编辑删除，readState=true不可操作，
+    // 如有特殊规则，则使用该方法特殊处理,当前判断方式为“=”，如后期有其他需求再进行封装
+    apiRightHideConfig:{
+      type: Object,
+      default: {
+        apiUpdate:{prop:'readState',ruleValue:true},
+        apiDelete:{prop:'readState',ruleValue:true},
+      }
+    },
+    // table表头
+    tableColumns: {
+      type: Object,
+      default: null
+    },
+    // 查询配置
+    searchOptions: {
+      type: Object,
+      default: []
+    },
+    // 查询按钮
+    searchButtons: {
+      type: Object,
+      default: ['search','export']
+    },
+    // table查询数据filter
+    searchFilter: {
+      type: Object,
+      default: {}
+    },
+    // 表头宽度
+    columnWidth:{
+      type: Number,
+      default: 120
+    },
+    // 表头对齐
+    columnHeaderAlign:{
+      type: String,
+      default: 'center'
+    },
+    // 表内容对齐
+    columnAlign:{
+      type: String,
+      default: 'center'
+    },
+    // 表单规则
+    apiEditFormRules:{
+      type: Object,
+      default: null
+    },
+    // 隐藏头部明细
+    hideHeaderInfo:{
+      type: Boolean,
+      default: false
+    },
+    // 可编辑单元格判断禁用规则，默认为readState=true为禁用，
+    // 如有特殊规则，则使用该方法特殊处理,当前判断方式为“=”，如后期有其他需求再进行封装
+    editDisabledConfig:{
+      type: Object,
+      default: [
+        {prop:'readState',ruleValue:true},
+      ]
+    },
+  })
+  
+  // 获取表头
+  function getTableColumns(){
+    return props.tableColumns || apiTableColumns[props.apiName]
+  }
+
+  const emits = defineEmits([
+    'leftOperationHadel',
+    'rightOperationHadel',
+    'tableSelectionHandle'
+  ])
+
+  // table多选
+  function tableSelectionHandle (val){
+    state.tableSelectList = val
+    emits('tableSelectionHandle',val)
+  }
+
+  // 左侧操作列
+  function leftOperationHadel(btn,scope) {
+    emits('leftOperationHadel',btn,scope)
+  }
+
+  // 获取右侧操作列
+  function getRightOperation() {
+    // 自定义右侧列，且不需要默认api通用操作
+    if(typeof props.rightOperation == 'object' && !props.showApiRightOperation){
+      return props.rightOperation
+    }
+    // 无自定义操作，或者有自定义且需要默认api操作
+    else if(
+      (typeof props.rightOperation == 'object' && props.showApiRightOperation)
+      || typeof props.rightOperation == 'string'
+    ){
+      // 格式化默认api按钮合集
+      let _apiArr = props.showApiRightOperation || props.rightOperation.split(',')
+      let _config = {
+        apiUpdate:{label:'编辑',type:'warning'},
+        apiDelete:{label:'删除',type:'danger'},
+      }
+      let _btns = []
+      if(_apiArr && _apiArr.length > 0){
+        _apiArr.forEach(item => {
+          _btns.push({
+            label:_config[item].label,
+            name:item,
+            link:true,
+            type:_config[item].type,
+            auth:props.apiName+':'+item,
+            hide:(row,scope) => {return row[props.apiRightHideConfig[item].prop] == props.apiRightHideConfig[item].ruleValue}
+          })
+        });
+      }
+      // 如果有自定义按钮，合并默认api按钮
+      if(typeof props.rightOperation == 'object'){
+        _btns = [..._btns,...props.rightOperation]
+      }
+      return _btns
+    }
+  }
+
+  // 右侧操作列操作
+  const apiEditPopRef = ref()
+  function rightOperationHadel(btn,scope) {
+    // 通用编辑
+    if(btn.name == 'apiUpdate'){
+      let _tableColums = getTableColumns()
+      let _list = _tableColums.filter(item => !item.noEdit)
+      apiEditPopRef.value.open(_list,scope.row)
+    }
+    // 通用删除
+    if(btn.name == 'apiDelete'){
+      ElMessageBox.confirm(`是否确定删除？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        state.loading = true
+        deleteCommonApi(props.apiName,scope.row.uId)
+        .then(res=>{
+          ElMessage.success('操作成功！')      
+          getTableData(1);
+        })
+        .catch(err=>{ElMessage.error('操作失败！')})
+        .finally(()=>{state.loading = false})
+      })
+    }
+    emits('rightOperationHadel',btn,scope)
+  }
+
+  // 编辑表单提交 
+  const submitEditForm = async (type,formData,formConfig) => {
+    apiEditPopRef.value.validate((valid) => {
+      if(valid){
+        // 新增
+        if(type == 'create'){
+          if(formData.hasOwnProperty('createUser')){formData.createUser = userInfo.realName}
+          if(formData.hasOwnProperty('createByUser')){formData.createByUser = userInfo.realName}
+          if(formData.hasOwnProperty('createTime')){formData.createTime = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS")}
+          apiEditPopRef.value.changeLoading(true)
+          postCommonCreate(props.apiName,formData)
+          .then(res=>{
+            apiEditPopRef.value.close()
+            ElMessage.success('操作成功！')      
+            getTableData(1);
+          })
+          .catch(err=>{ElMessage.error('操作失败！')})
+          .finally(()=>{apiEditPopRef.value.changeLoading(false)})
+        }else{
+          // 修改人信息处理
+          if(
+              (formData.hasOwnProperty('updateByUser') && formData.hasOwnProperty('updateTime'))
+              || (formData.hasOwnProperty('updateUser') && formData.hasOwnProperty('updateTime'))
+          ){
+            if(formData.hasOwnProperty('updateByUser')){formData.updateByUser = userInfo.realName}
+            if(formData.hasOwnProperty('updateUser')){formData.updateUser = userInfo.realName}
+            if(formData.hasOwnProperty('updateTime')){formData.updateTime = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS")}
+          }else{
+            // 特殊不处理页面
+            let _notChange=['taskconifgure']
+            if(_notChange.indexOf(props.apiName) < 0){
+              formData.remark= `修改信息：${userInfo.realName} ${formatDate(new Date(), "YYYY-mm-dd HH:MM:SS")}`
+            }
+          }
+          apiEditPopRef.value.changeLoading(true)
+          putCommonUpdate(props.apiName,formData)
+          .then(res=>{
+            apiEditPopRef.value.close()
+            ElMessage.success('操作成功！')      
+            getTableData(1);
+          })
+          .catch(err=>{ElMessage.error('操作失败！')})
+          .finally(()=>{apiEditPopRef.value.changeLoading(false)})
+        }
+      }
+    })
+  }
+
+  // 格式化页面传参
+  function getPageParams(){
+    let _filters = []
+    if(props.hideSearch){
+      _filters = props.searchFilter
+    }else{
+      for(let i in props.searchFilter){
+        let _item = props.searchOptions.filter(item=>item.prop == i)
+        let _type = (_item && _item.length > 0) ? _item[0].type : null
+        if(props.searchFilter[i] || props.searchFilter[i] == 0){
+          // 时间区域格式
+          if(_type == 'datetimerange'){
+            _filters.push(
+              {
+                logic: "And",
+                column: i,
+                action: '>=',
+                value: props.searchFilter[i][0]
+              }
+            )
+            _filters.push(
+              {
+                logic: "And",
+                column: i,
+                action: '<=',
+                value: props.searchFilter[i][1]
+              }
+            )
+          }else{
+            let _action = 'like'
+            let _EqualTypes = ['tagFilter','filter','number','select']//等于情况的类型
+            if(_EqualTypes.indexOf(_type) >= 0){
+              _action =  '=='
+            }
+            _filters.push(
+              {
+                logic: "And",
+                column: i,
+                action: _action,
+                value: props.searchFilter[i]
+              }
+            )
+          }
+        }
+      }
+    }
+    let _pageParams = getPageParamsForFilter({
+      pageNumber:state.pager.page,
+      pageSize:state.pager.pageSize,
+      sortBy:state.sortFilter.sortBy,
+      isAscending:state.sortFilter.isAscending,
+      condition:{
+        filters:_filters
+      }
+    })
+    return _pageParams
+  }
+
+  // 获取页面数据
+  function getTableData(page) {
+    state.stage_indexs = []
+    if(props.apiType == 'detailApi'){
+      state.loading = true
+      if(!page)page = state.pager.page
+      if(page)state.pager.page = page
+      getCommonDeatailPaged(props.apiName,getPageParams())
+        .then((resp) => {
+          state.headerInfoData = [] 
+          state.tableData = resp.data.data
+          state.stage_tableData = JSON.parse(JSON.stringify(resp.data.data))
+          state.pager.total = resp.data.totalCount
+        })
+        .catch(err=>{ElMessage.error('数据获取失败！')})
+        .finally(() => (state.loading = false))
+    }else{
+      state.loading = true
+      if(!page)page = state.pager.page
+      if(page)state.pager.page = page
+      getCommonPaged(props.apiName,getPageParams())
+        .then((resp) => {
+          state.headerInfoData = [] 
+          state.tableData = resp.data.data
+          state.stage_tableData = JSON.parse(JSON.stringify(resp.data.data))
+          state.pager.total = resp.data.totalCount
+        })
+        .catch(err=>{ElMessage.error('数据获取失败！')})
+        .finally(() => (state.loading = false))
+    }
+  }
+
+  const importPopRef = ref()
+  // 头部查询按钮功能
+  function searchBtnHandle(btn){
+    // 查询
+    if(btn == 'search'){
+      beforClearEdit().then(() => {
+        getTableData()
+      })
+    }
+    // 新增
+    else if (btn == 'create'){
+      beforClearEdit().then(() => {
+        let _tableColums = getTableColumns()
+        let _list = _tableColums.filter(item => !item.noEdit)
+        apiEditPopRef.value.open(_list)
+      })
+    }
+    // 导入
+    else if (btn == 'import'){
+      beforClearEdit().then(() => {
+        importPopRef.value.open()
+      })
+    }
+    // 导出
+    else if (btn == 'export'){
+      beforClearEdit().then(() => {
+        state.loading = true
+        getTableData()//同步数据查询
+        postCommonExport(props.apiName,getPageParams())
+          .then((res) => {
+            downloadByData(res.data,route.meta.title+'.xlsx')
+          })
+          .catch(err=>{ElMessage.error('操作失败！')})
+          .finally(() => (state.loading = false))
+      })
+    }
+    // 手动开关
+    else if (btn == 'custominvoke'){
+      beforClearEdit().then(() => {
+        state.loading = true
+        let _data = {
+          taskName:apiServeNames[props.apiName].taskName,
+          client:'Chery'
+        }
+        getCommonCustominvoke(props.apiName,_data)
+        .then((res) => {
+          ElMessage.success('操作成功！')    
+          getTableData(1)//同步数据查询
+        })
+        .finally(() => (state.loading = false))
+      })
+    }
+    // 手动传出（多选）
+    else if (btn == 'outputMany'){
+      if(!state.tableSelectList || state.tableSelectList.length <= 0 ){
+        return ElMessage.warning('未选中任何数据')
+      }
+      // todo:提交接口
+      console.log(state.tableSelectList)
+    }
+  }
+  // 头部右侧按钮功能
+  function searchRightBtnHandle(btn){
+    let _idEditData = checkPageEditList()
+    if(!_idEditData || _idEditData.length <= 0)return ElMessage.warning('暂无数据修改')
+    ElMessageBox.confirm('是否确定提交更改？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }).then(() => {
+      // todo:提交接口
+      console.log(613,_idEditData)
+    })
+  }
+
+  // 排序
+  function sortChange(data) {
+    beforClearEdit().then(() => {
+      const { prop, order } = data;
+      if (!prop || !order) {
+        state.sortFilter.sortBy = undefined;
+        state.sortFilter.isAscending = undefined;
+        getTableData(1);
+        return;
+      }
+      state.sortFilter.sortBy = prop;
+      state.sortFilter.isAscending = (order == "ascending");
+      getTableData(1);
+    })
+  }
+  
+  // 导入成功之后
+  function importSuccess(response,importDate){
+    getTableData()
+  }
+  
+  // size-change
+  function pageSizeChange(pageSize,returnSize){
+    state.pageLoading=true
+    let _oldSize = state.pager.pageSize
+    state.pager.pageSize = pageSize
+    beforClearEdit()
+    .then(res => {
+      getTableData(1)
+      state.pageLoading=false
+    })
+    .catch(res=>{
+      state.pager.pageSize = _oldSize
+      state.pageLoading=false
+    })
+  }
+
+  // current-change
+  function pageCurrentChange(page){
+    beforClearEdit().then(res => {
+      getTableData(page)
+    })
+  }
+
+  // 获取头部详情字段名
+  function getDeatilLableByProp(prop){
+    let _colums = apiTableColumns[props.detailColumName]
+    let _item = _colums.filter(item=>item.prop == prop)
+    let _name = null
+    if(_item && _item.length > 0){
+      _name = _item[0].title
+    }
+    return _name
+  }
+
+  // 判断可编辑元素是否禁用
+  function getEditItemDisabled(item,row,index){
+    let _auth = auths.hasPermission(props.apiName+':pageSave')
+    if(item.disabled || !_auth){
+      return true
+    }
+    if(state.tableSelectList && state.tableSelectList.length > 0){
+      return true
+    }
+    let hasDisable = false
+    for(let i = 0;i<props.editDisabledConfig.length;i++){
+      if(row[props.editDisabledConfig[i].prop] == props.editDisabledConfig[i].ruleValue){
+        hasDisable = true
+        break
+      }
+    }
+    return hasDisable
+  }
+
+  // table的复选框是否禁用判断
+  function selectableDisabled(row,index){
+    let _auth = auths.hasPermission(props.apiName+':outputMany')
+    if(!_auth)return false
+    let _idEditData = checkPageEditList()
+    return !_idEditData || _idEditData.length <= 0
+  }
+
+  // 可编辑元素Focus事件
+  function getItemDetail(type,row,eventType) {
+    state.tableSelectList = []
+    // 如果是相同id，避免重复：阻止接口
+    if(row.id == state.currentDetailId){return}
+    let _focuseExt = ['input','numberInput']
+    // 如果是focus事件，避免重复：阻止_focuseExt以内的触发事件，走cell事件
+    if(eventType == 'focus' && _focuseExt.indexOf(type) >= 0){return}
+    console.log(type,row,eventType)
+    console.log('------------')
+    state.currentDetailId = row.id
+    state.detailLoading = true
+    getCommonDetailById(props.apiName,row.id)
+    .then((res) => {
+      state.headerInfoData = [] 
+      for(let item in res.data){
+        let _label = getDeatilLableByProp(item)
+        if(_label){
+          state.headerInfoData.push({
+            label:_label,
+            value:res.data[item]
+          })
+        }
+      }
+    })
+    .finally(() => (state.detailLoading = false))
+    
+  }
+
+  // 可编辑元素change事件
+  function editItemChangeHandle(item,scope,data) {
+    if(state.stage_indexs.indexOf(scope.$index) < 0){
+      state.stage_indexs.push(scope.$index)
+    }
+  }
+
+  // 其他操作清空保存前提示
+  function beforClearEdit(){
+    return new Promise((resolve, reject) => {
+      let _idEditData = checkPageEditList()
+      if(!_idEditData || _idEditData.length <= 0){
+        resolve()
+      }else{
+        ElMessageBox.confirm(state.leaveSaveTip, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          resolve()
+        }).catch(()=>{
+          reject()
+        })
+      }
+    })
+  }
+
+  // 处理页面更改数据
+  function checkPageEditList(){
+    if(!state.stage_indexs || state.stage_indexs.length<=0){
+      return false
+    }
+    else{
+      let _changeArr = []
+      state.stage_indexs.forEach(item=>{
+        if(JSON.stringify(state.stage_tableData[item]) != JSON.stringify(state.tableData[item])){
+          _changeArr.push(state.tableData[item])
+        }
+      })
+      return _changeArr
+    }
+  }
+
+  onMounted(() => {
+    getTableData()
+  })
+
+</script>
+<style scoped lang="scss">
+::v-deep .search-container{
+  .el-card__body{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+::v-deep .headerInfo-container{
+  margin-top:10px;
+  .el-card__body{
+    padding-bottom: 10px !important;
+    min-height:66px
+  }
+}
+::v-deep .headerInfoEmpty{
+  height:145px;
+  .el-empty__image{
+    width:90px !important
+  }
+}
+</style>
\ No newline at end of file
diff --git a/Web/src/components/elPager/index.vue b/Web/src/components/elPager/index.vue
index e35d924..55a7c77 100644
--- a/Web/src/components/elPager/index.vue
+++ b/Web/src/components/elPager/index.vue
@@ -1,7 +1,7 @@
 <template>
   <el-pagination
-    :currentPage="state.currentPage"
-    :page-size="state.pageSize"
+    :currentPage="props.pager.page"
+    :page-size="props.pager.pageSize"
     :total="props.pager.total"
     :background="props.pageBackGround"
     :layout="props.pageLayout"
@@ -16,11 +16,6 @@
   defineOptions({ name: 'elPager' })
   import { reactive, ref, onMounted,watch } from 'vue'
   import { ElMessageBox, ElMessage,ElPagination } from 'element-plus'
-  
-  const state = reactive({
-    currentPage:1,
-    pageSize:null
-  })
 
   const props = defineProps({
     // table分页
@@ -47,25 +42,18 @@
     pageSizeList:{
       type: Object,
       default: [10, 20, 50, 100]
-    }
+    },
   })
 
   const emits = defineEmits(['pageSizeChange', 'pageCurrentChange'])
-
-  watch(props.pager, (val) => {
-    state.currentPage = val.page
-    state.pageSize = val.pageSize
-  })
   
   // size-change
   function pageSizeChange(pageSize){
-    state.pageSize = pageSize
     emits('pageSizeChange',pageSize)
   }
 
   // current-change
   function pageCurrentChange(page){
-    state.currentPage = page
     emits('pageCurrentChange',page)
   }
 
diff --git a/Web/src/components/elTable/index.vue b/Web/src/components/elTable/index.vue
index 33d16ff..0cbc993 100644
--- a/Web/src/components/elTable/index.vue
+++ b/Web/src/components/elTable/index.vue
@@ -6,6 +6,7 @@
     :border="true"
     @sort-change="sortChange"
     @selection-change="tableSelectionHandle"
+    :row-class-name="'setDisabledStyle'"
   >
     <!-- 多选框 -->
     <el-table-column 
@@ -13,6 +14,7 @@
       type="selection" 
       :fixed="'left'"
       width="55" 
+      :selectable="selectableDisabled"
     />
     <!-- 左侧操作列 -->
     <el-table-column 
@@ -60,8 +62,11 @@
           v-else-if="item.type == 'input'"
           v-model="scope.row[item.prop]" 
           :placeholder="item.label" 
-          :disabled="item.disabled"
+          :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
@@ -69,8 +74,11 @@
           v-model="scope.row[item.prop]"
           :filterable="!item.noSearch"
           placeholder="请选择"
-          :disabled="item.disabled"
-          :clearable="!item.noClear">
+          :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"
@@ -87,7 +95,10 @@
           format="YYYY-MM-DD HH:mm:ss"
           value-format="YYYY-MM-DD HH:mm:ss"
           :clearable="!item.noClear"
-          :disabled="item.disabled"
+          :disabled="getEditItemDisabled(item,scope.row,scope)"
+          @focus="(event)=>{editItemFocusHandle(item,scope,event)}"
+          @change="editItemChangeHandle(item,scope,arguments)"
+          @clear="editItemClearHandle(item,scope)"
         />
         <!-- 【可编辑】数字 -->
         <el-input-number 
@@ -95,8 +106,9 @@
           v-model="scope.row[item.prop]" 
           :min="item.min"
           :max="item.max"
-          :clearable="!item.noClear"
-          :disabled="item.disabled"
+          :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>
@@ -185,18 +197,26 @@
       type: String,
       default: 'center'
     },
-    // 是否为可编辑tabel
-    isEditTable:{
-      type: Boolean,
+    // 可编辑单元格判断禁用
+    getEditItemDisabled:{
+      type: [Function,Boolean],
       default: false
     },
+    // table的复选框是否禁用判断
+    selectableDisabled:{
+      type: [Function,Boolean],
+      default: true
+    }
   })
 
   const emits = defineEmits([
     'sortChange',
     'leftOperationHadel',
     'rightOperationHadel',
-    'tableSelectionHandle'
+    'tableSelectionHandle',
+    'editItemFocusHandle',
+    'editItemChangeHandle',
+    'editItemClearHandle',
   ])
 
   // 多选
@@ -240,6 +260,39 @@
     return _arr
   }
 
+  // 判断可编辑元素是否禁用
+  function getEditItemDisabled(item,row,scope){
+    if(typeof props.getEditItemDisabled == 'boolean'){
+      return props.getEditItemDisabled
+    }else{
+      return props.getEditItemDisabled(item,row,scope.$index)
+    }
+  }
+
+  // table的复选框是否禁用判断
+  function selectableDisabled(row,index){
+    if(typeof props.selectableDisabled == 'function'){
+      return props.selectableDisabled(row,index)
+    }else{
+      return props.selectableDisabled
+    }
+  }
+
+  // 可编辑元素Focus事件
+  function editItemFocusHandle(item,scope,event) {
+    emits('editItemFocusHandle',item,scope,event)
+  }
+
+  // 可编辑元素change事件
+  function editItemChangeHandle(item,scope,data) {
+    emits('editItemChangeHandle',item,scope,data)
+  }
+
+  // 可编辑元素clear事件
+  function editItemClearHandle(item,scope) {
+    emits('editItemClearHandle',item,scope)
+  }
+
   // 右侧操作列
   function rightOperationHadel(btn,scope) {
     emits('rightOperationHadel',btn,scope)
diff --git a/Web/src/components/tablePage/index.vue b/Web/src/components/tablePage/index.vue
index 21c9296..9530657 100644
--- a/Web/src/components/tablePage/index.vue
+++ b/Web/src/components/tablePage/index.vue
@@ -191,8 +191,7 @@
       default: null
     },
     // 右侧通用按钮特殊字段判断隐藏规则，默认为编辑删除，writeState=true不可操作，
-    // 如：风险页面是根据readState，则使用该方法特殊处理,
-    // 当前判断方式为“=”，如后期有其他需求再进行封装
+    // 如有特殊规则，则使用该方法特殊处理,当前判断方式为“=”，如后期有其他需求再进行封装
     apiRightHideConfig:{
       type: Object,
       default: {
diff --git a/Web/src/utils/common/apiTableColumns.js b/Web/src/utils/common/apiTableColumns.js
index 2af2a04..92449ca 100644
--- a/Web/src/utils/common/apiTableColumns.js
+++ b/Web/src/utils/common/apiTableColumns.js
@@ -117,6 +117,39 @@ const apiTableColumns = {
         {prop:'quantityMeet11',title:'满足数量11',type:'numberInput'},
         {prop:'quantityMeet12',title:'满足数量12',type:'numberInput'},
     ],
+    // M+6月物料需求计划风险确认-明细
+    cherysupplierconmmrpDetail:[
+        {prop:'releaseEdition',title:'需求发布版次',width:150},
+        {prop:'materialCode',title:'零件号'},
+        {prop:'materialDescription',title:'零件名称'},
+        {prop:'plantId',title:'工厂代码'},
+        {prop:'plantName',title:'工厂名称'},
+        {prop:'startMonth',title:'起始月份'},
+        {prop:'quantityDemand1',title:'需求数量1'},
+        {prop:'quantityDemand2',title:'需求数量2'},
+        {prop:'quantityDemand3',title:'需求数量3'},
+        {prop:'quantityDemand4',title:'需求数量4'},
+        {prop:'quantityDemand5',title:'需求数量5'},
+        {prop:'quantityDemand6',title:'需求数量6'},
+        {prop:'quantityDemand7',title:'需求数量7'},
+        {prop:'quantityDemand8',title:'需求数量8'},
+        {prop:'quantityDemand9',title:'需求数量9'},
+        {prop:'quantityDemand10',title:'需求数量10',width:130},
+        {prop:'quantityDemand11',title:'需求数量11',width:130},
+        {prop:'quantityDemand12',title:'需求数量12',width:130},
+        {prop:'requestDate',title:'请求日期',width:180},
+        // {prop:'remark',title:'备注',align:'left',width:300},
+        {prop:'createByUser',title:'创建人'},
+        {prop:'createTime',title:'创建时间',width:180},
+        // {prop:'creationTime',title:'创建时间(接收)',width:180},
+        {prop:'updateByUser',title:'修改人'},
+        {prop:'updateTime',title:'修改时间',width:180},
+        {prop:'version',title:'版本号'},
+        // {prop:'isDelete',title:'是否删除',type:'tagFilter',options:EnumList.whether},
+        // {prop:'isUpdate',title:'是否更新',type:'tagFilter',options:EnumList.whether},
+        // {prop:'writeState',title:'writeState',type:'tagFilter',options:EnumList.whetherBoolean},
+        // {prop:'readState',title:'readState',type:'tagFilter',options:EnumList.whetherBoolean},
+    ],
     // 日物料需求计划
     cherysuppliermrpdata:[
         {prop:'releaseEdition',title:'需求发布版次',width:150},
diff --git a/Web/src/views/logisticsPlan/supplierConMmrp/index.vue b/Web/src/views/logisticsPlan/supplierConMmrp/index.vue
index ff65421..da640a1 100644
--- a/Web/src/views/logisticsPlan/supplierConMmrp/index.vue
+++ b/Web/src/views/logisticsPlan/supplierConMmrp/index.vue
@@ -1,19 +1,22 @@
 <template>
-  <tablePage 
+  <ediTtablePage 
     :columnWidth="200"
     :apiName="state.apiName"
     :searchOptions="state.searchOptions"
     :searchFilter="state.searchFilter"
     :rightOperation="state.rightOperation"
-    :isEditTable="true"
-  ></tablePage>
+    :detailColumName="'cherysupplierconmmrpDetail'"
+    :searchButtons="['search','export','outputMany']"
+    :multipleTable="true"
+  ></ediTtablePage>
 </template>
 
+
 <script setup>
 // M+6月物料需求计划风险确认
 defineOptions({ name: 'supplierConMmrp' })
 import { reactive, ref, onMounted } from 'vue'
-import tablePage from '@/components/tablePage/index.vue'
+import ediTtablePage from '@/components/ediTtablePage/index.vue'
 
 const state = reactive({
   apiName:'cherysupplierconmmrp',