Compare commits
26 Commits
| Author | SHA1 | Date |
|---|---|---|
 安虹睿
|
ab875ebcb3 | 5 days ago |
|
安虹睿
|
de86739eb4 | 1 week ago |
|
安虹睿
|
9dc2947c94 | 1 week ago |
|
安虹睿
|
9ae26eb470 | 2 weeks ago |
|
安虹睿
|
74325bfadc | 2 weeks ago |
|
安虹睿
|
cf42ddbccc | 2 weeks ago |
|
安虹睿
|
8f541f4305 | 3 weeks ago |
|
安虹睿
|
75483bceba | 3 weeks ago |
|
安虹睿
|
84ef947e56 | 3 weeks ago |
|
安虹睿
|
03bbbf44b1 | 3 weeks ago |
|
安虹睿
|
ea1165ae08 | 4 weeks ago |
|
安虹睿
|
e69fbed185 | 4 weeks ago |
|
安虹睿
|
cda5da22f6 | 4 weeks ago |
|
安虹睿
|
bf1dd3ccde | 4 weeks ago |
|
安虹睿
|
3a265eb2ef | 1 month ago |
|
安虹睿
|
42520a2811 | 1 month ago |
|
安虹睿
|
b82827bf71 | 1 month ago |
|
安虹睿
|
5f53b4be6e | 1 month ago |
|
安虹睿
|
a330fee7d7 | 1 month ago |
|
安虹睿
|
ab46d560ac | 1 month ago |
|
安虹睿
|
5e6ae267df | 1 month ago |
|
安虹睿
|
36d57e116d | 1 month ago |
|
安虹睿
|
341097ef6f | 1 month ago |
|
安虹睿
|
2f59b9a618 | 1 month ago |
|
安虹睿
|
f6b37e4cb5 | 1 month ago |
|
安虹睿
|
b190182cc4 | 2 months ago |
120 changed files with 9069 additions and 100 deletions
@ -0,0 +1,5 @@ |
|||
let systemConfig = { |
|||
title:'EDI接口平台', |
|||
// 请求路径
|
|||
baseUrl: 'http://192.168.1.228:7629', |
|||
} |
|||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
@ -0,0 +1,123 @@ |
|||
// 公用API
|
|||
import request from '@/utils/request' |
|||
|
|||
// 通用post
|
|||
export function getCommonPost(url,data) { |
|||
return request({ |
|||
url: url, |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 获取分页
|
|||
export function getCommonPaged(urlName,data) { |
|||
return request({ |
|||
url: `/api/${urlName}/getdatapaged`, |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 通过id获取实体
|
|||
export function getCommonInfoById(urlName,id) { |
|||
return request({ |
|||
url: `/api/${urlName}/getbyid`, |
|||
method: 'get', |
|||
params:{id:id} |
|||
}) |
|||
} |
|||
|
|||
// 新增提交
|
|||
export function postCommonCreate(urlName,data) { |
|||
return request({ |
|||
url: `/api/${urlName}/create`, |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 修改提交
|
|||
export function putCommonUpdate(urlName,data) { |
|||
return request({ |
|||
url: `/api/${urlName}/update`, |
|||
method: 'put', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 删除提交
|
|||
export function deleteCommonApi(urlName,id) { |
|||
return request({ |
|||
url: `/api/${urlName}/delete`, |
|||
method: 'DELETE', |
|||
headers:{ |
|||
'content-type':'application/json-patch+json' |
|||
}, |
|||
data:id |
|||
}) |
|||
} |
|||
|
|||
// 导出
|
|||
export function postCommonExport(urlName,data) { |
|||
return request({ |
|||
url: `/api/${urlName}/exportdata`, |
|||
method: 'post', |
|||
responseType:'blob', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 获取导入模板
|
|||
export function getCommonImportTemplate(urlName) { |
|||
return request({ |
|||
url: `/api/${urlName}/getimporttemplate`, |
|||
method: 'get', |
|||
responseType:'blob', |
|||
}) |
|||
} |
|||
|
|||
// 手动开关
|
|||
export function getCommonCustominvoke(params) { |
|||
return request({ |
|||
url: `/api/taskconifgure/custominvoke`, |
|||
method: 'get', |
|||
params:params |
|||
}) |
|||
} |
|||
|
|||
// 获取明细列表-如：任务列表-查看详情
|
|||
export function getCommonDeatailPaged(urlName,data) { |
|||
return request({ |
|||
url: `/api/${urlName}/getdetail`, |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 通过id获取详情实体
|
|||
export function getCommonDetailById(urlName,id) { |
|||
return request({ |
|||
url: `/api/${urlName}/getdetialbyid`, |
|||
method: 'get', |
|||
params:{id:id} |
|||
}) |
|||
} |
|||
|
|||
// 手动传出（批量）
|
|||
export function postCommonConfirmMany(urlName,data) { |
|||
return request({ |
|||
url: `/api/${urlName}/confirm`, |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 保存页面（批量）
|
|||
export function postCommonUpdateMany(urlName,data) { |
|||
return request({ |
|||
url: `/api/${urlName}/batchupdate`, |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
// 下载JSON
|
|||
export function getLogJsonList(uid) { |
|||
return request({ |
|||
url: `/api/customlog/getlogrequestjsonlist`, |
|||
method: 'get', |
|||
params:{uId:uid}, |
|||
}) |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
// 是否自动执行
|
|||
export function getSetisautoByUid(params) { |
|||
return request({ |
|||
url: `/api/taskconifgure/setisauto`, |
|||
method: 'get', |
|||
params:params |
|||
}) |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
// 是否自动执行
|
|||
export function getCanceltaskByUid(id) { |
|||
return request({ |
|||
url: `/api/tasksub/canceltask`, |
|||
method: 'get', |
|||
params:{taskId:id} |
|||
}) |
|||
} |
|||
@ -0,0 +1,218 @@ |
|||
<template> |
|||
<el-dialog |
|||
v-model="dialogVisible" |
|||
:title="handleType=='create' ? '新增' : '编辑'" |
|||
width="70%" |
|||
:close-on-click-modal="false" |
|||
top="10vh" |
|||
> |
|||
<div v-loading="formLoading" style="height:calc(70vh - 50px);overflow:auto"> |
|||
<el-form |
|||
ref="editFormRef" |
|||
v-if="!formLoading" |
|||
:model="formData" |
|||
:size="'large'" |
|||
:rules="formRulesData"> |
|||
<el-row :gutter="40"> |
|||
<el-col |
|||
v-for="(item, index) in formConfig" |
|||
:span="getItemConfig(item,'colSpan') || 12" |
|||
:key="index" |
|||
> |
|||
<el-form-item |
|||
:prop="getItemConfig(item,'prop')" |
|||
:label="getItemConfig(item,'title')" |
|||
:label-width="getItemConfig(item,'labelWidth') || 180" |
|||
> |
|||
<!-- 文本 --> |
|||
<el-input |
|||
v-if="!getItemConfig(item) || getItemConfig(item) == 'input'" |
|||
v-model="formData[getItemConfig(item,'prop')]" |
|||
:placeholder="'请输入'" |
|||
:clearable="!getItemConfig(item,'noClear')" |
|||
:disabled="getItemConfig(item,'disabled')" |
|||
/> |
|||
<!-- 数字 --> |
|||
<el-input-number |
|||
v-if="getItemConfig(item) == 'number'" |
|||
v-model="formData[getItemConfig(item,'prop')]" |
|||
:min="getItemConfig(item,'min')" |
|||
:max="getItemConfig(item,'max')" |
|||
:clearable="!getItemConfig(item,'noClear')" |
|||
:disabled="getItemConfig(item,'disabled')" |
|||
/> |
|||
<!-- 时间 --> |
|||
<el-date-picker |
|||
v-if="getItemConfig(item) == 'datetime'" |
|||
v-model="formData[getItemConfig(item,'prop')]" |
|||
style="width:100%" |
|||
type="datetime" |
|||
:format="item.format || 'YYYY-MM-DD HH:mm:ss'" |
|||
:value-format="item.valueFormat || 'YYYY-MM-DD HH:mm:ss'" |
|||
:clearable="!getItemConfig(item,'noClear')" |
|||
:disabled="getItemConfig(item,'disabled')" |
|||
/> |
|||
<!-- 选择框 --> |
|||
<el-select |
|||
v-if="getItemConfig(item) == 'select' || getItemConfig(item) == 'tagFilter' || getItemConfig(item) == 'filter'" |
|||
v-model="formData[getItemConfig(item,'prop')]" |
|||
:filterable="!getItemConfig(item,'noSearch')" |
|||
placeholder="请选择" |
|||
:clearable="!getItemConfig(item,'noClear')" |
|||
:disabled="getItemConfig(item,'disabled')" |
|||
> |
|||
<el-option |
|||
v-for="(op,op_index) in getItemConfig(item,'options')" |
|||
:key="op_index" |
|||
:label="op.label" |
|||
:value="op.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
<template #footer> |
|||
<div style="padding:10px"> |
|||
<el-button el-button @click="close">取消</el-button> |
|||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确定</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
defineOptions({ name: 'apiEditPop' }) |
|||
import { reactive, ref, onMounted,nextTick,defineExpose } from 'vue' |
|||
import { ElDialog,ElMessage } from 'element-plus' |
|||
import { getCommonInfoById } from '@/api/common/index' |
|||
import apiTableColumns from '@/utils/common/apiTableColumns' |
|||
|
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
|
|||
const dialogVisible = ref(false) // 弹窗的是否展示 |
|||
const formLoading = ref(false) // 表单的加载中 |
|||
const formData = ref(null)//表单数据 |
|||
const formConfig = ref(null)//表单配置 |
|||
const handleType = ref(null)//操作方式 |
|||
const formRulesData = ref(null) |
|||
|
|||
const props = defineProps({ |
|||
// api名称 |
|||
apiName: { |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// 表单规则 |
|||
formRules:{ |
|||
type: Object, |
|||
default: null |
|||
} |
|||
}) |
|||
|
|||
/** 重置表单 */ |
|||
const resetForm = () => { |
|||
// 重置上传状态和文件 |
|||
formLoading.value = false |
|||
formData.value = null |
|||
formConfig.value = null |
|||
} |
|||
|
|||
/** 打开弹窗 */ |
|||
const open = (configs,row) => { |
|||
resetForm() |
|||
getFormRules() |
|||
nextTick(() => { |
|||
dialogVisible.value = true |
|||
formConfig.value = configs |
|||
// 编辑数据处理 |
|||
if(row){ |
|||
handleType.value='edit' |
|||
getFormData(row.uId) |
|||
}else{ |
|||
handleType.value='create' |
|||
// 新增数据处理 |
|||
formData.value = {} |
|||
configs.forEach(item=>{ |
|||
if(item.type && item.type == 'number'){ |
|||
formData.value[item.prop] = 0 |
|||
}else{ |
|||
formData.value[item.prop] = "" |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
/** 关闭弹窗 */ |
|||
const close = () => { |
|||
// 重置上传状态和文件 |
|||
resetForm() |
|||
dialogVisible.value = false |
|||
} |
|||
|
|||
// 更改加载 |
|||
const changeLoading = (data) => { |
|||
formLoading.value = data |
|||
} |
|||
|
|||
const editFormRef = ref(null)//表单配置 |
|||
// 获取验证是否通过 |
|||
const validate = (data) => { |
|||
return editFormRef.value.validate(data) |
|||
} |
|||
|
|||
defineExpose({ open,close,changeLoading,validate }) |
|||
|
|||
// 获取规则 |
|||
const getFormRules = () => { |
|||
if(props.formRules) { |
|||
formRulesData.value = props.formRules |
|||
}else{ |
|||
formRulesData.value = {} |
|||
apiTableColumns[props.apiName].forEach(item=>{ |
|||
if(item.required || (item.searchFilter && item.searchFilter.required)){ |
|||
formRulesData.value[item.prop] = [{ required: true, message: '必填项', trigger: 'blur' }] |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
|
|||
/** 获取表单 */ |
|||
const getFormData = async (uId) => { |
|||
formLoading.value = true |
|||
getCommonInfoById(props.apiName,uId) |
|||
.then(res=>{ |
|||
formData.value = res.data |
|||
formLoading.value = false |
|||
}) |
|||
.catch(err=>{ |
|||
dialogVisible.value = false |
|||
ElMessage.error('获取失败，请重试') |
|||
}) |
|||
.finally(()=>{formLoading.value = false}) |
|||
} |
|||
|
|||
// 获取类型 |
|||
const getItemConfig = (item,type='type') => { |
|||
if(item.formConfig && item.formConfig[type]){ |
|||
return item.formConfig[type] |
|||
}else{ |
|||
return item[type] |
|||
} |
|||
} |
|||
|
|||
const emits = defineEmits(['submitEditForm']) |
|||
/** 提交表单 */ |
|||
const submitForm = async () => { |
|||
emits('submitEditForm',handleType.value,formData.value,formConfig.value) |
|||
} |
|||
|
|||
|
|||
</script> |
|||
<style lang="scss" scoped> |
|||
::v-deep .el-row{ |
|||
margin:0 !important |
|||
} |
|||
</style> |
|||
@ -0,0 +1,920 @@ |
|||
<template> |
|||
<div class="app-container" v-loading="state.loading"> |
|||
<!-- 查询头部 --> |
|||
<el-card class="search-container" v-if="!(props.hideSearch && props.hideSetColums)"> |
|||
<el-form :inline="true" v-if="!props.hideSearch"> |
|||
<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" |
|||
style="width:370px" |
|||
/> |
|||
<!-- 选择框 --> |
|||
<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)" |
|||
style="margin-right: 10px" |
|||
>{{btn.label}}</el-button> |
|||
<!-- 字段设置 --> |
|||
<setColumsPop |
|||
style="margin-left: auto;" |
|||
:localTableColumnsName="state.localTableColumnsName" |
|||
:initTableColums="state.initTableColums" |
|||
:tableColumns="getTableColumns()" |
|||
v-if="!props.hideSetColums" |
|||
></setColumsPop> |
|||
</div> |
|||
</el-card> |
|||
<!-- 头部详情 --> |
|||
<el-card v-loading="state.detailLoading" class="headerInfo-container" v-if="!props.hideHeaderInfo"> |
|||
<el-descriptions label-width="120" :title="`当前页【第${getIndexById()}行】数据信息`" :border="true" :column="5" 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 |
|||
ref="table_Ref" |
|||
: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" |
|||
:tableRowClassName="tableRowClassName" |
|||
:showTableIndex="props.showTableIndex" |
|||
></elTable> |
|||
|
|||
<!-- :tableFormRules="state.tableFormRulesData" --> |
|||
|
|||
<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, |
|||
postCommonConfirmMany, |
|||
postCommonUpdateMany |
|||
} 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 setColumsPop from '@/components/setColumsPop/index.vue' |
|||
import { getPageParamsForFilter,getLocalTableColumnsName } 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:[{name:'pageSave',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:[], |
|||
//初始化表头，未从缓存获取之前 |
|||
initTableColums:[], |
|||
localTableColumnsName:null, |
|||
//tabel内部表单验证 |
|||
tableFormRulesData:null, |
|||
}) |
|||
|
|||
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 |
|||
}, |
|||
// 序号 |
|||
showTableIndex:{ |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 左侧操作列 |
|||
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 |
|||
}, |
|||
// table内表单规则 |
|||
tableFormRules:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 隐藏头部明细 |
|||
hideHeaderInfo:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 可编辑单元格判断禁用规则，默认为readState=true为禁用， |
|||
// 如有特殊规则，则使用该方法特殊处理,当前判断方式为“=”，如后期有其他需求再进行封装 |
|||
editDisabledConfig:{ |
|||
type: Object, |
|||
default: [ |
|||
{prop:'readState',ruleValue:true}, |
|||
// {prop:'releaseEdition',ruleValue:'2024121901'}, |
|||
] |
|||
}, |
|||
// 隐藏字段设置 |
|||
hideSetColums:{ |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}) |
|||
|
|||
// 获取表头 noFilter 获取不需要处理字段设置的值 |
|||
function getTableColumns(noFilter){ |
|||
if(noFilter){ |
|||
return props.tableColumns || apiTableColumns[props.apiName] |
|||
}else{ |
|||
state.localTableColumnsName = getLocalTableColumnsName(useRoute().name) |
|||
if(props.apiType == 'detailApi'){ |
|||
state.localTableColumnsName = getLocalTableColumnsName(props.apiName+'Detail') |
|||
} |
|||
let _local = JSON.parse(localStorage.getItem(state.localTableColumnsName)) |
|||
state.initTableColums = props.tableColumns || apiTableColumns[props.apiName] |
|||
let _list = _local && _local != null && _local != undefined ? _local : JSON.parse(JSON.stringify(state.initTableColums)) |
|||
return _list |
|||
} |
|||
// 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 = props.tableColumns || apiTableColumns[props.apiName] |
|||
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 = [] |
|||
state.currentDetailId = null |
|||
state.headerInfoData = [] |
|||
state.tableSelectList = [] |
|||
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 = props.tableColumns || apiTableColumns[props.apiName] |
|||
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(_data) |
|||
.then((res) => { |
|||
ElMessage.success('操作成功！') |
|||
getTableData(1)//同步数据查询 |
|||
}) |
|||
.finally(() => (state.loading = false)) |
|||
}) |
|||
} |
|||
// 手动传出（多选） |
|||
else if (btn == 'outputMany'){ |
|||
let _idEditData = checkPageEditList() |
|||
if(_idEditData && _idEditData.length > 0){ |
|||
return ElMessage.warning('当前有未保存修改项，请先保存页面') |
|||
} |
|||
if(!state.tableSelectList || state.tableSelectList.length <= 0 ){ |
|||
return ElMessage.warning('未选中任何数据') |
|||
} |
|||
ElMessageBox.confirm('是否确定手动传出？', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
state.loading = true |
|||
postCommonConfirmMany(props.apiName,state.tableSelectList) |
|||
.then(res=>{ |
|||
ElMessage.success('操作成功！') |
|||
getTableData(1) |
|||
}) |
|||
.finally(()=>{state.loading = false}) |
|||
}) |
|||
} |
|||
} |
|||
const table_Ref = ref(null) |
|||
// 头部右侧按钮功能 |
|||
function searchRightBtnHandle(btn){ |
|||
// 保存页面 |
|||
if(btn.name == 'pageSave'){ |
|||
// table_Ref.value.tableForm_Ref.validate((valid)=>{ |
|||
// if(valid){ |
|||
let _idEditData = checkPageEditList() |
|||
if(!_idEditData || _idEditData.length <= 0)return ElMessage.warning('暂无数据修改') |
|||
// 判断规则 目前风险页面通用，暂时写在通用方式中，如果后期有区别，可拿到页面外处理 |
|||
// 规则：反馈结果[feedbackResults]=1时，风险类型[ventureType],具体风险[ventureSpecific],应对措施[measures]必填 |
|||
let _indexs = [] |
|||
_idEditData.forEach(item=>{ |
|||
if(item.feedbackResults == '1' && ( |
|||
!item.ventureType || item.ventureType == '' || |
|||
!item.ventureSpecific || item.ventureSpecific == '' || |
|||
!item.measures || item.measures == '' |
|||
)){ |
|||
_indexs.push(getIndexById(item.id)) |
|||
} |
|||
}) |
|||
if(_indexs && _indexs.length > 0){ |
|||
return ElMessage.error(`修改数据中【第${_indexs}行】数据中，【反馈结果】为异常，但【风险类型】或【具体风险】或【应对措施】为空，请修改后重新提交！`) |
|||
} |
|||
ElMessageBox.confirm('是否确定提交更改？', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
state.loading = true |
|||
postCommonUpdateMany(props.apiName,_idEditData) |
|||
.then(res=>{ |
|||
ElMessage.success('操作成功！') |
|||
getTableData(1) |
|||
}) |
|||
.finally(()=>{state.loading = false}) |
|||
}) |
|||
// } |
|||
// }) |
|||
} |
|||
} |
|||
|
|||
// 排序 |
|||
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 getIndexById(id){ |
|||
let _id = id || state.currentDetailId |
|||
for(let i=0;i<state.stage_tableData.length;i++){ |
|||
if(state.stage_tableData[i].id == _id){ |
|||
return i + 1 |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 检查行数据是否符合禁用规则 |
|||
function checkDisableByRowRule(row){ |
|||
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 |
|||
} |
|||
|
|||
// 判断可编辑元素是否禁用 |
|||
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 |
|||
} |
|||
// 行条件禁用 |
|||
return checkDisableByRowRule(row) |
|||
} |
|||
|
|||
// table的复选框是否禁用判断 |
|||
function selectableDisabled(row,index){ |
|||
// 无权限禁用 |
|||
let _auth = auths.hasPermission(props.apiName+':outputMany') |
|||
// 已修改禁用 |
|||
let _idEditData = checkPageEditList() |
|||
// 行条件禁用(暂时与编辑页面用一个条件，如有区别再进行封装) |
|||
let checkRow = checkDisableByRowRule(row) |
|||
return _auth && (!_idEditData || _idEditData.length <= 0) && !checkRow |
|||
} |
|||
|
|||
// 可编辑元素Focus事件 todo:如果加上表单验证后，需要处理表单点击 |
|||
function getItemDetail(type,row,eventType) { |
|||
if(!row.id){return ElMessage.error('该数据无id')} |
|||
// 如果是相同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 = [] |
|||
let _colums = apiTableColumns[props.detailColumName] |
|||
_colums.forEach(item=>{ |
|||
state.headerInfoData.push({ |
|||
label:item.title, |
|||
value:res.data[item.prop] |
|||
}) |
|||
}) |
|||
}) |
|||
.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 |
|||
} |
|||
} |
|||
|
|||
// 行变色 |
|||
function tableRowClassName(data){ |
|||
if(data.row.id && (data.row.id == state.currentDetailId)){return 'current-select-tableRow'} |
|||
else{return 'normal-tableRow'} |
|||
} |
|||
|
|||
// 根据apiTableColumns转义table内表单默认规则 |
|||
function getTableFormRules(){ |
|||
if(props.tableFormRules) { |
|||
state.tableFormRulesData = props.tableFormRules |
|||
}else{ |
|||
state.tableFormRulesData = {} |
|||
apiTableColumns[props.apiName].forEach(item=>{ |
|||
if(item.required){ |
|||
state.tableFormRulesData[item.prop] = [{ required: true, message: '必填项', trigger: 'change' }] |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
|
|||
onMounted(() => { |
|||
// getTableFormRules() |
|||
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:195px; |
|||
.el-empty__image{ |
|||
width:90px !important |
|||
} |
|||
} |
|||
::v-deep .el-descriptions__body{ |
|||
max-height: 165px; |
|||
overflow: auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,998 @@ |
|||
<template> |
|||
<div class="app-container" v-loading="state.loading"> |
|||
<!-- 查询头部 --> |
|||
<el-card class="search-container" v-if="!(props.hideSearch && props.hideSetColums)"> |
|||
<el-form :inline="true" v-if="!props.hideSearch"> |
|||
<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" |
|||
style="width:370px" |
|||
/> |
|||
<!-- 选择框 --> |
|||
<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> |
|||
<div style="margin-right:10px" v-for="(btn,btn_key) in props.searchButtons" :key="btn_key"> |
|||
<!-- 导出 --> |
|||
<!-- <el-dropdown |
|||
v-auth="(props.authName || props.apiName) + state.searchBtnOptions[btn].auth" |
|||
:hide-on-click="false" |
|||
v-if="state.searchBtnOptions[btn].auth == ':export'" |
|||
> |
|||
<el-button |
|||
:icon="state.searchBtnOptions[btn].icon" |
|||
:type="state.searchBtnOptions[btn].type"> |
|||
{{state.searchBtnOptions[btn].label}} |
|||
<el-icon class="el-icon--right"><arrow-down /></el-icon> |
|||
</el-button> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item @click="exportHandle()">按条件导出【当前页】</el-dropdown-item> |
|||
<el-dropdown-item divided @click="exportHandle(true)">按条件导出【全部】</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> --> |
|||
<!-- 其他按钮 --> |
|||
<el-button |
|||
:icon="state.searchBtnOptions[btn].icon" |
|||
v-auth="(props.authName || props.apiName) + state.searchBtnOptions[btn].auth" |
|||
:type="state.searchBtnOptions[btn].type" |
|||
@click="searchBtnHandle(btn)" |
|||
>{{state.searchBtnOptions[btn].label}}</el-button> |
|||
</div> |
|||
</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)" |
|||
style="margin-right: 10px" |
|||
>{{btn.label}}</el-button> |
|||
<!-- 字段设置 --> |
|||
<setColumsPop |
|||
style="margin-left: auto;" |
|||
:localTableColumnsName="state.localTableColumnsName" |
|||
:initTableColums="state.initTableColums" |
|||
:tableColumns="getTableColumns()" |
|||
v-if="!props.hideSetColums" |
|||
></setColumsPop> |
|||
</div> |
|||
</el-card> |
|||
<!-- 头部详情 --> |
|||
<el-card v-loading="state.detailLoading" class="headerInfo-container" v-if="!props.hideHeaderInfo"> |
|||
<el-descriptions label-width="120" :title="`当前页【第${getIndexById()}行】数据信息`" :border="true" :column="5" 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 |
|||
ref="table_Ref" |
|||
: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" |
|||
:tableRowClassName="tableRowClassName" |
|||
:showTableIndex="props.showTableIndex" |
|||
></elTable> |
|||
|
|||
<!-- :tableFormRules="state.tableFormRulesData" --> |
|||
|
|||
<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, |
|||
postCommonConfirmMany, |
|||
postCommonUpdateMany |
|||
} 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 setColumsPop from '@/components/setColumsPop/index.vue' |
|||
import { getPageParamsForFilter,getLocalTableColumnsName } 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:[{name:'pageSave',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:[], |
|||
//初始化表头，未从缓存获取之前 |
|||
initTableColums:[], |
|||
localTableColumnsName:null, |
|||
//tabel内部表单验证 |
|||
tableFormRulesData:null, |
|||
}) |
|||
|
|||
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 |
|||
}, |
|||
// 序号 |
|||
showTableIndex:{ |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 左侧操作列 |
|||
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 |
|||
}, |
|||
// table内表单规则 |
|||
tableFormRules:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 隐藏头部明细 |
|||
hideHeaderInfo:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 可编辑单元格/勾选框判断禁用规则，默认为readState=true为禁用， |
|||
// 如有特殊规则，则使用该方法特殊处理,当前判断方式为“=”，如后期有其他需求再进行封装 |
|||
editDisabledConfig:{ |
|||
type: Object, |
|||
default: [ |
|||
{prop:'readState',ruleValue:true}, |
|||
// {prop:'releaseEdition',ruleValue:'2024121901'}, |
|||
] |
|||
}, |
|||
// 隐藏字段设置 |
|||
hideSetColums:{ |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}) |
|||
|
|||
// 获取表头 noFilter 获取不需要处理字段设置的值 |
|||
function getTableColumns(noFilter){ |
|||
if(noFilter){ |
|||
return props.tableColumns || apiTableColumns[props.apiName] |
|||
}else{ |
|||
state.localTableColumnsName = getLocalTableColumnsName(useRoute().name) |
|||
if(props.apiType == 'detailApi'){ |
|||
state.localTableColumnsName = getLocalTableColumnsName(props.apiName+'Detail') |
|||
} |
|||
let _local = JSON.parse(localStorage.getItem(state.localTableColumnsName)) |
|||
state.initTableColums = props.tableColumns || apiTableColumns[props.apiName] |
|||
let _list = _local && _local != null && _local != undefined ? _local : JSON.parse(JSON.stringify(state.initTableColums)) |
|||
return _list |
|||
} |
|||
// 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 = props.tableColumns || apiTableColumns[props.apiName] |
|||
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(pageSize){ |
|||
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) && props.searchFilter[i] != ""){ |
|||
// 时间区域格式 |
|||
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:pageSize || state.pager.pageSize, |
|||
sortBy:state.sortFilter.sortBy, |
|||
isAscending:state.sortFilter.isAscending, |
|||
condition:{ |
|||
filters:_filters |
|||
} |
|||
}) |
|||
return _pageParams |
|||
} |
|||
|
|||
// 获取页面数据 |
|||
function getTableData(page,callback) { |
|||
state.stage_indexs = [] |
|||
state.currentDetailId = null |
|||
state.headerInfoData = [] |
|||
state.tableSelectList = [] |
|||
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 |
|||
if(callback)callback(resp) |
|||
}) |
|||
.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 |
|||
if(callback)callback(resp) |
|||
}) |
|||
.catch(err=>{ElMessage.error('数据获取失败！')}) |
|||
.finally(() => (state.loading = false)) |
|||
} |
|||
} |
|||
|
|||
|
|||
// 导出 |
|||
function exportHandle(isAll){ |
|||
state.loading = true |
|||
//同步数据查询 |
|||
getTableData(1,(res=>{ |
|||
let _params = getPageParams() |
|||
if(isAll){_params = getPageParams(res.data.totalCount)} |
|||
postCommonExport(props.apiName,_params) |
|||
.then((res) => { |
|||
let _str = isAll ? '全部' : '当页' |
|||
downloadByData(res.data,route.meta.title+`.xlsx`) |
|||
}) |
|||
.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 = props.tableColumns || apiTableColumns[props.apiName] |
|||
let _list = _tableColums.filter(item => !item.noEdit) |
|||
apiEditPopRef.value.open(_list) |
|||
}) |
|||
} |
|||
// 导入 |
|||
else if (btn == 'import'){ |
|||
beforClearEdit().then(() => { |
|||
importPopRef.value.open() |
|||
}) |
|||
} |
|||
// 导出（按条件导出当前页） |
|||
else if (btn == 'export'){ |
|||
exportHandle() |
|||
} |
|||
// 手动开关 |
|||
else if (btn == 'custominvoke'){ |
|||
beforClearEdit().then(() => { |
|||
state.loading = true |
|||
let _data = { |
|||
taskName:apiServeNames[props.apiName].taskName, |
|||
client:'Chery' |
|||
} |
|||
getCommonCustominvoke(_data) |
|||
.then((res) => { |
|||
ElMessage.success('操作成功！') |
|||
getTableData(1)//同步数据查询 |
|||
}) |
|||
.finally(() => (state.loading = false)) |
|||
}) |
|||
} |
|||
// 手动传出（多选） |
|||
else if (btn == 'outputMany'){ |
|||
let _idEditData = checkPageEditList() |
|||
if(_idEditData && _idEditData.length > 0){ |
|||
return ElMessage.warning('当前有未保存修改项，请先保存页面') |
|||
} |
|||
if(!state.tableSelectList || state.tableSelectList.length <= 0 ){ |
|||
return ElMessage.warning('未选中任何数据') |
|||
} |
|||
ElMessageBox.confirm('是否确定手动传出？', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
state.loading = true |
|||
postCommonConfirmMany(props.apiName,state.tableSelectList) |
|||
.then(res=>{ |
|||
ElMessage.success('操作成功！') |
|||
getTableData(1) |
|||
}) |
|||
.finally(()=>{state.loading = false}) |
|||
}) |
|||
} |
|||
} |
|||
const table_Ref = ref(null) |
|||
// 头部右侧按钮功能 |
|||
function searchRightBtnHandle(btn){ |
|||
// 保存页面 |
|||
if(btn.name == 'pageSave'){ |
|||
// table_Ref.value.tableForm_Ref.validate((valid)=>{ |
|||
// if(valid){ |
|||
let _idEditData = checkPageEditList() |
|||
if(!_idEditData || _idEditData.length <= 0)return ElMessage.warning('暂无数据修改') |
|||
// 判断规则 目前风险页面通用，暂时写在通用方式中，如果后期有区别，可拿到页面外处理 |
|||
// 规则：反馈结果[feedbackResults]=1时，风险类型[ventureType],具体风险[ventureSpecific],应对措施[measures]必填 |
|||
let _indexs = [] |
|||
_idEditData.forEach(item=>{ |
|||
if(item.feedbackResults == '1' && ( |
|||
!item.ventureType || item.ventureType == '' || |
|||
!item.ventureSpecific || item.ventureSpecific == '' || |
|||
!item.measures || item.measures == '' |
|||
)){ |
|||
_indexs.push(getIndexById(item.id)) |
|||
} |
|||
}) |
|||
if(_indexs && _indexs.length > 0){ |
|||
return ElMessage.error(`修改数据中【第${_indexs}行】数据中，【反馈结果】为异常，但【风险类型】或【具体风险】或【应对措施】为空，请修改后重新提交！`) |
|||
} |
|||
ElMessageBox.confirm('是否确定提交更改？', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
state.loading = true |
|||
postCommonUpdateMany(props.apiName,_idEditData) |
|||
.then(res=>{ |
|||
ElMessage.success('操作成功！') |
|||
getTableData(1) |
|||
}) |
|||
.finally(()=>{state.loading = false}) |
|||
}) |
|||
// } |
|||
// }) |
|||
} |
|||
} |
|||
|
|||
// 排序 |
|||
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 getIndexById(id){ |
|||
let _id = id || state.currentDetailId |
|||
for(let i=0;i<state.stage_tableData.length;i++){ |
|||
if(state.stage_tableData[i].id == _id){ |
|||
return i + 1 |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 检查行数据是否符合禁用规则 |
|||
function checkDisableByRowRule(row,item){ |
|||
let hasDisable = false |
|||
// 根据editDisabledConfig规则处理禁用 |
|||
for(let i = 0;i<props.editDisabledConfig.length;i++){ |
|||
if(row[props.editDisabledConfig[i].prop] == props.editDisabledConfig[i].ruleValue){ |
|||
hasDisable = true |
|||
break |
|||
} |
|||
} |
|||
// 根据反馈结果特殊处理，如果为无异常，其他不可编辑 |
|||
// （现所有风险页面，规则相同，所以统一再此处理，如果有更改需要重新做封装处理） |
|||
// 如果上方规则为可编辑则再进行此判断 |
|||
if(!hasDisable && row.feedbackResults == '0' && item.prop != 'feedbackResults'){ |
|||
hasDisable = true |
|||
} |
|||
return hasDisable |
|||
} |
|||
|
|||
// 检查行的勾选框是否符合禁用规则 |
|||
function checkDisableCheckByRowRule(row){ |
|||
// 暂时与编辑页面用一个条件【editDisabledConfig】，如有区别再进行封装 |
|||
let hasDisable = false |
|||
// 根据editDisabledConfig规则处理禁用 |
|||
for(let i = 0;i<props.editDisabledConfig.length;i++){ |
|||
if(row[props.editDisabledConfig[i].prop] == props.editDisabledConfig[i].ruleValue){ |
|||
hasDisable = true |
|||
break |
|||
} |
|||
} |
|||
return hasDisable |
|||
} |
|||
|
|||
// 判断可编辑元素是否禁用 |
|||
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 |
|||
} |
|||
// 行条件禁用 |
|||
return checkDisableByRowRule(row,item) |
|||
} |
|||
|
|||
// table的复选框是否禁用判断 |
|||
function selectableDisabled(row,index){ |
|||
// 无权限禁用 |
|||
let _auth = auths.hasPermission(props.apiName+':outputMany') |
|||
// 已修改禁用 |
|||
let _idEditData = checkPageEditList() |
|||
// 行条件禁用 |
|||
let checkRow = checkDisableCheckByRowRule(row) |
|||
return _auth && (!_idEditData || _idEditData.length <= 0) && !checkRow |
|||
} |
|||
|
|||
// 可编辑元素Focus事件 todo:如果加上表单验证后，需要处理表单点击 |
|||
function getItemDetail(type,row,eventType) { |
|||
if(!row.id){return ElMessage.error('该数据无id')} |
|||
// 如果是相同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 = [] |
|||
let _colums = apiTableColumns[props.detailColumName] |
|||
_colums.forEach(item=>{ |
|||
state.headerInfoData.push({ |
|||
label:item.title, |
|||
value:res.data[item.prop], |
|||
prop:item.prop |
|||
}) |
|||
}) |
|||
}) |
|||
.finally(() => (state.detailLoading = false)) |
|||
|
|||
} |
|||
|
|||
// 可编辑元素change事件 |
|||
function editItemChangeHandle(item,scope,data) { |
|||
if(state.stage_indexs.indexOf(scope.$index) < 0){ |
|||
state.stage_indexs.push(scope.$index) |
|||
} |
|||
// 更改反馈结果 |
|||
// 现所有风险页面，规则相同，所以统一再此处理，如果有更改需要重新做封装处理 |
|||
if(item.prop == "feedbackResults"){ |
|||
// 如果反馈结果更改为无异常 |
|||
if(scope.row.feedbackResults == '0'){ |
|||
// 清空类型，风险，措施 |
|||
scope.row.ventureType = "" |
|||
scope.row.ventureSpecific = "" |
|||
scope.row.measures = "" |
|||
// 其他数值恢复为原数据(明细中的值) |
|||
// 风险页面与明细对应数量匹配prop |
|||
let _tableColums = props.tableColumns || apiTableColumns[props.apiName] |
|||
for(let prop in scope.row){ |
|||
let _item = _tableColums.filter(item=>item.prop == prop) |
|||
if(_item && _item.length > 0 && _item[0].relevProp){ |
|||
let _relevProp = _item[0].relevProp |
|||
let _list = state.headerInfoData.filter(item=>item.prop == _relevProp) |
|||
if(_list && _list.length>0){ |
|||
scope.row[prop] = _list[0].value |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 其他操作清空保存前提示 |
|||
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 |
|||
} |
|||
} |
|||
|
|||
// 行变色 |
|||
function tableRowClassName(data){ |
|||
if(data.row.id && (data.row.id == state.currentDetailId)){return 'current-select-tableRow'} |
|||
else{return 'normal-tableRow'} |
|||
} |
|||
|
|||
// 根据apiTableColumns转义table内表单默认规则 |
|||
function getTableFormRules(){ |
|||
if(props.tableFormRules) { |
|||
state.tableFormRulesData = props.tableFormRules |
|||
}else{ |
|||
state.tableFormRulesData = {} |
|||
apiTableColumns[props.apiName].forEach(item=>{ |
|||
if(item.required){ |
|||
state.tableFormRulesData[item.prop] = [{ required: true, message: '必填项', trigger: 'change' }] |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
|
|||
onMounted(() => { |
|||
// getTableFormRules() |
|||
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:195px; |
|||
.el-empty__image{ |
|||
width:90px !important |
|||
} |
|||
} |
|||
::v-deep .el-descriptions__body{ |
|||
max-height: 165px; |
|||
overflow: auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,65 @@ |
|||
<template> |
|||
<el-pagination |
|||
:currentPage="props.pager.page" |
|||
:page-size="props.pager.pageSize" |
|||
:total="props.pager.total" |
|||
:background="props.pageBackGround" |
|||
:layout="props.pageLayout" |
|||
:hide-on-single-page="props.isHideOnlyOne" |
|||
:page-sizes="props.pageSizeList" |
|||
@size-change="pageSizeChange" |
|||
@current-change="pageCurrentChange" |
|||
/> |
|||
</template> |
|||
|
|||
<script setup> |
|||
defineOptions({ name: 'elPager' }) |
|||
import { reactive, ref, onMounted,watch } from 'vue' |
|||
import { ElMessageBox, ElMessage,ElPagination } from 'element-plus' |
|||
|
|||
const props = defineProps({ |
|||
// table分页 |
|||
pager: { |
|||
type: Object, |
|||
default: {} |
|||
}, |
|||
// 分页显示内容 |
|||
pageLayout: { |
|||
type: String, |
|||
default: 'total, sizes,prev, pager, next' |
|||
}, |
|||
// 只有一页是否隐藏 |
|||
isHideOnlyOne:{ |
|||
type:Boolean, |
|||
default: false |
|||
}, |
|||
// 是否有底色 |
|||
pageBackGround:{ |
|||
type:Boolean, |
|||
default: true |
|||
}, |
|||
// 页数下拉 |
|||
pageSizeList:{ |
|||
type: Object, |
|||
default: [10, 20, 50, 100] |
|||
}, |
|||
}) |
|||
|
|||
const emits = defineEmits(['pageSizeChange', 'pageCurrentChange']) |
|||
|
|||
// size-change |
|||
function pageSizeChange(pageSize){ |
|||
emits('pageSizeChange',pageSize) |
|||
} |
|||
|
|||
// current-change |
|||
function pageCurrentChange(page){ |
|||
emits('pageCurrentChange',page) |
|||
} |
|||
|
|||
onMounted(() => {}) |
|||
|
|||
</script> |
|||
|
|||
<style></style> |
|||
|
|||
@ -0,0 +1,368 @@ |
|||
<template> |
|||
<el-table |
|||
ref="table_Ref" |
|||
row-key="id" |
|||
:data="props.tableData" |
|||
:border="true" |
|||
@sort-change="sortChange" |
|||
@selection-change="tableSelectionHandle" |
|||
:row-class-name="props.tableRowClassName" |
|||
:cell-class-name="props.tableCellClassName" |
|||
> |
|||
<!-- 多选框 --> |
|||
<el-table-column |
|||
v-if="props.multipleTable" |
|||
type="selection" |
|||
:fixed="'left'" |
|||
width="55" |
|||
:selectable="selectableDisabled" |
|||
/> |
|||
<!-- 序号 --> |
|||
<el-table-column v-if="props.showTableIndex" :fixed="'left'" type="index" width="50" /> |
|||
<!-- 左侧操作列 --> |
|||
<el-table-column |
|||
v-if="props.leftOperation && props.leftOperation.length > 0" |
|||
:fixed="'left'" |
|||
:width="props.leftOperationColumnWidth" |
|||
label="操作" |
|||
:align="'center'"> |
|||
<template #default="scope"> |
|||
<el-button |
|||
v-for="(btn,index) in props.leftOperation" |
|||
:key="index" |
|||
: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> |
|||
<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 |
|||
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 |
|||
v-if="props.rightOperation && props.rightOperation.length > 0" |
|||
v-auth-any="getShowRightOpera()" |
|||
:fixed="'right'" |
|||
:width="props.rightOperationColumnWidth" |
|||
:align="'center'" |
|||
label="操作"> |
|||
<template #default="scope"> |
|||
<el-button |
|||
v-for="(btn,index) in props.rightOperation" |
|||
v-show="typeof btn.hide == 'function' ? !btn.hide(scope.row,scope) : !btn.hide" |
|||
:key="index" |
|||
:type="btn.type" |
|||
:link="btn.link" |
|||
@click="rightOperationHadel(btn,scope)" |
|||
v-auth="btn.auth" |
|||
>{{btn.label}}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</template> |
|||
|
|||
<script setup> |
|||
defineOptions({ name: 'elTable' }) |
|||
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"; |
|||
import { getLocalTableColumnsName } from '@/utils/common/index' |
|||
|
|||
const props = defineProps({ |
|||
// 特殊的column缓存名称 |
|||
specialLocalColumnName:{ |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// 多选 |
|||
multipleTable:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 序号 |
|||
showTableIndex:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 左侧操作列 |
|||
leftOperation:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 左侧操作列宽度 |
|||
leftOperationColumnWidth:{ |
|||
type: Number, |
|||
default: 120 |
|||
}, |
|||
// 右侧操作列 |
|||
rightOperation:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 右侧操作列宽度 |
|||
rightOperationColumnWidth:{ |
|||
type: Number, |
|||
default: 150 |
|||
}, |
|||
// table数据 |
|||
tableData: { |
|||
type: Object, |
|||
default: [] |
|||
}, |
|||
// table表头 |
|||
tableColumns: { |
|||
type: Object, |
|||
default: [] |
|||
}, |
|||
// 表头宽度 |
|||
columnWidth:{ |
|||
type: Number, |
|||
default: null |
|||
}, |
|||
// 表头对齐 |
|||
columnHeaderAlign:{ |
|||
type: String, |
|||
default: 'center' |
|||
}, |
|||
// 表内容对齐 |
|||
columnAlign:{ |
|||
type: String, |
|||
default: 'center' |
|||
}, |
|||
// 可编辑单元格判断禁用 |
|||
getEditItemDisabled:{ |
|||
type: [Function,Boolean], |
|||
default: false |
|||
}, |
|||
// table的复选框是否禁用判断 |
|||
selectableDisabled:{ |
|||
type: [Function,Boolean], |
|||
default: true |
|||
}, |
|||
// 行class |
|||
tableRowClassName:{ |
|||
type: Function, |
|||
default: null |
|||
}, |
|||
// 单元格class |
|||
tableCellClassName:{ |
|||
type: Function, |
|||
default: null |
|||
}, |
|||
}) |
|||
|
|||
const innerTableColums = ref([]) |
|||
innerTableColums.value = props.tableColumns |
|||
|
|||
const emits = defineEmits([ |
|||
'sortChange', |
|||
'leftOperationHadel', |
|||
'rightOperationHadel', |
|||
'tableSelectionHandle', |
|||
'editItemFocusHandle', |
|||
'editItemChangeHandle', |
|||
'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) |
|||
} |
|||
|
|||
// 格式化时间 |
|||
function formatTableDate(time) { |
|||
let _time = '-' |
|||
if (time) { _time = formatTimeStrToStr(time) } |
|||
return _time |
|||
} |
|||
|
|||
// 格式化TagFilter |
|||
function formatTableTagFilter(type,row,item){ |
|||
let _op = item.options.filter(op=>op.value == row[item.prop]) |
|||
if(!_op || _op.length <=0 || !_op[0][type]){ |
|||
if(type=='type'){return 'info'} |
|||
else{return '--'} |
|||
}else{ |
|||
return _op[0][type] |
|||
} |
|||
} |
|||
|
|||
|
|||
//排序 |
|||
function sortChange(data) { |
|||
emits('sortChange',data) |
|||
} |
|||
|
|||
// 左侧操作列 |
|||
function leftOperationHadel(btn,scope) { |
|||
emits('leftOperationHadel',btn,scope) |
|||
} |
|||
|
|||
// 判断是否显示右侧操作权限 |
|||
function getShowRightOpera(){ |
|||
let _arr = [] |
|||
props.rightOperation.forEach(item=>{_arr.push(item.auth)}) |
|||
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) |
|||
} |
|||
|
|||
defineExpose({ |
|||
table_Ref, |
|||
}) |
|||
|
|||
onMounted(() => {}) |
|||
|
|||
</script> |
|||
|
|||
<style scope lang="scss"> |
|||
.current-select-tableRow{ |
|||
background:#e1f3d8 !important; |
|||
td{ |
|||
background:#e1f3d8 !important; |
|||
} |
|||
} |
|||
.normal-tableRow{ |
|||
td{ |
|||
background:#fff; |
|||
} |
|||
} |
|||
.table-danger-row{ |
|||
background:#ffe8e8 !important; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,336 @@ |
|||
<template> |
|||
<el-table |
|||
ref="tableRef" |
|||
row-key="id" |
|||
:data="props.tableData" |
|||
:border="true" |
|||
@sort-change="sortChange" |
|||
@selection-change="tableSelectionHandle" |
|||
:row-class-name="props.tableRowClassName" |
|||
:cell-class-name="props.tableCellClassName" |
|||
> |
|||
<!-- 多选框 --> |
|||
<el-table-column |
|||
v-if="props.multipleTable" |
|||
type="selection" |
|||
:fixed="'left'" |
|||
width="55" |
|||
:selectable="selectableDisabled" |
|||
/> |
|||
<!-- 序号 --> |
|||
<el-table-column v-if="props.showTableIndex" :fixed="'left'" type="index" width="50" /> |
|||
<!-- 左侧操作列 --> |
|||
<el-table-column |
|||
v-if="props.leftOperation && props.leftOperation.length > 0" |
|||
:fixed="'left'" |
|||
:width="props.leftOperationColumnWidth" |
|||
label="操作" |
|||
:align="'center'"> |
|||
<template #default="scope"> |
|||
<el-button |
|||
v-for="(btn,index) in props.leftOperation" |
|||
:key="index" |
|||
:type="btn.type" |
|||
:link="btn.link" |
|||
@click="leftOperationHadel(btn,scope)" |
|||
>{{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" |
|||
: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" |
|||
/> |
|||
</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-table-column |
|||
v-if="props.rightOperation && props.rightOperation.length > 0" |
|||
v-auth-any="getShowRightOpera()" |
|||
:fixed="'right'" |
|||
:width="props.rightOperationColumnWidth" |
|||
:align="'center'" |
|||
label="操作"> |
|||
<template #default="scope"> |
|||
<el-button |
|||
v-for="(btn,index) in props.rightOperation" |
|||
v-show="typeof btn.hide == 'function' ? !btn.hide(scope.row,scope) : !btn.hide" |
|||
:key="index" |
|||
:type="btn.type" |
|||
:link="btn.link" |
|||
@click="rightOperationHadel(btn,scope)" |
|||
v-auth="btn.auth" |
|||
>{{btn.label}}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</template> |
|||
|
|||
<script setup> |
|||
defineOptions({ name: 'elTable' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import { ElMessageBox, ElMessage,ElTable, ElTableColumn } from 'element-plus' |
|||
import { formatTimeStrToStr } from "@/utils/formatTime"; |
|||
|
|||
const state = reactive({}) |
|||
|
|||
const props = defineProps({ |
|||
// 多选 |
|||
multipleTable:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 序号 |
|||
showTableIndex:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 左侧操作列 |
|||
leftOperation:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 左侧操作列宽度 |
|||
leftOperationColumnWidth:{ |
|||
type: Number, |
|||
default: 120 |
|||
}, |
|||
// 右侧操作列 |
|||
rightOperation:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 右侧操作列宽度 |
|||
rightOperationColumnWidth:{ |
|||
type: Number, |
|||
default: 150 |
|||
}, |
|||
// table数据 |
|||
tableData: { |
|||
type: Object, |
|||
default: [] |
|||
}, |
|||
// table表头 |
|||
tableColumns: { |
|||
type: Object, |
|||
default: [] |
|||
}, |
|||
// 表头宽度 |
|||
columnWidth:{ |
|||
type: Number, |
|||
default: null |
|||
}, |
|||
// 表头对齐 |
|||
columnHeaderAlign:{ |
|||
type: String, |
|||
default: 'center' |
|||
}, |
|||
// 表内容对齐 |
|||
columnAlign:{ |
|||
type: String, |
|||
default: 'center' |
|||
}, |
|||
// 可编辑单元格判断禁用 |
|||
getEditItemDisabled:{ |
|||
type: [Function,Boolean], |
|||
default: false |
|||
}, |
|||
// table的复选框是否禁用判断 |
|||
selectableDisabled:{ |
|||
type: [Function,Boolean], |
|||
default: true |
|||
}, |
|||
// 行class |
|||
tableRowClassName:{ |
|||
type: Function, |
|||
default: null |
|||
}, |
|||
// 单元格class |
|||
tableCellClassName:{ |
|||
type: Function, |
|||
default: null |
|||
}, |
|||
}) |
|||
|
|||
const emits = defineEmits([ |
|||
'sortChange', |
|||
'leftOperationHadel', |
|||
'rightOperationHadel', |
|||
'tableSelectionHandle', |
|||
'editItemFocusHandle', |
|||
'editItemChangeHandle', |
|||
'editItemClearHandle', |
|||
]) |
|||
|
|||
// 多选 |
|||
function tableSelectionHandle (val){ |
|||
emits('tableSelectionHandle',val) |
|||
} |
|||
|
|||
// 格式化时间 |
|||
function formatTableDate(time) { |
|||
let _time = '-' |
|||
if (time) { _time = formatTimeStrToStr(time) } |
|||
return _time |
|||
} |
|||
|
|||
// 格式化TagFilter |
|||
function formatTableTagFilter(type,row,item){ |
|||
let _op = item.options.filter(op=>op.value == row[item.prop]) |
|||
if(!_op || _op.length <=0 || !_op[0][type]){ |
|||
if(type=='type'){return 'info'} |
|||
else{return '--'} |
|||
}else{ |
|||
return _op[0][type] |
|||
} |
|||
} |
|||
|
|||
|
|||
//排序 |
|||
function sortChange(data) { |
|||
emits('sortChange',data) |
|||
} |
|||
|
|||
// 左侧操作列 |
|||
function leftOperationHadel(btn,scope) { |
|||
emits('leftOperationHadel',btn,scope) |
|||
} |
|||
|
|||
// 判断是否显示右侧操作权限 |
|||
function getShowRightOpera(){ |
|||
let _arr = [] |
|||
props.rightOperation.forEach(item=>{_arr.push(item.auth)}) |
|||
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) |
|||
} |
|||
|
|||
onMounted(() => {}) |
|||
|
|||
</script> |
|||
|
|||
<style scope lang="scss"> |
|||
.current-select-tableRow{ |
|||
background:#e1f3d8 !important; |
|||
td{ |
|||
background:#e1f3d8 !important; |
|||
} |
|||
} |
|||
.normal-tableRow{ |
|||
td{ |
|||
background:#fff; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,353 @@ |
|||
<template> |
|||
<el-form style="height:calc(100% - 45px)" :model="props" :rules="props.tableFormRules" ref="tableForm_Ref"> |
|||
<el-table |
|||
style="height:100%" |
|||
row-key="id" |
|||
:data="props.tableData" |
|||
:border="true" |
|||
@sort-change="sortChange" |
|||
@selection-change="tableSelectionHandle" |
|||
:row-class-name="props.tableRowClassName" |
|||
:cell-class-name="props.tableCellClassName" |
|||
> |
|||
<!-- 多选框 --> |
|||
<el-table-column |
|||
v-if="props.multipleTable" |
|||
type="selection" |
|||
:fixed="'left'" |
|||
width="55" |
|||
:selectable="selectableDisabled" |
|||
/> |
|||
<!-- 序号 --> |
|||
<el-table-column v-if="props.showTableIndex" :fixed="'left'" type="index" width="50" /> |
|||
<!-- 左侧操作列 --> |
|||
<el-table-column |
|||
v-if="props.leftOperation && props.leftOperation.length > 0" |
|||
:fixed="'left'" |
|||
:width="props.leftOperationColumnWidth" |
|||
label="操作" |
|||
:align="'center'"> |
|||
<template #default="scope"> |
|||
<el-button |
|||
v-for="(btn,index) in props.leftOperation" |
|||
:key="index" |
|||
:type="btn.type" |
|||
:link="btn.link" |
|||
@click="leftOperationHadel(btn,scope)" |
|||
>{{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" |
|||
:header-align="item.headerAlign || props.columnHeaderAlign"> |
|||
<template #default="scope"> |
|||
<!-- `tableData[${scope.$index}][${item.prop}]` --> |
|||
<el-form-item |
|||
:prop="'tableData.'+ scope.$index + '.' + item.prop" |
|||
:rules="props.tableFormRules[item.prop]" |
|||
> |
|||
<!-- 时间格式 --> |
|||
<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" |
|||
/> |
|||
</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> |
|||
</el-form-item> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<!-- 右侧操作列 --> |
|||
<el-table-column |
|||
v-if="props.rightOperation && props.rightOperation.length > 0" |
|||
v-auth-any="getShowRightOpera()" |
|||
:fixed="'right'" |
|||
:width="props.rightOperationColumnWidth" |
|||
:align="'center'" |
|||
label="操作"> |
|||
<template #default="scope"> |
|||
<el-button |
|||
v-for="(btn,index) in props.rightOperation" |
|||
v-show="typeof btn.hide == 'function' ? !btn.hide(scope.row,scope) : !btn.hide" |
|||
:key="index" |
|||
:type="btn.type" |
|||
:link="btn.link" |
|||
@click="rightOperationHadel(btn,scope)" |
|||
v-auth="btn.auth" |
|||
>{{btn.label}}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-form> |
|||
</template> |
|||
|
|||
<script setup> |
|||
defineOptions({ name: 'elTable' }) |
|||
import { reactive, ref, onMounted,defineExpose } from 'vue' |
|||
import { ElMessageBox, ElMessage,ElTable, ElTableColumn } from 'element-plus' |
|||
import { formatTimeStrToStr } from "@/utils/formatTime"; |
|||
|
|||
const state = reactive({}) |
|||
|
|||
const props = defineProps({ |
|||
// 多选 |
|||
multipleTable:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 序号 |
|||
showTableIndex:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 左侧操作列 |
|||
leftOperation:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 左侧操作列宽度 |
|||
leftOperationColumnWidth:{ |
|||
type: Number, |
|||
default: 120 |
|||
}, |
|||
// 右侧操作列 |
|||
rightOperation:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 右侧操作列宽度 |
|||
rightOperationColumnWidth:{ |
|||
type: Number, |
|||
default: 150 |
|||
}, |
|||
// table数据 |
|||
tableData: { |
|||
type: Object, |
|||
default: [] |
|||
}, |
|||
// table表头 |
|||
tableColumns: { |
|||
type: Object, |
|||
default: [] |
|||
}, |
|||
// 表头宽度 |
|||
columnWidth:{ |
|||
type: Number, |
|||
default: null |
|||
}, |
|||
// 表头对齐 |
|||
columnHeaderAlign:{ |
|||
type: String, |
|||
default: 'center' |
|||
}, |
|||
// 表内容对齐 |
|||
columnAlign:{ |
|||
type: String, |
|||
default: 'center' |
|||
}, |
|||
// table输入表单的rules |
|||
tableFormRules: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 可编辑单元格判断禁用 |
|||
getEditItemDisabled:{ |
|||
type: [Function,Boolean], |
|||
default: false |
|||
}, |
|||
// table的复选框是否禁用判断 |
|||
selectableDisabled:{ |
|||
type: [Function,Boolean], |
|||
default: true |
|||
}, |
|||
// 行class |
|||
tableRowClassName:{ |
|||
type: Function, |
|||
default: null |
|||
}, |
|||
// 单元格class |
|||
tableCellClassName:{ |
|||
type: Function, |
|||
default: null |
|||
}, |
|||
}) |
|||
|
|||
const emits = defineEmits([ |
|||
'sortChange', |
|||
'leftOperationHadel', |
|||
'rightOperationHadel', |
|||
'tableSelectionHandle', |
|||
'editItemFocusHandle', |
|||
'editItemChangeHandle', |
|||
'editItemClearHandle', |
|||
]) |
|||
|
|||
// 多选 |
|||
function tableSelectionHandle (val){ |
|||
emits('tableSelectionHandle',val) |
|||
} |
|||
|
|||
// 格式化时间 |
|||
function formatTableDate(time) { |
|||
let _time = '-' |
|||
if (time) { _time = formatTimeStrToStr(time) } |
|||
return _time |
|||
} |
|||
|
|||
// 格式化TagFilter |
|||
function formatTableTagFilter(type,row,item){ |
|||
let _op = item.options.filter(op=>op.value == row[item.prop]) |
|||
if(!_op || _op.length <=0 || !_op[0][type]){ |
|||
if(type=='type'){return 'info'} |
|||
else{return '--'} |
|||
}else{ |
|||
return _op[0][type] |
|||
} |
|||
} |
|||
|
|||
|
|||
//排序 |
|||
function sortChange(data) { |
|||
emits('sortChange',data) |
|||
} |
|||
|
|||
// 左侧操作列 |
|||
function leftOperationHadel(btn,scope) { |
|||
emits('leftOperationHadel',btn,scope) |
|||
} |
|||
|
|||
// 判断是否显示右侧操作权限 |
|||
function getShowRightOpera(){ |
|||
let _arr = [] |
|||
props.rightOperation.forEach(item=>{_arr.push(item.auth)}) |
|||
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) |
|||
} |
|||
|
|||
const tableForm_Ref = ref(null) |
|||
defineExpose({ |
|||
tableForm_Ref, |
|||
}); |
|||
onMounted(() => {}) |
|||
|
|||
</script> |
|||
|
|||
<style scope lang="scss"> |
|||
.current-select-tableRow{ |
|||
background:#e1f3d8 !important; |
|||
td{ |
|||
background:#e1f3d8 !important; |
|||
} |
|||
} |
|||
.normal-tableRow{ |
|||
td{ |
|||
background:#fff; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,154 @@ |
|||
<template> |
|||
<el-dialog |
|||
v-model="dialogVisible" |
|||
title="导入" |
|||
width="600" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<el-upload |
|||
ref="uploadRef" |
|||
v-model:file-list="fileList" |
|||
:action="importUrl" |
|||
:auto-upload="false" |
|||
:disabled="formLoading" |
|||
:headers="uploadHeaders" |
|||
:limit="1" |
|||
:on-error="submitFormError" |
|||
:on-exceed="handleExceed" |
|||
:on-success="submitFormSuccess" |
|||
:accept="accept" |
|||
drag |
|||
style="width: 300px; margin: 0 auto" |
|||
v-loading="formLoading" |
|||
> |
|||
<el-icon color="#c0c4cc" :size="60"><UploadFilled /></el-icon> |
|||
<div class="el-upload__text">将文件拖到此处，或'<em>点击上传</em></div> |
|||
</el-upload> |
|||
<template #footer> |
|||
<div class="footerBtns"> |
|||
<div> |
|||
<el-button type="success" plain @click="importTemplate"> |
|||
<el-icon><Download /></el-icon>下载模板 |
|||
</el-button> |
|||
</div> |
|||
<div> |
|||
<el-button @click="dialogVisible = false">取消</el-button> |
|||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
defineOptions({ name: 'importPop' }) |
|||
import { reactive, ref, onMounted,defineExpose } from 'vue' |
|||
import { ElDialog,ElMessage } from 'element-plus' |
|||
import { downloadByData } from '@/utils/download' |
|||
import { getCommonImportTemplate } from '@/api/common/index' |
|||
|
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
|
|||
const dialogVisible = ref(false) // 弹窗的是否展示 |
|||
const fileList = ref([]) // 文件列表 |
|||
const uploadRef = ref() |
|||
const formLoading = ref(false) // 表单的加载中 |
|||
const uploadHeaders = ref() // 上传 Header 头 |
|||
// const importUrl = getBaseUrl() + import.meta.env.VITE_API_URL + (props.url || '/finance/common-excel-in/import') |
|||
|
|||
const props = defineProps({ |
|||
// api名称 |
|||
apiName: { |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// 可以导入的文件类型 |
|||
accept: { |
|||
type: String, |
|||
required: false, |
|||
default: '.xlsx,.xls' |
|||
}, |
|||
}) |
|||
const mode = import.meta.env.MODE |
|||
let app_base_api = mode == 'production' ? systemConfig.baseUrl : import.meta.env.VITE_API_BASE_URL |
|||
const importUrl = `${app_base_api}/api/${props.apiName}/import` |
|||
console.log('importUrl',importUrl) |
|||
|
|||
/** 重置表单 */ |
|||
const resetForm = () => { |
|||
// 重置上传状态和文件 |
|||
formLoading.value = false |
|||
uploadRef.value?.clearFiles() |
|||
fileList.value = [] |
|||
} |
|||
|
|||
/** 打开弹窗 */ |
|||
const open = () => { |
|||
dialogVisible.value = true |
|||
resetForm() |
|||
} |
|||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
|||
|
|||
/** 上传错误提示 */ |
|||
const submitFormError = (): void => { |
|||
ElMessage.error('上传失败，请您重新上传！') |
|||
formLoading.value = false |
|||
} |
|||
|
|||
/** 文件数超出提示 */ |
|||
const handleExceed = (): void => { |
|||
ElMessage.error('最多只能上传一个文件！') |
|||
} |
|||
|
|||
/** 下载模板操作 */ |
|||
const importTemplate = () => { |
|||
formLoading.value = true |
|||
getCommonImportTemplate(props.apiName) |
|||
.then(res=>{ |
|||
downloadByData(res.data,route.meta.title+'_模板.xlsx') |
|||
}) |
|||
.catch(err=>{ElMessage.error('获取失败,请重试！')}) |
|||
.finally(() => (formLoading.value = false)) |
|||
} |
|||
|
|||
// /** 提交表单 */ |
|||
const submitForm = async () => { |
|||
if (fileList.value.length == 0) { |
|||
ElMessage.error('请上传文件') |
|||
return |
|||
} |
|||
// 提交请求 |
|||
// uploadHeaders.value = { |
|||
// Authorization: 'Bearer ' + getAccessToken(), |
|||
// 'tenant-id': getTenantId() |
|||
// } |
|||
formLoading.value = true |
|||
uploadRef.value!.submit() |
|||
} |
|||
|
|||
// /** 文件上传成功 */ |
|||
const emits = defineEmits(['success']) |
|||
// 成功后处理 |
|||
const submitFormSuccess = (response: any) => { |
|||
formLoading.value = false |
|||
if (response) { |
|||
if(response.code == '200' || response.code == '1'){ |
|||
ElMessage.success('导入成功！') |
|||
}else{ |
|||
ElMessage.error(response.message) |
|||
} |
|||
} |
|||
|
|||
// 发送操作成功的事件 |
|||
formLoading.value = false |
|||
emits('success') |
|||
dialogVisible.value = false |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.footerBtns{ |
|||
display: flex; |
|||
padding: 20px; |
|||
justify-content: space-between; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,216 @@ |
|||
<template> |
|||
<el-dropdown :hide-on-click="false"> |
|||
<el-button :icon="'Setting'" plain :type="hasChange ? 'primary' : null">字段设置</el-button> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item> |
|||
<el-checkbox |
|||
v-model="checkAll" |
|||
@change="handleCheckAllChange" |
|||
:indeterminate="isIndeterminate" |
|||
><span style="color:#333">全选</span></el-checkbox> |
|||
</el-dropdown-item> |
|||
<el-checkbox-group |
|||
class="columsList" |
|||
v-model="checkedItems" |
|||
> |
|||
<el-dropdown-item |
|||
v-for="(colum,index) in columsList" |
|||
:key="index" |
|||
:draggable="true" |
|||
@dragstart="dragstart(colum)" |
|||
@dragenter="dragenter(colum,$event)" |
|||
@dragend="dragend(colum,$event)" |
|||
@dragover="dragover($event)" |
|||
> |
|||
<el-checkbox @change="(data)=>{handleCheckedItemChange(data,colum)}" :label="colum.title" :value="colum.prop"></el-checkbox> |
|||
</el-dropdown-item> |
|||
</el-checkbox-group> |
|||
</el-dropdown-menu> |
|||
<el-button class="restBtn" @click="reset">重置</el-button> |
|||
</template> |
|||
</el-dropdown> |
|||
</template> |
|||
|
|||
<script setup> |
|||
defineOptions({ name: 'setColumsPop' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import { useRoute } from 'vue-router' |
|||
|
|||
const props = defineProps({ |
|||
// table表头 |
|||
tableColumns: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
//初始化表头，未从缓存获取之前 |
|||
initTableColums: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
localTableColumnsName: { |
|||
type: String, |
|||
default: null |
|||
}, |
|||
}) |
|||
|
|||
const checkAll = ref(false)//是否全选 |
|||
const isIndeterminate = ref(false)//半选样式 |
|||
const checkedItems = ref([]) |
|||
const columsList = ref([]) |
|||
const hasChange = ref(false)//是否有变化 |
|||
|
|||
// 判断是否有变化 |
|||
const getHasChange = () => { |
|||
hasChange.value = false |
|||
let _noShow = columsList.value.filter(item=>item.setNoShow == true) |
|||
// 显示发生变化 |
|||
if(_noShow && _noShow.length > 0){ |
|||
hasChange.value = true |
|||
} |
|||
// 顺序发生变化 |
|||
else{ |
|||
let _initIndex = [] |
|||
props.initTableColums.forEach(item=>{_initIndex.push(item.prop)}) |
|||
let _nowIndex = [] |
|||
columsList.value.forEach(item=>{ _nowIndex.push(item.prop)}) |
|||
hasChange.value = _initIndex.join(",") != _nowIndex.join(",") |
|||
} |
|||
} |
|||
|
|||
// 初始化数据 |
|||
const getLocalColumsList = () => { |
|||
// 设置字段列表 |
|||
columsList.value = props.tableColumns |
|||
checkedItems.value = [] |
|||
// 设置已选字段 |
|||
columsList.value.forEach(item=>{ if(!item.setNoShow)checkedItems.value.push(item.prop) }) |
|||
// 设置全选是否全选 |
|||
setCheckAllSta() |
|||
// 判断是否有变化 |
|||
getHasChange() |
|||
} |
|||
|
|||
// 配置全选状态 |
|||
const setCheckAllSta = () => { |
|||
checkAll.value = checkedItems.value.length === columsList.value.length |
|||
isIndeterminate.value = (checkedItems.value.length < columsList.value.length) && checkedItems.value.length != 0 |
|||
} |
|||
|
|||
// 全选/全不选 |
|||
const handleCheckAllChange = (val) => { |
|||
// 全选 |
|||
if(val){ |
|||
hasChange.value = false |
|||
checkedItems.value = [] |
|||
columsList.value.forEach(item=>{ |
|||
checkedItems.value.push(item.prop) |
|||
item.setNoShow = false |
|||
}) |
|||
save() |
|||
} |
|||
// 全不选 |
|||
else{ |
|||
hasChange.value = true |
|||
checkedItems.value = [] |
|||
columsList.value.forEach(item=>{ item.setNoShow = true}) |
|||
save() |
|||
} |
|||
} |
|||
|
|||
// 更改 |
|||
const handleCheckedItemChange = (isCheck,colum) => { |
|||
let _prop = colum.prop |
|||
checkedItems.value = [] |
|||
columsList.value.forEach(item=>{ |
|||
if(item.prop == _prop){item.setNoShow = !isCheck} |
|||
if(!item.setNoShow)checkedItems.value.push(item.prop) |
|||
}) |
|||
setCheckAllSta() |
|||
getHasChange() |
|||
save() |
|||
} |
|||
|
|||
// 重置 |
|||
const reset = () => { |
|||
hasChange.value = false |
|||
checkedItems.value = [] |
|||
columsList.value = JSON.parse(JSON.stringify(props.initTableColums)) |
|||
columsList.value.forEach(item=>{ checkedItems.value.push(item.prop) }) |
|||
setCheckAllSta() |
|||
save() |
|||
} |
|||
|
|||
// 存入缓存 |
|||
const save = () => { |
|||
localStorage.setItem(props.localTableColumnsName,JSON.stringify(columsList.value)) |
|||
//判断是否有变化 |
|||
getHasChange() |
|||
// 判断全选按钮状态 |
|||
setCheckAllSta() |
|||
} |
|||
|
|||
const dragOldData = ref(null) |
|||
const dragNewData = ref(null) |
|||
// 拖拽相关功能 |
|||
const dragstart = (value) => { |
|||
dragOldData.value = value |
|||
} |
|||
// 记录移动过程中信息 |
|||
const dragenter = (value, e) => { |
|||
dragNewData.value = value |
|||
e.preventDefault() |
|||
} |
|||
const dragend = (value, e) => { |
|||
// 拖拽最终操作 |
|||
if (dragOldData.value !== dragNewData.value) { |
|||
let oldIndex = columsList.value.indexOf(dragOldData.value) |
|||
let newIndex = columsList.value.indexOf(dragNewData.value) |
|||
let newItems = [...columsList.value] |
|||
// 删除老的节点 |
|||
newItems.splice(oldIndex, 1) |
|||
// 在列表中目标位置增加新的节点 |
|||
newItems.splice(newIndex, 0, dragOldData.value) |
|||
columsList.value = [...newItems] |
|||
save() |
|||
} |
|||
} |
|||
const dragover = (e) => { |
|||
// 拖动事件（主要是为了拖动时鼠标光标不变为禁止） |
|||
e.preventDefault() |
|||
} |
|||
|
|||
onMounted(() => { |
|||
getLocalColumsList() |
|||
}) |
|||
|
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.columsList{ |
|||
height:calc(100vh - 400px) !important; |
|||
overflow:auto !important; |
|||
padding:10 20px !important; |
|||
} |
|||
::v-deep .el-checkbox{ |
|||
min-width:200px !important; |
|||
} |
|||
.restBtn{ |
|||
width:calc(100% - 20px); |
|||
margin:10px; |
|||
text-align:center |
|||
} |
|||
::-webkit-scrollbar{ |
|||
width:6px; |
|||
height:6px; |
|||
} |
|||
::-webkit-scrollbar-track{ |
|||
border-radius: 10px; |
|||
background-color: #F5F5F5; |
|||
} |
|||
::-webkit-scrollbar-thumb { |
|||
border-radius:10px; |
|||
background-color:#ddd; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,690 @@ |
|||
<template> |
|||
<div class="app-container" v-loading="state.loading"> |
|||
<el-card class="search-container" v-if="!(props.hideSearch && props.hideSetColums)"> |
|||
<el-form :inline="true" v-if="!props.hideSearch"> |
|||
<el-form-item |
|||
v-auth="(props.authName || 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' && !item.hide" |
|||
v-model="props.searchFilter[item.prop]" |
|||
:placeholder="item.label" |
|||
:clearable="!item.noClear" |
|||
/> |
|||
<!-- 数字 --> |
|||
<el-input-number |
|||
v-if="item.type == 'number' && !item.hide" |
|||
v-model="props.searchFilter[item.prop]" |
|||
:min="item.min" |
|||
:max="item.max" |
|||
/> |
|||
<!-- 时间区域 --> |
|||
<el-date-picker |
|||
v-if="item.type == 'datetimerange' && !item.hide" |
|||
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" |
|||
style="width:370px" |
|||
/> |
|||
<!-- 选择框 --> |
|||
<el-select |
|||
v-if="item.type == 'select' && !item.hide" |
|||
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> |
|||
<div style="margin-right:10px" v-for="(btn,btn_key) in props.searchButtons" :key="btn_key"> |
|||
<!-- 导出 --> |
|||
<el-dropdown |
|||
v-auth="(props.authName || props.apiName) + state.searchBtnOptions[btn].auth" |
|||
:hide-on-click="false" |
|||
v-if="state.searchBtnOptions[btn].auth == ':export'" |
|||
> |
|||
<el-button |
|||
:icon="state.searchBtnOptions[btn].icon" |
|||
:type="state.searchBtnOptions[btn].type"> |
|||
{{state.searchBtnOptions[btn].label}} |
|||
<el-icon class="el-icon--right"><arrow-down /></el-icon> |
|||
</el-button> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item @click="exportHandle()">按条件导出【当前页】</el-dropdown-item> |
|||
<el-dropdown-item divided @click="exportHandle(true)">按条件导出【全部】</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> |
|||
<!-- 其他按钮 --> |
|||
<el-button |
|||
v-else |
|||
:icon="state.searchBtnOptions[btn].icon" |
|||
v-auth="(props.authName || props.apiName) + state.searchBtnOptions[btn].auth" |
|||
:type="state.searchBtnOptions[btn].type" |
|||
@click="searchBtnHandle(btn)" |
|||
>{{state.searchBtnOptions[btn].label}}</el-button> |
|||
</div> |
|||
</el-form-item> |
|||
</el-form> |
|||
<!-- 字段设置 --> |
|||
<setColumsPop |
|||
style="margin-left: auto;" |
|||
v-if="!props.hideSetColums && state.innerTableColumns" |
|||
:localTableColumnsName="state.localTableColumnsName" |
|||
:initTableColums="state.initTableColums" |
|||
:tableColumns="state.innerTableColumns" |
|||
></setColumsPop> |
|||
</el-card> |
|||
|
|||
<el-card class="paged-table-container"> |
|||
<elTable |
|||
v-if="state.innerTableColumns" |
|||
:specialLocalColumnName="props.specialLocalColumnName" |
|||
:columnWidth="props.columnWidth" |
|||
:columnHeaderAlign="props.columnHeaderAlign" |
|||
:columnAlign="props.columnAlign" |
|||
:tableData="state.tableData" |
|||
:tableColumns="state.innerTableColumns" |
|||
@sortChange="sortChange" |
|||
:leftOperation="props.leftOperation" |
|||
@leftOperationHadel="leftOperationHadel" |
|||
:leftOperationColumnWidth="props.leftOperationColumnWidth" |
|||
:rightOperation="getRightOperation()" |
|||
@rightOperationHadel="rightOperationHadel" |
|||
:multipleTable="props.multipleTable" |
|||
@tableSelectionHandle="tableSelectionHandle" |
|||
:tableRowClassName="props.tableRowClassName" |
|||
:tableCellClassName="props.tableCellClassName" |
|||
></elTable> |
|||
|
|||
<elPager |
|||
style="margin-top: 15px;float:right" |
|||
:pager="state.pager" |
|||
@pageSizeChange="pageSizeChange" |
|||
@pageCurrentChange="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: 'tablePage' }) |
|||
import store from '@/stores' |
|||
import apiTableColumns from '@/utils/common/apiTableColumns' |
|||
import { reactive, ref, onMounted,computed,defineExpose } from 'vue' |
|||
import { |
|||
getCommonPost, |
|||
getCommonPaged, |
|||
getCommonDeatailPaged, |
|||
postCommonExport, |
|||
postCommonCreate, |
|||
putCommonUpdate, |
|||
deleteCommonApi, |
|||
getCommonCustominvoke |
|||
} 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 setColumsPop from '@/components/setColumsPop/index.vue' |
|||
import { getPageParamsForFilter,getLocalTableColumnsName } 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 state = reactive({ |
|||
loading: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'}, |
|||
}, |
|||
innerTableColumns:null, |
|||
tableData:[], |
|||
// table排序处理 |
|||
sortFilter:{ |
|||
sortBy:undefined, |
|||
isAscending:undefined |
|||
}, |
|||
pager:{ |
|||
page: 1, |
|||
pageSize: 10, |
|||
total: 1, |
|||
}, |
|||
tableSelectList:[], |
|||
initTableColums:[],//初始化表头，未从缓存获取之前 |
|||
localTableColumnsName:null |
|||
}) |
|||
|
|||
const props = defineProps({ |
|||
// api名称 |
|||
apiName: { |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// 特殊的分页api |
|||
specialPageApi:{ |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// 特殊的column名称（没有默认apiName） |
|||
specialColumnName:{ |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// 特殊的存储column名称（没有默认apiName） |
|||
specialLocalColumnName:{ |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// 特殊权限前缀（如果没有默认使用apiName） |
|||
authName:{ |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// api类型 detailApi：走getdetail接口，不传或者pageApi：走getdatapaged接口 |
|||
apiType: { |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// 隐藏表头搜索 |
|||
hideSearch:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 行class |
|||
tableRowClassName:{ |
|||
type: Function, |
|||
default: null |
|||
}, |
|||
// 单元格class |
|||
tableCellClassName:{ |
|||
type: Function, |
|||
default: null |
|||
}, |
|||
// 多选 |
|||
multipleTable:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 左侧操作列 |
|||
leftOperation:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 左侧操作列宽度 |
|||
leftOperationColumnWidth:{ |
|||
type: Number, |
|||
default: 120 |
|||
}, |
|||
// 右侧操作列 |
|||
rightOperation:{ |
|||
type: [Object,String], |
|||
default: null |
|||
}, |
|||
// 右侧操作列，特殊自定义格式下，包含api操作 |
|||
showApiRightOperation:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 右侧通用按钮特殊字段判断隐藏规则，默认为编辑删除，writeState=true不可操作， |
|||
// 如有特殊规则，则使用该方法特殊处理,当前判断方式为“=”，如后期有其他需求再进行封装 |
|||
apiRightHideConfig:{ |
|||
type: Object, |
|||
default: { |
|||
apiUpdate:{prop:'writeState',ruleValue:true}, |
|||
apiDelete:{prop:'writeState',ruleValue:true}, |
|||
} |
|||
}, |
|||
// table表头 |
|||
tableColumns: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 查询配置 |
|||
searchOptions: { |
|||
type: Object, |
|||
default: [] |
|||
}, |
|||
// 查询按钮 |
|||
searchButtons: { |
|||
type: Object, |
|||
default: ['search','export'] |
|||
}, |
|||
// table查询数据filter |
|||
searchFilter: { |
|||
type: Object, |
|||
default: {} |
|||
}, |
|||
// table查询数据filter的特殊条件，如果没有则走colum中的配置 |
|||
// 示例：infoSearchFilterOptions:{ TableName:{action:'=='}}, |
|||
searchFilterOptions: { |
|||
type: Object, |
|||
default: {} |
|||
}, |
|||
// 表头宽度 |
|||
columnWidth:{ |
|||
type: Number, |
|||
default: 120 |
|||
}, |
|||
// 表头对齐 |
|||
columnHeaderAlign:{ |
|||
type: String, |
|||
default: 'center' |
|||
}, |
|||
// 表内容对齐 |
|||
columnAlign:{ |
|||
type: String, |
|||
default: 'center' |
|||
}, |
|||
// 表单规则 |
|||
apiEditFormRules:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 隐藏字段设置 |
|||
hideSetColums:{ |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}) |
|||
|
|||
|
|||
// 获取表头 noFilter 不需要处理字段设置（用于编辑和新增） |
|||
function getTableColumns(noFilter){ |
|||
if(noFilter){ |
|||
return props.tableColumns || apiTableColumns[props.apiName] |
|||
}else{ |
|||
// 字段设置中，存入location的名字 |
|||
let _localColumName = props.specialLocalColumnName || useRoute().name |
|||
state.localTableColumnsName = getLocalTableColumnsName(_localColumName) |
|||
let _local = JSON.parse(localStorage.getItem(state.localTableColumnsName)) |
|||
// 获取列表配置 |
|||
let _apiColums = props.specialColumnName || props.apiName |
|||
state.initTableColums = props.tableColumns || apiTableColumns[_apiColums] |
|||
let _list = (_local && _local != null && _local != undefined) ? _local : JSON.parse(JSON.stringify(state.initTableColums)) |
|||
state.innerTableColumns = _list |
|||
return _list |
|||
} |
|||
} |
|||
|
|||
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.authName || 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 = props.tableColumns || apiTableColumns[props.apiName] |
|||
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); |
|||
}) |
|||
.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','customlog'] |
|||
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(pageSize){ |
|||
let _filters = [] |
|||
if(props.hideSearch){ |
|||
_filters = props.searchFilter |
|||
}else{ |
|||
function __getAction (prop,action){ |
|||
if(props.searchFilterOptions && props.searchFilterOptions[prop] && props.searchFilterOptions[prop].action){ |
|||
return props.searchFilterOptions[prop].action |
|||
}else{ |
|||
return action |
|||
} |
|||
} |
|||
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) && props.searchFilter[i] != ""){ |
|||
// 时间区域格式 |
|||
if(_type == 'datetimerange'){ |
|||
_filters.push( |
|||
{ |
|||
logic: "And", |
|||
column: i, |
|||
action: __getAction(i,'>='), |
|||
value: props.searchFilter[i][0] |
|||
} |
|||
) |
|||
_filters.push( |
|||
{ |
|||
logic: "And", |
|||
column: i, |
|||
action: __getAction(i,'<='), |
|||
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: __getAction(i,_action), |
|||
value: props.searchFilter[i] |
|||
} |
|||
) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
let _pageParams = getPageParamsForFilter({ |
|||
pageNumber:state.pager.page, |
|||
pageSize:pageSize || state.pager.pageSize, |
|||
sortBy:state.sortFilter.sortBy, |
|||
isAscending:state.sortFilter.isAscending, |
|||
condition:{ |
|||
filters:_filters |
|||
} |
|||
}) |
|||
return _pageParams |
|||
} |
|||
|
|||
// 获取页面数据 |
|||
function getTableData(page,callback) { |
|||
state.loading = true |
|||
if(!page)page = state.pager.page |
|||
if(page)state.pager.page = page |
|||
if(props.apiType == 'detailApi'){ |
|||
getCommonDeatailPaged(props.apiName,getPageParams()) |
|||
.then((resp) => { |
|||
state.tableData = resp.data.data |
|||
state.pager.total = resp.data.totalCount |
|||
if(callback)callback(resp) |
|||
}) |
|||
.catch(err=>{ElMessage.error('数据获取失败！')}) |
|||
.finally(() => (state.loading = false)) |
|||
}else if(props.specialPageApi){ |
|||
getCommonPost(props.specialPageApi,getPageParams()) |
|||
.then((resp) => { |
|||
state.tableData = resp.data.data |
|||
state.pager.total = resp.data.totalCount |
|||
if(callback)callback(resp) |
|||
}) |
|||
.catch(err=>{ElMessage.error('数据获取失败！')}) |
|||
.finally(() => (state.loading = false)) |
|||
} |
|||
else{ |
|||
getCommonPaged(props.apiName,getPageParams()) |
|||
.then((resp) => { |
|||
state.tableData = resp.data.data |
|||
state.pager.total = resp.data.totalCount |
|||
if(callback)callback(resp) |
|||
}) |
|||
.catch(err=>{ElMessage.error('数据获取失败！')}) |
|||
.finally(() => (state.loading = false)) |
|||
} |
|||
} |
|||
|
|||
// 导出 |
|||
function exportHandle(isAll){ |
|||
state.loading = true |
|||
//同步数据查询 |
|||
getTableData(1,(res=>{ |
|||
let _params = getPageParams() |
|||
if(isAll){_params = getPageParams(res.data.totalCount)} |
|||
postCommonExport(props.apiName,_params) |
|||
.then((res) => { |
|||
let _str = isAll ? '全部' : '当页' |
|||
downloadByData(res.data,route.meta.title+`_按条件导出${_str}.xlsx`) |
|||
}) |
|||
.catch(err=>{ElMessage.error('操作失败！')}) |
|||
.finally(() => (state.loading = false)) |
|||
})) |
|||
|
|||
} |
|||
|
|||
const importPopRef = ref() |
|||
// 按钮功能 |
|||
function searchBtnHandle(btn){ |
|||
// 查询 |
|||
if(btn == 'search'){ |
|||
getTableData(1) |
|||
} |
|||
// 新增 |
|||
else if (btn == 'create'){ |
|||
let _tableColums = props.tableColumns || apiTableColumns[props.apiName] |
|||
let _list = _tableColums.filter(item => !item.noEdit) |
|||
apiEditPopRef.value.open(_list) |
|||
} |
|||
// 导入 |
|||
else if (btn == 'import'){ |
|||
importPopRef.value.open() |
|||
} |
|||
// 导出（按条件导出当前页） |
|||
// else if (btn == 'export'){ |
|||
// exportHandle() |
|||
// } |
|||
// 手动开关 |
|||
else if (btn == 'custominvoke'){ |
|||
ElMessageBox.confirm('是否确定操作手动开关？', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
state.loading = true |
|||
let _data = { |
|||
taskName:apiServeNames[props.apiName].taskName, |
|||
client:'Chery' |
|||
} |
|||
getCommonCustominvoke(_data) |
|||
.then((res) => { |
|||
ElMessage.success('操作成功！') |
|||
getTableData(1)//同步数据查询 |
|||
}) |
|||
.finally(() => (state.loading = false)) |
|||
}) |
|||
} |
|||
} |
|||
|
|||
// 排序 |
|||
function sortChange(data) { |
|||
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); |
|||
} |
|||
|
|||
// 导入成功之后todo |
|||
function importSuccess(response,importDate){ |
|||
getTableData() |
|||
} |
|||
|
|||
// size-change |
|||
function pageSizeChange(pageSize){ |
|||
state.pager.pageSize = pageSize |
|||
getTableData(1) |
|||
} |
|||
|
|||
// current-change |
|||
function pageCurrentChange(page){ |
|||
getTableData(page) |
|||
} |
|||
|
|||
onMounted(() => { |
|||
getTableColumns() |
|||
getTableData() |
|||
}) |
|||
|
|||
defineExpose({ |
|||
state, |
|||
getTableData |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
::v-deep .search-container { |
|||
.el-card__body{ |
|||
display:flex; |
|||
justify-content: space-between; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,689 @@ |
|||
<template> |
|||
<div class="app-container" v-loading="state.loading"> |
|||
<el-card class="search-container" v-if="!(props.hideSearch && props.hideSetColums)"> |
|||
<el-form :inline="true" v-if="!props.hideSearch"> |
|||
<el-form-item |
|||
v-auth="(props.authName || 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' && !item.hide" |
|||
v-model="props.searchFilter[item.prop]" |
|||
:placeholder="item.label" |
|||
:clearable="!item.noClear" |
|||
/> |
|||
<!-- 数字 --> |
|||
<el-input-number |
|||
v-if="item.type == 'number' && !item.hide" |
|||
v-model="props.searchFilter[item.prop]" |
|||
:min="item.min" |
|||
:max="item.max" |
|||
/> |
|||
<!-- 时间区域 --> |
|||
<el-date-picker |
|||
v-if="item.type == 'datetimerange' && !item.hide" |
|||
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" |
|||
style="width:370px" |
|||
/> |
|||
<!-- 选择框 --> |
|||
<el-select |
|||
v-if="item.type == 'select' && !item.hide" |
|||
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> |
|||
<div style="margin-right:10px" v-for="(btn,btn_key) in props.searchButtons" :key="btn_key"> |
|||
<!-- 导出 --> |
|||
<!-- <el-dropdown |
|||
v-auth="(props.authName || props.apiName) + state.searchBtnOptions[btn].auth" |
|||
:hide-on-click="false" |
|||
v-if="state.searchBtnOptions[btn].auth == ':export'" |
|||
> |
|||
<el-button |
|||
:icon="state.searchBtnOptions[btn].icon" |
|||
:type="state.searchBtnOptions[btn].type"> |
|||
{{state.searchBtnOptions[btn].label}} |
|||
<el-icon class="el-icon--right"><arrow-down /></el-icon> |
|||
</el-button> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item @click="exportHandle()">按条件导出【当前页】</el-dropdown-item> |
|||
<el-dropdown-item divided @click="exportHandle(true)">按条件导出【全部】</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> --> |
|||
<!-- 其他按钮 --> |
|||
<el-button |
|||
:icon="state.searchBtnOptions[btn].icon" |
|||
v-auth="(props.authName || props.apiName) + state.searchBtnOptions[btn].auth" |
|||
:type="state.searchBtnOptions[btn].type" |
|||
@click="searchBtnHandle(btn)" |
|||
>{{state.searchBtnOptions[btn].label}}</el-button> |
|||
</div> |
|||
</el-form-item> |
|||
</el-form> |
|||
<!-- 字段设置 --> |
|||
<setColumsPop |
|||
style="margin-left: auto;" |
|||
v-if="!props.hideSetColums && state.innerTableColumns" |
|||
:localTableColumnsName="state.localTableColumnsName" |
|||
:initTableColums="state.initTableColums" |
|||
:tableColumns="state.innerTableColumns" |
|||
></setColumsPop> |
|||
</el-card> |
|||
|
|||
<el-card class="paged-table-container"> |
|||
<elTable |
|||
v-if="state.innerTableColumns" |
|||
:specialLocalColumnName="props.specialLocalColumnName" |
|||
:columnWidth="props.columnWidth" |
|||
:columnHeaderAlign="props.columnHeaderAlign" |
|||
:columnAlign="props.columnAlign" |
|||
:tableData="state.tableData" |
|||
:tableColumns="state.innerTableColumns" |
|||
@sortChange="sortChange" |
|||
:leftOperation="props.leftOperation" |
|||
@leftOperationHadel="leftOperationHadel" |
|||
:leftOperationColumnWidth="props.leftOperationColumnWidth" |
|||
:rightOperation="getRightOperation()" |
|||
@rightOperationHadel="rightOperationHadel" |
|||
:multipleTable="props.multipleTable" |
|||
@tableSelectionHandle="tableSelectionHandle" |
|||
:tableRowClassName="props.tableRowClassName" |
|||
:tableCellClassName="props.tableCellClassName" |
|||
></elTable> |
|||
|
|||
<elPager |
|||
style="margin-top: 15px;float:right" |
|||
:pager="state.pager" |
|||
@pageSizeChange="pageSizeChange" |
|||
@pageCurrentChange="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: 'tablePage' }) |
|||
import store from '@/stores' |
|||
import apiTableColumns from '@/utils/common/apiTableColumns' |
|||
import { reactive, ref, onMounted,computed,defineExpose } from 'vue' |
|||
import { |
|||
getCommonPost, |
|||
getCommonPaged, |
|||
getCommonDeatailPaged, |
|||
postCommonExport, |
|||
postCommonCreate, |
|||
putCommonUpdate, |
|||
deleteCommonApi, |
|||
getCommonCustominvoke |
|||
} 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 setColumsPop from '@/components/setColumsPop/index.vue' |
|||
import { getPageParamsForFilter,getLocalTableColumnsName } 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 state = reactive({ |
|||
loading: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'}, |
|||
}, |
|||
innerTableColumns:null, |
|||
tableData:[], |
|||
// table排序处理 |
|||
sortFilter:{ |
|||
sortBy:undefined, |
|||
isAscending:undefined |
|||
}, |
|||
pager:{ |
|||
page: 1, |
|||
pageSize: 10, |
|||
total: 1, |
|||
}, |
|||
tableSelectList:[], |
|||
initTableColums:[],//初始化表头，未从缓存获取之前 |
|||
localTableColumnsName:null |
|||
}) |
|||
|
|||
const props = defineProps({ |
|||
// api名称 |
|||
apiName: { |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// 特殊的分页api |
|||
specialPageApi:{ |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// 特殊的column名称（没有默认apiName） |
|||
specialColumnName:{ |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// 特殊的存储column名称（没有默认apiName） |
|||
specialLocalColumnName:{ |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// 特殊权限前缀（如果没有默认使用apiName） |
|||
authName:{ |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// api类型 detailApi：走getdetail接口，不传或者pageApi：走getdatapaged接口 |
|||
apiType: { |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// 隐藏表头搜索 |
|||
hideSearch:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 行class |
|||
tableRowClassName:{ |
|||
type: Function, |
|||
default: null |
|||
}, |
|||
// 单元格class |
|||
tableCellClassName:{ |
|||
type: Function, |
|||
default: null |
|||
}, |
|||
// 多选 |
|||
multipleTable:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 左侧操作列 |
|||
leftOperation:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 左侧操作列宽度 |
|||
leftOperationColumnWidth:{ |
|||
type: Number, |
|||
default: 120 |
|||
}, |
|||
// 右侧操作列 |
|||
rightOperation:{ |
|||
type: [Object,String], |
|||
default: null |
|||
}, |
|||
// 右侧操作列，特殊自定义格式下，包含api操作 |
|||
showApiRightOperation:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 右侧通用按钮特殊字段判断隐藏规则，默认为编辑删除，writeState=true不可操作， |
|||
// 如有特殊规则，则使用该方法特殊处理,当前判断方式为“=”，如后期有其他需求再进行封装 |
|||
apiRightHideConfig:{ |
|||
type: Object, |
|||
default: { |
|||
apiUpdate:{prop:'writeState',ruleValue:true}, |
|||
apiDelete:{prop:'writeState',ruleValue:true}, |
|||
} |
|||
}, |
|||
// table表头 |
|||
tableColumns: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 查询配置 |
|||
searchOptions: { |
|||
type: Object, |
|||
default: [] |
|||
}, |
|||
// 查询按钮 |
|||
searchButtons: { |
|||
type: Object, |
|||
default: ['search','export'] |
|||
}, |
|||
// table查询数据filter |
|||
searchFilter: { |
|||
type: Object, |
|||
default: {} |
|||
}, |
|||
// table查询数据filter的特殊条件，如果没有则走colum中的配置 |
|||
// 示例：infoSearchFilterOptions:{ TableName:{action:'=='}}, |
|||
searchFilterOptions: { |
|||
type: Object, |
|||
default: {} |
|||
}, |
|||
// 表头宽度 |
|||
columnWidth:{ |
|||
type: Number, |
|||
default: 120 |
|||
}, |
|||
// 表头对齐 |
|||
columnHeaderAlign:{ |
|||
type: String, |
|||
default: 'center' |
|||
}, |
|||
// 表内容对齐 |
|||
columnAlign:{ |
|||
type: String, |
|||
default: 'center' |
|||
}, |
|||
// 表单规则 |
|||
apiEditFormRules:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 隐藏字段设置 |
|||
hideSetColums:{ |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}) |
|||
|
|||
|
|||
// 获取表头 noFilter 不需要处理字段设置（用于编辑和新增） |
|||
function getTableColumns(noFilter){ |
|||
if(noFilter){ |
|||
return props.tableColumns || apiTableColumns[props.apiName] |
|||
}else{ |
|||
// 字段设置中，存入location的名字 |
|||
let _localColumName = props.specialLocalColumnName || useRoute().name |
|||
state.localTableColumnsName = getLocalTableColumnsName(_localColumName) |
|||
let _local = JSON.parse(localStorage.getItem(state.localTableColumnsName)) |
|||
// 获取列表配置 |
|||
let _apiColums = props.specialColumnName || props.apiName |
|||
state.initTableColums = props.tableColumns || apiTableColumns[_apiColums] |
|||
let _list = (_local && _local != null && _local != undefined) ? _local : JSON.parse(JSON.stringify(state.initTableColums)) |
|||
state.innerTableColumns = _list |
|||
return _list |
|||
} |
|||
} |
|||
|
|||
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.authName || 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 = props.tableColumns || apiTableColumns[props.apiName] |
|||
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); |
|||
}) |
|||
.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','customlog'] |
|||
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(pageSize){ |
|||
let _filters = [] |
|||
if(props.hideSearch){ |
|||
_filters = props.searchFilter |
|||
}else{ |
|||
function __getAction (prop,action){ |
|||
if(props.searchFilterOptions && props.searchFilterOptions[prop] && props.searchFilterOptions[prop].action){ |
|||
return props.searchFilterOptions[prop].action |
|||
}else{ |
|||
return action |
|||
} |
|||
} |
|||
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) && props.searchFilter[i] != ""){ |
|||
// 时间区域格式 |
|||
if(_type == 'datetimerange'){ |
|||
_filters.push( |
|||
{ |
|||
logic: "And", |
|||
column: i, |
|||
action: __getAction(i,'>='), |
|||
value: props.searchFilter[i][0] |
|||
} |
|||
) |
|||
_filters.push( |
|||
{ |
|||
logic: "And", |
|||
column: i, |
|||
action: __getAction(i,'<='), |
|||
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: __getAction(i,_action), |
|||
value: props.searchFilter[i] |
|||
} |
|||
) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
let _pageParams = getPageParamsForFilter({ |
|||
pageNumber:state.pager.page, |
|||
pageSize:pageSize || state.pager.pageSize, |
|||
sortBy:state.sortFilter.sortBy, |
|||
isAscending:state.sortFilter.isAscending, |
|||
condition:{ |
|||
filters:_filters |
|||
} |
|||
}) |
|||
return _pageParams |
|||
} |
|||
|
|||
// 获取页面数据 |
|||
function getTableData(page,callback) { |
|||
state.loading = true |
|||
if(!page)page = state.pager.page |
|||
if(page)state.pager.page = page |
|||
if(props.apiType == 'detailApi'){ |
|||
getCommonDeatailPaged(props.apiName,getPageParams()) |
|||
.then((resp) => { |
|||
state.tableData = resp.data.data |
|||
state.pager.total = resp.data.totalCount |
|||
if(callback)callback(resp) |
|||
}) |
|||
.catch(err=>{ElMessage.error('数据获取失败！')}) |
|||
.finally(() => (state.loading = false)) |
|||
}else if(props.specialPageApi){ |
|||
getCommonPost(props.specialPageApi,getPageParams()) |
|||
.then((resp) => { |
|||
state.tableData = resp.data.data |
|||
state.pager.total = resp.data.totalCount |
|||
if(callback)callback(resp) |
|||
}) |
|||
.catch(err=>{ElMessage.error('数据获取失败！')}) |
|||
.finally(() => (state.loading = false)) |
|||
} |
|||
else{ |
|||
getCommonPaged(props.apiName,getPageParams()) |
|||
.then((resp) => { |
|||
state.tableData = resp.data.data |
|||
state.pager.total = resp.data.totalCount |
|||
if(callback)callback(resp) |
|||
}) |
|||
.catch(err=>{ElMessage.error('数据获取失败！')}) |
|||
.finally(() => (state.loading = false)) |
|||
} |
|||
} |
|||
|
|||
// 导出 |
|||
function exportHandle(isAll){ |
|||
state.loading = true |
|||
//同步数据查询 |
|||
getTableData(1,(res=>{ |
|||
let _params = getPageParams() |
|||
if(isAll){_params = getPageParams(res.data.totalCount)} |
|||
postCommonExport(props.apiName,_params) |
|||
.then((res) => { |
|||
let _str = isAll ? '全部' : '当页' |
|||
downloadByData(res.data,route.meta.title+`.xlsx`) |
|||
}) |
|||
.catch(err=>{ElMessage.error('操作失败！')}) |
|||
.finally(() => (state.loading = false)) |
|||
})) |
|||
|
|||
} |
|||
|
|||
const importPopRef = ref() |
|||
// 按钮功能 |
|||
function searchBtnHandle(btn){ |
|||
// 查询 |
|||
if(btn == 'search'){ |
|||
getTableData(1) |
|||
} |
|||
// 新增 |
|||
else if (btn == 'create'){ |
|||
let _tableColums = props.tableColumns || apiTableColumns[props.apiName] |
|||
let _list = _tableColums.filter(item => !item.noEdit) |
|||
apiEditPopRef.value.open(_list) |
|||
} |
|||
// 导入 |
|||
else if (btn == 'import'){ |
|||
importPopRef.value.open() |
|||
} |
|||
// 导出（按条件导出当前页） |
|||
else if (btn == 'export'){ |
|||
exportHandle() |
|||
} |
|||
// 手动开关 |
|||
else if (btn == 'custominvoke'){ |
|||
ElMessageBox.confirm('是否确定操作手动开关？', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
state.loading = true |
|||
let _data = { |
|||
taskName:apiServeNames[props.apiName].taskName, |
|||
client:'Chery' |
|||
} |
|||
getCommonCustominvoke(_data) |
|||
.then((res) => { |
|||
ElMessage.success('操作成功！') |
|||
getTableData(1)//同步数据查询 |
|||
}) |
|||
.finally(() => (state.loading = false)) |
|||
}) |
|||
} |
|||
} |
|||
|
|||
// 排序 |
|||
function sortChange(data) { |
|||
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); |
|||
} |
|||
|
|||
// 导入成功之后todo |
|||
function importSuccess(response,importDate){ |
|||
getTableData() |
|||
} |
|||
|
|||
// size-change |
|||
function pageSizeChange(pageSize){ |
|||
state.pager.pageSize = pageSize |
|||
getTableData(1) |
|||
} |
|||
|
|||
// current-change |
|||
function pageCurrentChange(page){ |
|||
getTableData(page) |
|||
} |
|||
|
|||
onMounted(() => { |
|||
getTableColumns() |
|||
getTableData() |
|||
}) |
|||
|
|||
defineExpose({ |
|||
state, |
|||
getTableData |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
::v-deep .search-container { |
|||
.el-card__body{ |
|||
display:flex; |
|||
justify-content: space-between; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,196 @@ |
|||
const apiServeNames = { |
|||
// M+6月物料需求计划风险确认
|
|||
cherysupplierconmmrp:{ |
|||
tableName:'SUPPLIER_CON_MMRP', |
|||
taskName:'M+6月物料需求计划风险确认', |
|||
}, |
|||
|
|||
// 日物料需求计划风险确认
|
|||
cherysuppliercondate:{ |
|||
tableName:'SUPPLIER_CON_DATE', |
|||
taskName:'日物料需求计划风险确认' |
|||
}, |
|||
|
|||
// 采购订单风险确认
|
|||
cherysupplierconpo:{ |
|||
tableName:'SUPPLIER_CON_PO', |
|||
taskName:'采购订单风险确认' |
|||
}, |
|||
|
|||
// 供应商共享库存
|
|||
cherysuppliersinvdata:{ |
|||
tableName:'SUPPLIER_SINV_DATA', |
|||
taskName:'供应商共享库存' |
|||
}, |
|||
|
|||
// 来料检验数据
|
|||
supplierpromaterialstock:{ |
|||
tableName:'SUPPLIER_PRO_MATERIAL_STOCK', |
|||
taskName:'来料检验数据' |
|||
}, |
|||
|
|||
// 排产数据
|
|||
cherysupplierproscheduling:{ |
|||
tableName:'SUPPLIER_PRO_SCHEDULING', |
|||
taskName:'排产数据' |
|||
}, |
|||
|
|||
// 供应商基础信息
|
|||
supplierinfodt:{ |
|||
tableName:'SUPPLIER_INFO', |
|||
taskName:'供应商基础信息' |
|||
}, |
|||
|
|||
// 人员资质信息
|
|||
supplieremployeedt:{ |
|||
tableName:'SUPPLIER_EMPLOYEE', |
|||
taskName:'人员资质信息' |
|||
}, |
|||
|
|||
// BOM主数据
|
|||
cherysupplierbom:{ |
|||
tableName:'SUPPLIER_BOM', |
|||
taskName:'BOM主数据' |
|||
}, |
|||
|
|||
// 过程控制项质量数据
|
|||
cherysupplierprocps:{ |
|||
tableName:'SUPPLIER_PRO_CPS', |
|||
taskName:'过程控制项质量数据' |
|||
}, |
|||
|
|||
// 生产过程数据
|
|||
cherysupplierprodata:{ |
|||
tableName:'SUPPLIER_PRO_DATA', |
|||
taskName:'生产过程数据' |
|||
}, |
|||
|
|||
// 产品一次合格率
|
|||
cherysupplierprofirstpassyield:{ |
|||
tableName:'SUPPLIER_PRO_FIRST_PASSYIELD', |
|||
taskName:'产品一次合格率' |
|||
}, |
|||
|
|||
// 工位一次合格率
|
|||
cherysupplierprostationfirstpassyield:{ |
|||
tableName:'SUPPLIER_PRO_STATION_FIRST_PASSYIELD', |
|||
taskName:'工位一次合格率' |
|||
}, |
|||
|
|||
// 缺陷业务数据
|
|||
cherysupplierproflaw:{ |
|||
tableName:'SUPPLIER_PRO_FLAW', |
|||
taskName:'缺陷业务数据' |
|||
}, |
|||
|
|||
// 物料主数据
|
|||
cherysupplierpromaterialdata:{ |
|||
tableName:'SUPPLIER_PRO_MATERIAL_DATA', |
|||
taskName:'物料主数据' |
|||
}, |
|||
|
|||
// 附件类数据
|
|||
cherysupplierproattachmentdata:{ |
|||
tableName:'SUPPLIER_PRO_ATTACHMENT_DATA', |
|||
taskName:'附件类数据' |
|||
}, |
|||
|
|||
// 工艺装备
|
|||
supplierproprocessequipmentdt:{ |
|||
tableName:'SUPPLIER_PRO_PROCESS_EQUIPMENT', |
|||
taskName:'工艺装备' |
|||
}, |
|||
|
|||
// 工艺
|
|||
cherysupplierproprocess:{ |
|||
tableName:'SUPPLIER_PRO_PROCESS', |
|||
taskName:'工艺' |
|||
}, |
|||
|
|||
/*无页面，供任务明细页面使用 */ |
|||
// 环境业务数据
|
|||
cherysupplierproenvironment:{ |
|||
tableName:'SUPPLIER_PRO_ENVIRONMENT', |
|||
taskName:'环境业务数据' |
|||
}, |
|||
|
|||
// 设备OEE达成率
|
|||
cherysupplierprooeeachievementrate:{ |
|||
tableName:'SUPPLIER_PRO_OEE_ACHIEVEMENT_RATE', |
|||
taskName:'设备OEE达成率' |
|||
}, |
|||
|
|||
// OEE时间明细
|
|||
cherysupplierprooeetimedetails:{ |
|||
tableName:'SUPPLIER_PRO_OEE_TIME_DETAILS', |
|||
taskName:'OEE时间明细' |
|||
}, |
|||
|
|||
|
|||
// 整车月度生产计划2
|
|||
supplierproplaning:{ |
|||
taskName:'整车月度生产计划2' |
|||
}, |
|||
|
|||
// M+6月物料需求计划
|
|||
cherysuppliermrpmonth:{ |
|||
taskName:'M+6月物料需求计划' |
|||
}, |
|||
|
|||
// 日物料需求计划
|
|||
cherysuppliermrpdata:{ |
|||
taskName:'日物料需求计划' |
|||
}, |
|||
|
|||
// 计划协议
|
|||
cherysuppliersaweek:{ |
|||
taskName:'计划协议' |
|||
}, |
|||
|
|||
// 采购订单
|
|||
cherysupplierpo:{ |
|||
taskName:'采购订单' |
|||
}, |
|||
|
|||
// 过焊装未过总装
|
|||
cherysupplierporhschedul:{ |
|||
taskName:'过焊装未过总装' |
|||
}, |
|||
|
|||
// 过涂装未过总装
|
|||
cherysupplierprotschedul:{ |
|||
taskName:'过涂装未过总装' |
|||
}, |
|||
|
|||
// 退货单
|
|||
cherysupplierreturn:{ |
|||
taskName:'退货单' |
|||
}, |
|||
|
|||
// 奇瑞RDC共享库存
|
|||
supplierinvdata:{ |
|||
taskName:'奇瑞RDC共享库存' |
|||
}, |
|||
|
|||
// 日MRP状态监控
|
|||
cherysuppliermrp:{ |
|||
taskName:'日MRP状态监控' |
|||
}, |
|||
|
|||
// 日MRP预警推移
|
|||
cherysuppliermrpwarning:{ |
|||
taskName:'日MRP预警推移' |
|||
}, |
|||
|
|||
// 看板送货单
|
|||
cherysupplierdelstate:{ |
|||
taskName:'看板送货单' |
|||
}, |
|||
|
|||
// 排序供货
|
|||
cherysupplierprocschedul:{ |
|||
taskName:'排序供货' |
|||
}, |
|||
} |
|||
|
|||
export default apiServeNames |
|||
File diff suppressed because it is too large
@ -0,0 +1,125 @@ |
|||
const EnumList = { |
|||
// 是否
|
|||
whether:[ |
|||
{label:'是',value:1,type:'success'}, |
|||
{label:'否',value:0,type:'danger'} |
|||
], |
|||
// 是否Y/N
|
|||
whetherByYN:[ |
|||
{label:'是',value:'Y',type:'success'}, |
|||
{label:'否',value:'N',type:'danger'}, |
|||
], |
|||
// 是否boolean
|
|||
whetherBoolean:[ |
|||
{label:'是',value:true,type:'success'}, |
|||
{label:'否',value:false,type:'danger'} |
|||
], |
|||
// 退货类型
|
|||
returnType:[ |
|||
{label:'合格品',value:1}, |
|||
{label:'不合格品',value:0} |
|||
], |
|||
// 物料类型
|
|||
materialType:[ |
|||
{label:'成品',value:'成品'}, |
|||
{label:'半成品',value:'半成品'}, |
|||
{label:'原材料',value:'原材料'}, |
|||
], |
|||
// 父件（供应商总成）类型
|
|||
vendorProductType:[ |
|||
{label:'成品',value:'成品'}, |
|||
{label:'半成品',value:'半成品'}, |
|||
], |
|||
// 子件类型
|
|||
subMaterialType:[ |
|||
{label:'半成品',value:'半成品'}, |
|||
{label:'原材料',value:'原材料'}, |
|||
], |
|||
// 库存状态
|
|||
inventoryStatus:[ |
|||
{label:'生产件',value:'生产件'}, |
|||
{label:'呆滞件',value:'呆滞件'}, |
|||
{label:'备件',value:'备件'}, |
|||
{label:'KD件',value:'KD件'}, |
|||
], |
|||
// 反馈结果
|
|||
feedbackResults:[ |
|||
{label:'异常',value:'1'}, |
|||
{label:'无异常',value:'0'}, |
|||
], |
|||
// 风险类型
|
|||
ventureType:[ |
|||
{label:'生产节拍不足',value:'1'}, |
|||
{label:'人员不足',value:'2'}, |
|||
{label:'原材料不足',value:'3'}, |
|||
{label:'设备异常',value:'4'}, |
|||
{label:'其他',value:'5'}, |
|||
], |
|||
// 批次的最终判定结果
|
|||
checkResult:[ |
|||
{label:'合格',value:'OK'}, |
|||
{label:'不合格',value:'NG'}, |
|||
], |
|||
// 排产状态
|
|||
planStatus:[ |
|||
{label:'未生产',value:'0'}, |
|||
{label:'生产中',value:'1'}, |
|||
{label:'已完工',value:'2'}, |
|||
{label:'已取消',value:'3'}, |
|||
{label:'已终止',value:'4'}, |
|||
], |
|||
// 在线检测
|
|||
detectionMode:[ |
|||
{label:'在生产线上进行检测',value:'inline'}, |
|||
{label:'从生产线上拿下来进行检测',value:'offline'}, |
|||
{label:'同时存在',value:'both'}, |
|||
], |
|||
// 班次
|
|||
workShift:[ |
|||
{label:'白班',value:'白班'}, |
|||
{label:'晚班',value:'晚班'}, |
|||
{label:'中班',value:'中班'}, |
|||
], |
|||
// 检测方式
|
|||
checkMode:[ |
|||
{label:'人工',value:'人工'}, |
|||
{label:'设备',value:'设备'}, |
|||
], |
|||
// 缺陷分类
|
|||
defectsClass:[ |
|||
{label:'外观',value:'外观'}, |
|||
{label:'尺寸',value:'尺寸'}, |
|||
{label:'材料',value:'材料'}, |
|||
{label:'功能',value:'功能'}, |
|||
{label:'性能',value:'性能'}, |
|||
{label:'其他',value:'其他'}, |
|||
], |
|||
// 缺陷等级
|
|||
defectsLevel:[ |
|||
{label:'严重',value:'1'}, |
|||
{label:'一般',value:'2'}, |
|||
{label:'轻微',value:'3'}, |
|||
], |
|||
// 附件数据类型
|
|||
attachmentType:[ |
|||
{label:'产前管理',value:'1'}, |
|||
{label:'人员资质',value:'2'}, |
|||
{label:'监控视频',value:'3'}, |
|||
], |
|||
// 工艺装备类型分类
|
|||
deviceType:[ |
|||
{label:'模具',value:'1'}, |
|||
{label:'检具',value:'2'}, |
|||
{label:'夹具',value:'3'}, |
|||
], |
|||
|
|||
|
|||
// OEE时间明细-大类（供任务明细页面使用）
|
|||
OEETimeType:[ |
|||
{label:'计划工作',value:'1'}, |
|||
{label:'计划停机',value:'2'}, |
|||
{label:'非计划停机',value:'3'}, |
|||
], |
|||
} |
|||
|
|||
export default EnumList |
|||
@ -0,0 +1,96 @@ |
|||
import apiServeNames from '@/utils/common/apiServeNames' |
|||
import apiTableColumns from '@/utils/common/apiTableColumns' |
|||
|
|||
import store from '@/stores' |
|||
const userStore = store.userStore() |
|||
const userInfo = userStore.state |
|||
|
|||
// filter中空字符转义
|
|||
export function getPageParamsForFilter(pageParams){ |
|||
if(pageParams.filters && JSON.stringify(pageParams.filters) != "{}"){ |
|||
for(let i in pageParams.filters){ |
|||
if(pageParams.filters[i] == ""){ |
|||
pageParams.filters[i] = null |
|||
} |
|||
} |
|||
} |
|||
return pageParams |
|||
} |
|||
|
|||
// 下载字符串以json文件格式
|
|||
/** |
|||
* @param {*} stringData 字符串 |
|||
* @param {*} title 文件名 |
|||
*/ |
|||
export async function downLoadJSONByString(stringData,title){ |
|||
// dada 表示要转换的字符串数据，type 表示要转换的数据格式
|
|||
const blob = new Blob([stringData], { |
|||
type: 'application/json' |
|||
}) |
|||
// 根据 blob生成 url链接
|
|||
const objectURL = URL.createObjectURL(blob) |
|||
// 创建一个 a 标签Tag
|
|||
const aTag = document.createElement('a') |
|||
// 设置文件的下载地址
|
|||
aTag.href = objectURL |
|||
// 设置保存后的文件名称
|
|||
aTag.download = title |
|||
// 给 a 标签添加点击事件
|
|||
aTag.click() |
|||
// 释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。
|
|||
// 当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。
|
|||
URL.revokeObjectURL(objectURL) |
|||
} |
|||
|
|||
// 法根据tableName获取api
|
|||
export function getApiByServeName(value,prop='tableName'){ |
|||
let _api = null |
|||
// taskName 特殊处理
|
|||
if(prop == 'taskName'){ |
|||
let _special = { |
|||
'整车月度生产计划1':'supplierproplaning', |
|||
'M+6月物料需求计划1':'cherysuppliermrpmonth', |
|||
'M+6月物料需求计划2':'cherysuppliermrpmonth', |
|||
'供应商共享库存-上午':'cherysuppliersinvdata', |
|||
'供应商共享库存-晚上':'cherysuppliersinvdata', |
|||
} |
|||
for(let i in _special){ |
|||
if(i == value){ |
|||
_api = _special[i] |
|||
} |
|||
} |
|||
} |
|||
if(!_api){ |
|||
for(let i in apiServeNames){ |
|||
if(apiServeNames[i][prop] == value){ |
|||
_api = i |
|||
} |
|||
} |
|||
} |
|||
return _api |
|||
} |
|||
|
|||
// 法根据tableName获取api对应的Coloums
|
|||
export function getColoumsByServeName(value,prop='tableName',noEdit){ |
|||
let _api = getApiByServeName(value,prop) |
|||
let __colums = null |
|||
if(_api){ |
|||
__colums = JSON.parse(JSON.stringify(apiTableColumns[_api])) |
|||
if(noEdit){ |
|||
__colums.forEach(item => { |
|||
if(item.type == 'input' || item.type == 'numberInput' || item.type == 'datetimeInput'){ |
|||
item.type = null |
|||
} |
|||
if(item.type == 'filterSelect'){ |
|||
item.type = 'filter' |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
return __colums |
|||
} |
|||
|
|||
// 获取字段设置暂存的key值
|
|||
export function getLocalTableColumnsName(pageName){ |
|||
return `tableColumns_${userInfo.userName}_${pageName}` |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
// 重写setItem事件，当使用setItem的时候，触发，window.dispatchEvent派发事件
|
|||
export function dispatchEventStroage () { |
|||
const signSetItem = localStorage.setItem |
|||
localStorage.setItem = function (key, val) { |
|||
let setEvent = new Event('setItemEvent') |
|||
setEvent.key = key |
|||
setEvent.newValue = val |
|||
window.dispatchEvent(setEvent) |
|||
signSetItem.apply(this, arguments) |
|||
} |
|||
} |
|||
@ -1,28 +1,39 @@ |
|||
<template> |
|||
<div class="dashboard-container"> |
|||
<div class="dashboard-text">name: {{ name }}</div> |
|||
<div class="homeMenuPage"> |
|||
<menu-Item |
|||
v-for="(item,index) in treeData" |
|||
:key="index" |
|||
:item="item" |
|||
></menu-Item> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
defineOptions({ name: 'dashboardIndex' }) |
|||
import { getCurrentMenu } from '@/api/system/userApi' |
|||
import store from '@/stores' |
|||
import { computed } from 'vue' |
|||
import menuItem from './menuItem.vue' |
|||
import { onMounted,computed,ref } from 'vue' |
|||
import { asyncRoutes } from '@/router/index' |
|||
|
|||
const userStore = store.userStore() |
|||
const name = computed(() => userStore.state.name) |
|||
// const name = computed(() => userStore.state.name) |
|||
|
|||
let loading = ref(false) |
|||
let treeData = asyncRoutes |
|||
const defaultProps = ref({ |
|||
children: 'children', |
|||
label: 'menuName', |
|||
}) |
|||
|
|||
onMounted(() => { |
|||
}) |
|||
|
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.dashboard { |
|||
&-container { |
|||
margin: 30px; |
|||
} |
|||
|
|||
&-text { |
|||
font-size: 30px; |
|||
line-height: 46px; |
|||
} |
|||
.homeMenuPage{ |
|||
width:100%; |
|||
overflow:auto |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,72 @@ |
|||
<template> |
|||
<div :class="[(!props.item.children || props.item.children.length <= 0) ? 'childBlock':'menuBlock clearfix']"> |
|||
<div class="firstTitle" v-if="props.item.children && props.item.children.length > 0">{{props.item.meta.title}}</div> |
|||
<router-link v-else class="itemTitle" :to="props.item.path"> |
|||
{{props.item.meta.title}}</router-link> |
|||
<div v-if="props.item.children && props.item.children.length > 0" class="isNestBolck"> |
|||
<menu-Item |
|||
v-for="child in props.item.children" |
|||
:key="child.path" |
|||
:item="child" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
defineOptions({ name: 'menuItem' }) |
|||
import menuItem from './menuItem.vue' |
|||
import { onMounted,ref } from 'vue' |
|||
|
|||
const props = defineProps({ |
|||
// 数据 |
|||
item:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
}) |
|||
|
|||
onMounted(() => { |
|||
console.log(props.item) |
|||
}) |
|||
|
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.clearfix{ |
|||
zoom:1; |
|||
} |
|||
.clearfix:after{ |
|||
clear:both; |
|||
display:block; |
|||
visibility:hidden; |
|||
height:0; |
|||
line-height:0; |
|||
content:''; |
|||
} |
|||
.menuBlock{ |
|||
margin-bottom:16px; |
|||
border-bottom:#e5e5e5 solid 1px; |
|||
box-shadow:#f2f2f2 1px 3px 5px; |
|||
padding:20px 20px 0; |
|||
|
|||
.childBlock{ |
|||
.itemTitle{ |
|||
float:left; |
|||
margin-bottom:13px; |
|||
margin-right:30px; |
|||
color:#555; |
|||
&:hover{ |
|||
color:var(--el-color-primary) |
|||
} |
|||
} |
|||
} |
|||
.firstTitle{ |
|||
border-left: var(--el-color-primary) solid 5px; |
|||
padding-left:15px; |
|||
margin-bottom:20px; |
|||
color:#333; |
|||
font-weight:bold |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,63 @@ |
|||
<template> |
|||
<tablePage |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// tablePage 使用demo |
|||
defineOptions({ name: 'tablePageDemo' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'tablePageDemo', |
|||
searchFilter: { |
|||
materialCode: null, |
|||
// createTime:null, |
|||
// isDelete:null, |
|||
// quantity1:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'materialCode',label:'物料号'}, |
|||
// {type:'datetimerange',prop:'createTime',label:'创建时间'}, |
|||
// {type:'number',prop:'quantity1',label:'数量1'}, |
|||
// {type:'select',prop:'isDelete',label:'是否删除',options:EnumList.whether,noSearch:true}, |
|||
], |
|||
|
|||
// 左侧操作列,可参考 view/task/taskConifgure.vue 的查看明细 |
|||
// leftOperation:[ |
|||
// {label:'查看详情',name:'showInfo',link:true,type:'primary'} |
|||
// ], |
|||
|
|||
// 右侧操作列方式1，默认为api通用方式 |
|||
// rightOperation:'apiUpdate,apiDelete', |
|||
//右侧操作列方式2,自定义方式，如果需要默认的api，则使用showApiRightOperation传参 |
|||
// rightOperation:[], |
|||
// showApiRightOperation:['apiUpdate'] |
|||
// 新增/编辑特殊rule |
|||
// apiEditFormRules:{ |
|||
// supplierCode: [{ required: true, message: '必填项', trigger: 'blur' }], |
|||
// supplierName: [{ required: true, message: '必填项', trigger: 'blur' }], |
|||
// deadLine: [{ required: true, message: '必填项', trigger: 'blur' }], |
|||
// } |
|||
}) |
|||
|
|||
// 左侧操作事件 |
|||
// function leftOperationHadel(btn,scope) { |
|||
// console.log(btn,scope) |
|||
// } |
|||
|
|||
//右侧操作列方式2，自定义方式 |
|||
// state.rightOperation = [{label:'编辑2',name:'edit',link:true,type:'danger',auth:state.apiName+':page'}] |
|||
|
|||
// 节点传参 |
|||
// :leftOperation="state.leftOperation" |
|||
// @leftOperationHadel="leftOperationHadel" |
|||
// :rightOperation="state.rightOperation" |
|||
// :showApiRightOperation="state.showApiRightOperation" |
|||
// :apiEditFormRules="state.apiEditFormRules" |
|||
|
|||
</script> |
|||
@ -0,0 +1,38 @@ |
|||
<template> |
|||
<ediTtablePage |
|||
:columnWidth="200" |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
:rightOperation="state.rightOperation" |
|||
:detailColumName="'cherysuppliercondateDetail'" |
|||
:searchButtons="['search','export','outputMany']" |
|||
:multipleTable="state.auths.hasPermission(state.apiName+':outputMany')" |
|||
></ediTtablePage> |
|||
</template> |
|||
|
|||
|
|||
<script setup> |
|||
// 日物料需求计划风险确认 |
|||
defineOptions({ name: 'supplierConDate' }) |
|||
import store from '@/stores' |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import ediTtablePage from '@/components/ediTtablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysuppliercondate', |
|||
searchFilter: { |
|||
supplierCode: null, |
|||
creationTime: null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'supplierCode',label:'供应商代码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
auths:store.permissionStore(), |
|||
// :tableFormRules="state.tableFormRules" |
|||
// tableFormRules:{ |
|||
// plantId:[{ required: true, message: '必填', trigger: 'change' },] |
|||
// } |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,38 @@ |
|||
<template> |
|||
<ediTtablePage |
|||
:columnWidth="200" |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
:rightOperation="state.rightOperation" |
|||
:detailColumName="'cherysupplierconmmrpDetail'" |
|||
:searchButtons="['search','export','outputMany']" |
|||
:multipleTable="state.auths.hasPermission(state.apiName+':outputMany')" |
|||
></ediTtablePage> |
|||
</template> |
|||
|
|||
|
|||
<script setup> |
|||
// M+6月物料需求计划风险确认 |
|||
defineOptions({ name: 'supplierConMmrp' }) |
|||
import store from '@/stores' |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import ediTtablePage from '@/components/ediTtablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysupplierconmmrp', |
|||
searchFilter: { |
|||
supplierCode: null, |
|||
creationTime: null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'supplierCode',label:'供应商代码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
auths:store.permissionStore(), |
|||
// :tableFormRules="state.tableFormRules" |
|||
// tableFormRules:{ |
|||
// plantId:[{ required: true, message: '必填', trigger: 'change' },] |
|||
// } |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,38 @@ |
|||
<template> |
|||
<ediTtablePage |
|||
:columnWidth="200" |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
:rightOperation="state.rightOperation" |
|||
:detailColumName="'cherysupplierconpoDetail'" |
|||
:searchButtons="['search','export','outputMany']" |
|||
:multipleTable="state.auths.hasPermission(state.apiName+':outputMany')" |
|||
></ediTtablePage> |
|||
</template> |
|||
|
|||
|
|||
<script setup> |
|||
// 采购订单风险确认 |
|||
defineOptions({ name: 'supplierConPo' }) |
|||
import store from '@/stores' |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import ediTtablePage from '@/components/ediTtablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysupplierconpo', |
|||
searchFilter: { |
|||
supplierCode: null, |
|||
creationTime: null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'supplierCode',label:'供应商代码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
auths:store.permissionStore(), |
|||
// :tableFormRules="state.tableFormRules" |
|||
// tableFormRules:{ |
|||
// plantId:[{ required: true, message: '必填', trigger: 'change' },] |
|||
// } |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<tablePage |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 看板送货单 |
|||
defineOptions({ name: 'supplierDelState' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysupplierdelstate', |
|||
searchFilter: { |
|||
deliveryNumber: null, |
|||
createTime:null, |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'deliveryNumber',label:'配送单号'}, |
|||
{type:'datetimerange',prop:'createTime',label:'创建时间'}, |
|||
], |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<tablePage |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 奇瑞RDC共享库存 |
|||
defineOptions({ name: 'supplierInvData' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'supplierinvdata', |
|||
searchFilter: { |
|||
plantId: null, |
|||
creationTime:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'plantId',label:'工厂代码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<tablePage |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 日物料需求计划 |
|||
defineOptions({ name: 'supplierMrpDate' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysuppliermrpdata', |
|||
searchFilter: { |
|||
materialCode: null, |
|||
creationTime: null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'materialCode',label:'零件号'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<tablePage |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// M+6月物料需求计划 |
|||
defineOptions({ name: 'supplierMrpMonth' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysuppliermrpmonth', |
|||
searchFilter: { |
|||
materialCode: null, |
|||
creationTime:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'materialCode',label:'零件号'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<tablePage |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 日MRP状态监控 |
|||
defineOptions({ name: 'supplierMrpState' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysuppliermrp', |
|||
searchFilter: { |
|||
plantId: null, |
|||
creationTime:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'plantId',label:'工厂代码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<tablePage |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 日MRP预警推移 |
|||
defineOptions({ name: 'supplierMrpWarning' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysuppliermrpwarning', |
|||
searchFilter: { |
|||
plantId: null, |
|||
creationTime:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'plantId',label:'工厂代码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<tablePage |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 采购订单 |
|||
defineOptions({ name: 'supplierPo' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysupplierpo', |
|||
searchFilter: { |
|||
purchaseOrder: null, |
|||
creationTime: null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'purchaseOrder',label:'采购订单号'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<tablePage |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 排序供货 |
|||
defineOptions({ name: 'supplierProCschedul' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysupplierprocschedul', |
|||
searchFilter: { |
|||
materialCode: null, |
|||
creationTime:null, |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'materialCode',label:'物料编码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<tablePage |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 过焊装未过总装 |
|||
defineOptions({ name: 'supplierProHschedul' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysupplierporhschedul', |
|||
searchFilter: { |
|||
productionLineId: null, |
|||
creationTime: null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'productionLineId',label:'产线代码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<tablePage |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 整车月度生产计划2 |
|||
defineOptions({ name: 'supplierProPlaning' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'supplierproplaning', |
|||
searchFilter: { |
|||
materialCode: null, |
|||
creationTime:null, |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'materialCode',label:'物料号'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<tablePage |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 过涂装未过总装 |
|||
defineOptions({ name: 'supplierProTschedul' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysupplierprotschedul', |
|||
searchFilter: { |
|||
productionLineId: null, |
|||
creationTime:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'productionLineId',label:'产线代码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<tablePage |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 退货单 |
|||
defineOptions({ name: 'supplierReturn' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysupplierreturn', |
|||
searchFilter: { |
|||
returnNumber: null, |
|||
creationTime: null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'returnNumber',label:'退货单号'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<tablePage |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 计划协议 |
|||
defineOptions({ name: 'supplierSaWeek' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysuppliersaweek', |
|||
searchFilter: { |
|||
scheduleAgreement: null, |
|||
creationTime: null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'scheduleAgreement',label:'计划协议号'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,29 @@ |
|||
<template> |
|||
<tablePage |
|||
:columnWidth="150" |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
:rightOperation="state.rightOperation" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 供应商共享库存 |
|||
defineOptions({ name: 'supplierSinvData' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysuppliersinvdata', |
|||
searchFilter: { |
|||
supplierCode: null, |
|||
creationTime:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'supplierCode',label:'供应商代码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
rightOperation:'apiUpdate', |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,29 @@ |
|||
<template> |
|||
<tablePage |
|||
:columnWidth="150" |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
:rightOperation="state.rightOperation" |
|||
:apiEditFormRules="state.apiEditFormRules" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// BOM主数据 |
|||
defineOptions({ name: 'supplierBom' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysupplierbom', |
|||
searchFilter: { |
|||
supplierCode: null, |
|||
creationTime:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'supplierCode',label:'供应商代码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<tablePage |
|||
:columnWidth="150" |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
:rightOperation="state.rightOperation" |
|||
:searchButtons="['search','create','import','export']" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 人员资质信息 |
|||
defineOptions({ name: 'supplierEmployee' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'supplieremployeedt', |
|||
searchFilter: { |
|||
supplierCode: null, |
|||
creationTime:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'supplierCode',label:'供应商代码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
rightOperation:'apiUpdate,apiDelete', |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<tablePage |
|||
:columnWidth="150" |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
:rightOperation="state.rightOperation" |
|||
:searchButtons="['search','create','import','export']" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 供应商基础信息 |
|||
defineOptions({ name: 'supplierInfo' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'supplierinfodt', |
|||
searchFilter: { |
|||
supplierCode: null, |
|||
creationTime:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'supplierCode',label:'供应商代码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
rightOperation:'apiUpdate,apiDelete', |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<tablePage |
|||
:columnWidth="150" |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
:rightOperation="state.rightOperation" |
|||
:searchButtons="['search','create','import','export']" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 附件类数据 |
|||
defineOptions({ name: 'supplierProAttachmentData' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysupplierproattachmentdata', |
|||
searchFilter: { |
|||
supplierCode: null, |
|||
creationTime:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'supplierCode',label:'供应商代码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
rightOperation:'apiUpdate,apiDelete', |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<tablePage |
|||
:columnWidth="150" |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
:rightOperation="state.rightOperation" |
|||
:searchButtons="['search','export','custominvoke']" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 过程控制项质量数据 |
|||
defineOptions({ name: 'supplierProCps' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysupplierprocps', |
|||
searchFilter: { |
|||
supplierCode: null, |
|||
creationTime:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'supplierCode',label:'供应商代码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
rightOperation:'apiUpdate', |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<tablePage |
|||
:columnWidth="150" |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
:rightOperation="state.rightOperation" |
|||
:searchButtons="['search','export','custominvoke']" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 生产过程数据 |
|||
defineOptions({ name: 'supplierProData' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysupplierprodata', |
|||
searchFilter: { |
|||
supplierCode: null, |
|||
creationTime:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'supplierCode',label:'供应商代码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
rightOperation:'apiUpdate', |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<tablePage |
|||
:columnWidth="150" |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
:rightOperation="state.rightOperation" |
|||
:searchButtons="['search','export','custominvoke']" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 产品一次合格率 |
|||
defineOptions({ name: 'supplierProFirstPassyield' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysupplierprofirstpassyield', |
|||
searchFilter: { |
|||
cheryProductNo: null, |
|||
creationTime:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'cheryProductNo',label:'奇瑞零件号'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
rightOperation:'apiUpdate', |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<tablePage |
|||
:columnWidth="150" |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
:rightOperation="state.rightOperation" |
|||
:searchButtons="['search','export','custominvoke']" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 缺陷业务数据 |
|||
defineOptions({ name: 'supplierProFlaw' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysupplierproflaw', |
|||
searchFilter: { |
|||
supplierCode: null, |
|||
creationTime:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'supplierCode',label:'供应商代码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
rightOperation:'apiUpdate', |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<tablePage |
|||
:columnWidth="150" |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
:rightOperation="state.rightOperation" |
|||
:searchButtons="['search','export','custominvoke']" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 来料检验数据 |
|||
defineOptions({ name: 'supplierProMaterialStock' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'supplierpromaterialstock', |
|||
searchFilter: { |
|||
supplierCode: null, |
|||
creationTime:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'supplierCode',label:'供应商代码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
rightOperation:'apiUpdate', |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,29 @@ |
|||
<template> |
|||
<tablePage |
|||
:columnWidth="150" |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
:rightOperation="state.rightOperation" |
|||
:apiEditFormRules="state.apiEditFormRules" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 工艺 |
|||
defineOptions({ name: 'supplierProProcess' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysupplierproprocess', |
|||
searchFilter: { |
|||
techCode: null, |
|||
creationTime:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'techCode',label:'工艺编码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<tablePage |
|||
:columnWidth="150" |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
:rightOperation="state.rightOperation" |
|||
:searchButtons="['search','create','import','export']" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 工艺装备 |
|||
defineOptions({ name: 'supplierProProcessEquipment' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'supplierproprocessequipmentdt', |
|||
searchFilter: { |
|||
deviceCode: null, |
|||
creationTime:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'deviceCode',label:'工艺装备编码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
rightOperation:'apiUpdate,apiDelete', |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<tablePage |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 排产数据 |
|||
defineOptions({ name: 'supplierProScheduling' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysupplierproscheduling', |
|||
searchFilter: { |
|||
plantId: null, |
|||
creationTime:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'plantId',label:'工厂代码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,29 @@ |
|||
<template> |
|||
<tablePage |
|||
:columnWidth="150" |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
:rightOperation="state.rightOperation" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 物料主数据 |
|||
defineOptions({ name: 'upplierProMaterialData' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysupplierpromaterialdata', |
|||
searchFilter: { |
|||
cheryProductNo: null, |
|||
creationTime:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'cheryProductNo',label:'奇瑞零件号'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
rightOperation:'apiUpdate', |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<tablePage |
|||
:columnWidth="150" |
|||
:apiName="state.apiName" |
|||
:searchOptions="state.searchOptions" |
|||
:searchFilter="state.searchFilter" |
|||
:rightOperation="state.rightOperation" |
|||
:searchButtons="['search','export','custominvoke']" |
|||
></tablePage> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 工位一次合格率 |
|||
defineOptions({ name: 'upplierProStationFirstPassyield' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import tablePage from '@/components/tablePage/index.vue' |
|||
|
|||
const state = reactive({ |
|||
apiName:'cherysupplierprostationfirstpassyield', |
|||
searchFilter: { |
|||
stationId: null, |
|||
creationTime:null |
|||
}, |
|||
searchOptions:[ |
|||
{type:'input',prop:'stationId',label:'工位代码'}, |
|||
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
|||
], |
|||
rightOperation:'apiUpdate', |
|||
}) |
|||
</script> |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue