Compare commits
19 Commits
| Author | SHA1 | Date |
|---|---|---|
 安虹睿
|
75483bceba | 11 hours ago |
|
安虹睿
|
84ef947e56 | 2 days ago |
|
安虹睿
|
03bbbf44b1 | 5 days ago |
|
安虹睿
|
ea1165ae08 | 6 days ago |
|
安虹睿
|
e69fbed185 | 1 week ago |
|
安虹睿
|
cda5da22f6 | 1 week ago |
|
安虹睿
|
bf1dd3ccde | 1 week ago |
|
安虹睿
|
3a265eb2ef | 2 weeks ago |
|
安虹睿
|
42520a2811 | 2 weeks ago |
|
安虹睿
|
b82827bf71 | 2 weeks ago |
|
安虹睿
|
5f53b4be6e | 2 weeks ago |
|
安虹睿
|
a330fee7d7 | 2 weeks ago |
|
安虹睿
|
ab46d560ac | 3 weeks ago |
|
安虹睿
|
5e6ae267df | 3 weeks ago |
|
安虹睿
|
36d57e116d | 3 weeks ago |
|
安虹睿
|
341097ef6f | 3 weeks ago |
|
安虹睿
|
2f59b9a618 | 3 weeks ago |
|
安虹睿
|
f6b37e4cb5 | 3 weeks ago |
|
安虹睿
|
b190182cc4 | 4 weeks ago |
108 changed files with 6473 additions and 63 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="YYYY-MM-DD HH:mm:ss" |
||||
|
value-format="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,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,337 @@ |
|||||
|
<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" |
||||
|
: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> |
||||
|
|
||||
|
<!-- 右侧操作列 --> |
||||
|
<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 { h,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,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'){ |
||||
|
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,584 @@ |
|||||
|
<template> |
||||
|
<div class="app-container" v-loading="state.loading"> |
||||
|
<el-card class="search-container" v-if="!props.hideSearch"> |
||||
|
<el-form :inline="true"> |
||||
|
<el-form-item |
||||
|
v-auth="(props.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" |
||||
|
/> |
||||
|
<!-- 选择框 --> |
||||
|
<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> |
||||
|
<el-button |
||||
|
v-for="(btn,btn_key) in props.searchButtons" |
||||
|
:key="btn_key" |
||||
|
: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> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</el-card> |
||||
|
|
||||
|
<el-card class="paged-table-container"> |
||||
|
<elTable |
||||
|
:columnWidth="props.columnWidth" |
||||
|
:columnHeaderAlign="props.columnHeaderAlign" |
||||
|
:columnAlign="props.columnAlign" |
||||
|
:tableData="state.tableData" |
||||
|
:tableColumns="getTableColumns()" |
||||
|
@sortChange="sortChange" |
||||
|
:leftOperation="props.leftOperation" |
||||
|
@leftOperationHadel="leftOperationHadel" |
||||
|
:leftOperationColumnWidth="props.leftOperationColumnWidth" |
||||
|
:rightOperation="getRightOperation()" |
||||
|
@rightOperationHadel="rightOperationHadel" |
||||
|
:multipleTable="props.multipleTable" |
||||
|
@tableSelectionHandle="tableSelectionHandle" |
||||
|
></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 { |
||||
|
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 { getPageParamsForFilter } from '@/utils/common/index' |
||||
|
import { downloadByData } from '@/utils/download' |
||||
|
import importPop from '@/components/importPop/index.vue' |
||||
|
import apiEditPop from '@/components/apiEditPop/index.vue' |
||||
|
import { formatDate } from '@/utils/formatTime' |
||||
|
import apiServeNames from '@/utils/common/apiServeNames' |
||||
|
|
||||
|
import { useRoute } from 'vue-router' |
||||
|
const route = useRoute() |
||||
|
const userStore = store.userStore() |
||||
|
const userInfo = userStore.state |
||||
|
|
||||
|
const 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'}, |
||||
|
}, |
||||
|
tableData:[], |
||||
|
// table排序处理 |
||||
|
sortFilter:{ |
||||
|
sortBy:undefined, |
||||
|
isAscending:undefined |
||||
|
}, |
||||
|
pager:{ |
||||
|
page: 1, |
||||
|
pageSize: 10, |
||||
|
total: 1, |
||||
|
}, |
||||
|
tableSelectList:[] |
||||
|
}) |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
// api名称 |
||||
|
apiName: { |
||||
|
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 |
||||
|
}, |
||||
|
// 多选 |
||||
|
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: {} |
||||
|
}, |
||||
|
// 表头宽度 |
||||
|
columnWidth:{ |
||||
|
type: Number, |
||||
|
default: 120 |
||||
|
}, |
||||
|
// 表头对齐 |
||||
|
columnHeaderAlign:{ |
||||
|
type: String, |
||||
|
default: 'center' |
||||
|
}, |
||||
|
// 表内容对齐 |
||||
|
columnAlign:{ |
||||
|
type: String, |
||||
|
default: 'center' |
||||
|
}, |
||||
|
// 表单规则 |
||||
|
apiEditFormRules:{ |
||||
|
type: Object, |
||||
|
default: null |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// 获取表头 |
||||
|
function getTableColumns(){ |
||||
|
return props.tableColumns || apiTableColumns[props.apiName] |
||||
|
} |
||||
|
|
||||
|
const emits = defineEmits([ |
||||
|
'leftOperationHadel', |
||||
|
'rightOperationHadel', |
||||
|
'tableSelectionHandle' |
||||
|
]) |
||||
|
|
||||
|
// table多选 |
||||
|
function tableSelectionHandle (val){ |
||||
|
state.tableSelectList = val |
||||
|
emits('tableSelectionHandle',val) |
||||
|
} |
||||
|
|
||||
|
// 左侧操作列 |
||||
|
function leftOperationHadel(btn,scope) { |
||||
|
emits('leftOperationHadel',btn,scope) |
||||
|
} |
||||
|
|
||||
|
// 获取右侧操作列 |
||||
|
function getRightOperation() { |
||||
|
// 自定义右侧列，且不需要默认api通用操作 |
||||
|
if(typeof props.rightOperation == 'object' && !props.showApiRightOperation){ |
||||
|
return props.rightOperation |
||||
|
} |
||||
|
// 无自定义操作，或者有自定义且需要默认api操作 |
||||
|
else if( |
||||
|
(typeof props.rightOperation == 'object' && props.showApiRightOperation) |
||||
|
|| typeof props.rightOperation == 'string' |
||||
|
){ |
||||
|
// 格式化默认api按钮合集 |
||||
|
let _apiArr = props.showApiRightOperation || props.rightOperation.split(',') |
||||
|
let _config = { |
||||
|
apiUpdate:{label:'编辑',type:'warning'}, |
||||
|
apiDelete:{label:'删除',type:'danger'}, |
||||
|
} |
||||
|
let _btns = [] |
||||
|
if(_apiArr && _apiArr.length > 0){ |
||||
|
_apiArr.forEach(item => { |
||||
|
_btns.push({ |
||||
|
label:_config[item].label, |
||||
|
name:item, |
||||
|
link:true, |
||||
|
type:_config[item].type, |
||||
|
auth:(props.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 = getTableColumns() |
||||
|
let _list = _tableColums.filter(item => !item.noEdit) |
||||
|
apiEditPopRef.value.open(_list,scope.row) |
||||
|
} |
||||
|
// 通用删除 |
||||
|
if(btn.name == 'apiDelete'){ |
||||
|
ElMessageBox.confirm(`是否确定删除？`, '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
state.loading = true |
||||
|
deleteCommonApi(props.apiName,scope.row.uId) |
||||
|
.then(res=>{ |
||||
|
ElMessage.success('操作成功！') |
||||
|
getTableData(1); |
||||
|
}) |
||||
|
.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(){ |
||||
|
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) { |
||||
|
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.tableData = 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.tableData = resp.data.data |
||||
|
state.pager.total = resp.data.totalCount |
||||
|
}) |
||||
|
.catch(err=>{ElMessage.error('数据获取失败！')}) |
||||
|
.finally(() => (state.loading = false)) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const importPopRef = ref() |
||||
|
// 按钮功能 |
||||
|
function searchBtnHandle(btn){ |
||||
|
console.log(btn) |
||||
|
// 查询 |
||||
|
if(btn == 'search'){ |
||||
|
getTableData(1) |
||||
|
} |
||||
|
// 新增 |
||||
|
else if (btn == 'create'){ |
||||
|
let _tableColums = getTableColumns() |
||||
|
let _list = _tableColums.filter(item => !item.noEdit) |
||||
|
apiEditPopRef.value.open(_list) |
||||
|
} |
||||
|
// 导入 |
||||
|
else if (btn == 'import'){ |
||||
|
importPopRef.value.open() |
||||
|
} |
||||
|
// 导出 |
||||
|
else if (btn == 'export'){ |
||||
|
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'){ |
||||
|
ElMessageBox.confirm('是否确定操作手动开关？', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
state.loading = true |
||||
|
let _data = { |
||||
|
taskName:apiServeNames[props.apiName].taskName, |
||||
|
client:'Chery' |
||||
|
} |
||||
|
getCommonCustominvoke(props.apiName,_data) |
||||
|
.then((res) => { |
||||
|
ElMessage.success('操作成功！') |
||||
|
getTableData(1)//同步数据查询 |
||||
|
}) |
||||
|
.finally(() => (state.loading = false)) |
||||
|
}) |
||||
|
} |
||||
|
// todo:手动传出（多选） |
||||
|
else if (btn == 'custominvokeMany'){ |
||||
|
console.log(state.tableSelectList) |
||||
|
if(state.tableSelectList && state.tableSelectList.length > 0 ){ |
||||
|
ElMessageBox.confirm('是否确定手动传出？', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
// state.loading = true |
||||
|
// deleteMenu({ ids:[id] }).then(() => { |
||||
|
|
||||
|
// }) |
||||
|
// .finally(() => (state.loading = false)) |
||||
|
}) |
||||
|
}else{ |
||||
|
ElMessage.warning('未选中任何数据') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 排序 |
||||
|
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(() => { |
||||
|
getTableData() |
||||
|
}) |
||||
|
|
||||
|
defineExpose({ |
||||
|
state, |
||||
|
getTableData |
||||
|
}); |
||||
|
</script> |
||||
@ -0,0 +1,186 @@ |
|||||
|
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:'排产数据' |
||||
|
}, |
||||
|
|
||||
|
// 供应商基础信息
|
||||
|
cherysupplierinfo:{ |
||||
|
tableName:'SUPPLIER_INFO', |
||||
|
taskName:'供应商基础信息' |
||||
|
}, |
||||
|
|
||||
|
// 人员资质信息
|
||||
|
cherysupplieremployee:{ |
||||
|
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:'附件类数据' |
||||
|
}, |
||||
|
|
||||
|
// 工艺装备
|
||||
|
cherysupplierproprocessequipment:{ |
||||
|
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预警推移' |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
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) |
||||
|
} |
||||
|
} |
||||
@ -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> |
||||
|
// 奇瑞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: '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:'cherysupplieremployee', |
||||
|
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:'cherysupplierinfo', |
||||
|
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:'cherysupplierproprocessequipment', |
||||
|
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> |
||||
@ -0,0 +1,96 @@ |
|||||
|
<template> |
||||
|
<tablePage |
||||
|
ref="tablePageRef" |
||||
|
:columnWidth="150" |
||||
|
:apiName="state.apiName" |
||||
|
:searchOptions="state.searchOptions" |
||||
|
:searchFilter="state.searchFilter" |
||||
|
:rightOperation="state.rightOperation" |
||||
|
:showApiRightOperation="state.showApiRightOperation" |
||||
|
:apiEditFormRules="state.apiEditFormRules" |
||||
|
@rightOperationHadel="rightOperationHadel" |
||||
|
></tablePage> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
defineOptions({ name: 'taskConifgure' }) |
||||
|
import { reactive, ref, onMounted,nextTick } from 'vue' |
||||
|
import tablePage from '@/components/tablePage/index.vue' |
||||
|
import { getSetisautoByUid } from '@/api/system/taskConifgureApi' |
||||
|
import { ElMessageBox,ElMessage } from 'element-plus' |
||||
|
|
||||
|
|
||||
|
const state = reactive({ |
||||
|
apiName:'taskconifgure', |
||||
|
searchFilter: { |
||||
|
tableName: null, |
||||
|
taskName:null, |
||||
|
creationTime:null, |
||||
|
}, |
||||
|
searchOptions:[ |
||||
|
{type:'input',prop:'tableName',label:'表名'}, |
||||
|
{type:'input',prop:'taskName',label:'任务名'}, |
||||
|
{type:'datetimerange',prop:'creationTime',label:'创建时间'}, |
||||
|
], |
||||
|
rightOperation:[], |
||||
|
showApiRightOperation:['apiUpdate'], |
||||
|
apiEditFormRules:{ |
||||
|
tableName: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
taskName: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
api: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
url: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
corn: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
state.rightOperation = [ |
||||
|
{ |
||||
|
label:'启动', |
||||
|
name:'setisautoOk', |
||||
|
link:true, |
||||
|
type:'success', |
||||
|
auth:state.apiName+':setisautoOk', |
||||
|
hide:(row,scope) => {return row.isAuto} |
||||
|
}, |
||||
|
{ |
||||
|
label:'关闭', |
||||
|
name:'setisautoNo', |
||||
|
link:true, |
||||
|
type:'danger', |
||||
|
auth:state.apiName+':setisautoNo', |
||||
|
hide:(row,scope) => {return !row.isAuto} |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
const tablePageRef = ref(null) |
||||
|
|
||||
|
// 自动执行-启动/关闭 接口执行 |
||||
|
function changeSetisautoHttp(row,btn){ |
||||
|
ElMessageBox.confirm(`是否确定${btn}？`, '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
tablePageRef.value.state.loading = true |
||||
|
getSetisautoByUid({uid:row.uId,isauto:!row.isAuto}) |
||||
|
.then(res=>{ |
||||
|
ElMessage.success('操作成功！') |
||||
|
tablePageRef.value.getTableData() |
||||
|
}) |
||||
|
.finally(()=>{tablePageRef.value.state.loading = false}) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 右侧按钮操作 |
||||
|
function rightOperationHadel(btn,scope){ |
||||
|
// 自动执行-启动 |
||||
|
if(btn.name == 'setisautoOk'){ |
||||
|
changeSetisautoHttp(scope.row,btn.label) |
||||
|
} |
||||
|
// 自动执行-关闭 |
||||
|
if(btn.name == 'setisautoNo'){ |
||||
|
changeSetisautoHttp(scope.row,btn.label) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue