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