15 changed files with 826 additions and 54 deletions
@ -0,0 +1,178 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
v-model="dialogVisible" |
||||
|
title="编辑" |
||||
|
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="props.formRules"> |
||||
|
<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'" |
||||
|
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 } from 'vue' |
||||
|
import { ElDialog,ElMessage } from 'element-plus' |
||||
|
import { getCommonInfoById } from '@/api/common/index' |
||||
|
|
||||
|
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 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() |
||||
|
dialogVisible.value = true |
||||
|
formConfig.value = configs |
||||
|
getFormData(row.uId) |
||||
|
} |
||||
|
|
||||
|
/** 关闭弹窗 */ |
||||
|
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 getFormData = async (uId) => { |
||||
|
formLoading.value = true |
||||
|
getCommonInfoById(props.apiName,uId) |
||||
|
.then(res=>{ |
||||
|
formData.value = res.data |
||||
|
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',formData.value,formConfig.value) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
::v-deep .el-row{ |
||||
|
margin:0 !important |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,55 @@ |
|||||
|
<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:'supplierproplaning', |
||||
|
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', |
||||
|
//右侧操作列方式2,自定义方式，如果需要默认的api，则使用showApiRightOperation传参 |
||||
|
// rightOperation:[], |
||||
|
// showApiRightOperation:['apiUpdate'] |
||||
|
}) |
||||
|
|
||||
|
// 左侧操作事件 |
||||
|
// 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" |
||||
|
</script> |
||||
@ -0,0 +1,26 @@ |
|||||
|
<template> |
||||
|
<tablePage |
||||
|
:columnWidth="150" |
||||
|
:apiName="state.apiName" |
||||
|
:searchOptions="state.searchOptions" |
||||
|
:searchFilter="state.searchFilter" |
||||
|
:rightOperation="state.rightOperation" |
||||
|
></tablePage> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
defineOptions({ name: 'supplierConMmrp' }) |
||||
|
import { reactive, ref, onMounted } from 'vue' |
||||
|
import tablePage from '@/components/tablePage/index.vue' |
||||
|
|
||||
|
const state = reactive({ |
||||
|
apiName:'cherysupplierconmmrp', |
||||
|
searchFilter: { |
||||
|
supplierCode: null |
||||
|
}, |
||||
|
searchOptions:[ |
||||
|
{type:'input',prop:'supplierCode',label:'供应商代码'} |
||||
|
], |
||||
|
rightOperation:'apiUpdate', |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,39 @@ |
|||||
|
<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: 'supplierSinvData' }) |
||||
|
import { reactive, ref, onMounted } from 'vue' |
||||
|
import tablePage from '@/components/tablePage/index.vue' |
||||
|
|
||||
|
const state = reactive({ |
||||
|
apiName:'cherysuppliersinvdata', |
||||
|
searchFilter: { |
||||
|
supplierCode: null |
||||
|
}, |
||||
|
searchOptions:[ |
||||
|
{type:'input',prop:'supplierCode',label:'供应商代码'} |
||||
|
], |
||||
|
rightOperation:'apiUpdate', |
||||
|
apiEditFormRules:{ |
||||
|
supplierCode: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
supplierName: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
materialCode: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
materialDescription: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
quantityCurrent: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
quantityPlan: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
inventoryStatus: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
safetyStock: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
productionCycle: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
supplierBatch: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
} |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,54 @@ |
|||||
|
<template> |
||||
|
<tablePage |
||||
|
:columnWidth="150" |
||||
|
:apiName="state.apiName" |
||||
|
:searchOptions="state.searchOptions" |
||||
|
:searchFilter="state.searchFilter" |
||||
|
:rightOperation="state.rightOperation" |
||||
|
:apiEditFormRules="state.apiEditFormRules" |
||||
|
:searchButtons="['search','import','export']" |
||||
|
></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 |
||||
|
}, |
||||
|
searchOptions:[ |
||||
|
{type:'input',prop:'supplierCode',label:'供应商代码'} |
||||
|
], |
||||
|
rightOperation:'apiUpdate', |
||||
|
apiEditFormRules:{ |
||||
|
supplierCode: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
supplierName: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
supplierSubCode: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
supplierSubName: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
subSupplierCode: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
subSupplierName: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
subSupplierAddress: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
subBatchNo: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
subBatchNum: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
empCode: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
empName: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
deviceCode: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
deviceName: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
featureName: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
featureUnit: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
standardValue: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
featureUpper: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
featureLower: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
featureValue: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
checkNo: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
checkResult: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
checkTime: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
vendorFieldCode: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
deadLine: [{ required: true, message: '必填项', trigger: 'blur' }], |
||||
|
} |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,75 @@ |
|||||
|
<template> |
||||
|
<div class="taskConifgurePage"> |
||||
|
<!-- --> |
||||
|
<tablePage |
||||
|
:apiName="state.apiName" |
||||
|
:searchOptions="state.searchOptions" |
||||
|
:searchFilter="state.searchFilter" |
||||
|
@leftOperationHadel="leftOperationHadel" |
||||
|
:leftOperation="state.leftOperation" |
||||
|
></tablePage> |
||||
|
|
||||
|
<!-- 明细抽屉 --> |
||||
|
<el-drawer |
||||
|
v-model="state.drawerShow" |
||||
|
title="详情" |
||||
|
direction="rtl" |
||||
|
destroy-on-close |
||||
|
:size="'80%'" |
||||
|
> |
||||
|
<div style="height: 100%;display: flex"> |
||||
|
<tablePage |
||||
|
:apiName="state.drawerApiName" |
||||
|
:hideSearch="true" |
||||
|
></tablePage> |
||||
|
</div> |
||||
|
</el-drawer> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
defineOptions({ name: 'taskSub' }) |
||||
|
import { reactive, ref, onMounted,nextTick } from 'vue' |
||||
|
import tablePage from '@/components/tablePage/index.vue' |
||||
|
|
||||
|
const state = reactive({ |
||||
|
apiName:'tasksub', |
||||
|
searchFilter: { |
||||
|
taskName: null |
||||
|
}, |
||||
|
searchOptions:[ |
||||
|
{type:'input',prop:'taskName',label:'任务名称'} |
||||
|
], |
||||
|
leftOperation:[ |
||||
|
{label:'查看详情',name:'showInfo',link:true,type:'primary'} |
||||
|
], |
||||
|
drawerShow:false, |
||||
|
drawerApiName:null, |
||||
|
}) |
||||
|
|
||||
|
function leftOperationHadel(btn,scope) { |
||||
|
// 查看详情 |
||||
|
if(btn.name == 'showInfo'){ |
||||
|
// todo: |
||||
|
if(scope.row.uId == '1'){ |
||||
|
state.drawerApiName = 'cherysuppliersaweek' |
||||
|
}else{ |
||||
|
state.drawerApiName = 'supplierproplaning' |
||||
|
} |
||||
|
nextTick(() => { |
||||
|
state.drawerShow = true |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scope lang="scss"> |
||||
|
.taskConifgurePage{ |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
width:100%; |
||||
|
|
||||
|
.el-drawer__header { |
||||
|
margin-bottom:0 !important |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue