4 changed files with 187 additions and 61 deletions
@ -0,0 +1,121 @@ |
|||||
|
<template> |
||||
|
<a-modal v-model:open="visible" :title="title" @ok="handleOk" @cancel="closeModal" width="50%"> |
||||
|
<div style="margin: 20px"> |
||||
|
<a-form :model="form" layout="vertical" ref="formRef" :rules="rules"> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<a-form-item label="考核名称" name="name"> |
||||
|
<a-input v-model:value="form.name" placeholder="请输入" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<a-form-item label="上级指导处" name="superLeader"> |
||||
|
<a-input v-model:value="form.superLeader" placeholder="请输入" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<a-form-item label="责任单位" name="dutyWorkplace"> |
||||
|
<a-input v-model:value="form.dutyWorkplace" placeholder="请输入" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<a-form-item label="模板" name="file"> |
||||
|
<a-upload v-model:file-list="fileLists" :before-upload="beforeUpload" :multiple="false" :maxCount="1"> |
||||
|
<a-button type="primary"> 上传 </a-button> |
||||
|
</a-upload> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
</a-form> |
||||
|
</div> |
||||
|
</a-modal> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { reactive, ref } from 'vue'; |
||||
|
import { message } from 'ant-design-vue'; |
||||
|
import { addPerformance } from './templateContent.api'; |
||||
|
import { useGlobSetting } from '@/hooks/setting'; |
||||
|
import { getToken } from '@/utils/auth'; |
||||
|
export default { |
||||
|
setup(props, { emit }) { |
||||
|
const title = ref('新增'); |
||||
|
const formRef = ref(); |
||||
|
const visible = ref(false); |
||||
|
const form = reactive({ |
||||
|
file: '', |
||||
|
name: '', |
||||
|
superLeader: '', |
||||
|
dutyWorkplace: '', |
||||
|
}); |
||||
|
const fileLists = ref([]); |
||||
|
const showModal = () => { |
||||
|
visible.value = true; |
||||
|
}; |
||||
|
const rules = { |
||||
|
name: [{ required: true, message: '请输入' }], |
||||
|
superLeader: [{ required: true, message: '请输入' }], |
||||
|
dutyWorkplace: [{ required: true, message: '请输入' }], |
||||
|
}; |
||||
|
const beforeUpload = async (file) => { |
||||
|
console.log(file); |
||||
|
form.file = file; |
||||
|
return false; |
||||
|
}; |
||||
|
const handleOk = () => { |
||||
|
formRef.value.validate().then((valid) => { |
||||
|
if (valid) { |
||||
|
if(fileLists.value.length>0){ |
||||
|
let params = {}; |
||||
|
params.file = form.file; |
||||
|
params.performance = { |
||||
|
name: form.name, |
||||
|
superLeader: form.superLeader, |
||||
|
dutyWorkplace: form.dutyWorkplace, |
||||
|
}; |
||||
|
params.name = params.name |
||||
|
addPerformance(params).then((_) => { |
||||
|
message.success('新增成功'); |
||||
|
emit('success'); |
||||
|
closeModal(); |
||||
|
}); |
||||
|
}else{ |
||||
|
message.warning('请上传模板') |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
const closeModal = () => { |
||||
|
formRef.value.resetFields(); |
||||
|
fileLists.value = []; |
||||
|
visible.value = false; |
||||
|
}; |
||||
|
return { |
||||
|
visible, |
||||
|
title, |
||||
|
form, |
||||
|
showModal, |
||||
|
handleOk, |
||||
|
formRef, |
||||
|
closeModal, |
||||
|
rules, |
||||
|
fileLists, |
||||
|
beforeUpload, |
||||
|
}; |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 可选样式调整 */ |
||||
|
.ant-modal-body { |
||||
|
max-width: 600px; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
</style> |
@ -1,81 +1,86 @@ |
|||||
<template> |
<template> |
||||
|
|
||||
<PageWrapper dense> |
<PageWrapper dense> |
||||
<!--引用表格--> |
<!--引用表格--> |
||||
<BasicTable @register="registerTable"> |
<BasicTable @register="registerTable"> |
||||
|
<template #tableTitle> |
||||
|
<el-button type="primary" @click="handleAdd" v-if="isShowByRoles('projectContact')"> |
||||
|
新增模板</el-button |
||||
|
> |
||||
|
</template> |
||||
<template #action="{ record }"> |
<template #action="{ record }"> |
||||
<TableAction :actions="getTableAction(record)" /> |
<TableAction :actions="getTableAction(record)" /> |
||||
</template> |
</template> |
||||
</BasicTable> |
</BasicTable> |
||||
<detailTemplateContent @register="registerDetail" /> |
<detailTemplateContent @register="registerDetail" /> |
||||
<modify @register="registerModify" @close="closeModel"/> |
<modify @register="registerModify" @close="closeModel" /> |
||||
|
<addTemplate ref="addTemplateRef" @success="reload()" /> |
||||
</PageWrapper> |
</PageWrapper> |
||||
|
|
||||
</template> |
</template> |
||||
|
|
||||
<script lang="ts" name="planSummary" setup> |
<script lang="ts" name="planSummary" setup> |
||||
//ts语法 |
//ts语法 |
||||
import { BasicTable, useTable ,ActionItem,TableAction} from '@/components/Table'; |
import { BasicTable, useTable, ActionItem, TableAction } from '@/components/Table'; |
||||
import { PageWrapper } from '@/components/Page'; |
import { PageWrapper } from '@/components/Page'; |
||||
import { useModal } from '@/components/Modal'; |
import { useModal } from '@/components/Modal'; |
||||
|
import { ref } from 'vue'; |
||||
import { isShowByRoles } from '@/views/projectLib/projectInfo/projectInfo.api'; |
import { isShowByRoles } from '@/views/projectLib/projectInfo/projectInfo.api'; |
||||
import detailTemplateContent from './detailTemplateContent.vue' |
import detailTemplateContent from './detailTemplateContent.vue'; |
||||
import modify from './modify.vue' |
import modify from './modify.vue'; |
||||
import { PerformanColumns } from './templateContent.data'; |
import { PerformanColumns } from './templateContent.data'; |
||||
import { getPerforman } from './templateContent.api' |
import { getPerforman } from './templateContent.api'; |
||||
const [registerDetail, { openModal: openModalDetail }] = useModal(); |
import addTemplate from './addTemplate.vue'; |
||||
const [registerModify, { openModal: openModalModify, closeModal: closeModalModify }] = useModal(); |
const [registerDetail, { openModal: openModalDetail }] = useModal(); |
||||
|
const [registerModify, { openModal: openModalModify, closeModal: closeModalModify }] = useModal(); |
||||
|
|
||||
|
const [registerTable, { reload }] = useTable({ |
||||
const [registerTable,{reload}] = useTable({ |
api: getPerforman, |
||||
api: getPerforman, |
columns: PerformanColumns, |
||||
columns: PerformanColumns, |
useSearchForm: false, |
||||
useSearchForm: false, |
pagination: false, |
||||
pagination:false, |
actionColumn: { |
||||
actionColumn: { |
width: 140, |
||||
width: 140, |
title: '操作', |
||||
title: '操作', |
dataIndex: 'action', |
||||
dataIndex: 'action', |
slots: { customRender: 'action' }, |
||||
slots: { customRender: 'action' }, |
}, |
||||
}, |
afterFetch: (data) => {}, |
||||
afterFetch: (data) => { |
//表单查询项设置 |
||||
}, |
// formConfig: { |
||||
//表单查询项设置 |
// schemas: searchFormSchema, |
||||
// formConfig: { |
// } |
||||
// schemas: searchFormSchema, |
}); |
||||
// } |
function getTableAction(record): ActionItem[] { |
||||
|
return [ |
||||
}); |
|
||||
function getTableAction(record): ActionItem[] { |
|
||||
return [ |
|
||||
{ |
{ |
||||
label: '详情', |
label: '详情', |
||||
onClick: handledetail.bind(null, record), |
onClick: handledetail.bind(null, record), |
||||
}, |
}, |
||||
// { |
// { |
||||
// label: '修改', |
// label: '修改', |
||||
// ifShow: () => { |
// ifShow: () => { |
||||
// return isShowByRoles("manageOrg") |
// return isShowByRoles("manageOrg") |
||||
// }, |
// }, |
||||
// onClick: handleModify.bind(null, record), |
// onClick: handleModify.bind(null, record), |
||||
// }, |
// }, |
||||
]; |
]; |
||||
} |
} |
||||
function handledetail(record) { |
function handledetail(record) { |
||||
openModalDetail(true,{type:record.type}) |
openModalDetail(true, { type: record.type }); |
||||
console.log(record) |
console.log(record); |
||||
} |
} |
||||
// function handleModify(record) { |
// function handleModify(record) { |
||||
// openModalModify(true,{type:record.type}) |
// openModalModify(true,{type:record.type}) |
||||
// console.log(record) |
// console.log(record) |
||||
// } |
// } |
||||
function closeModel() { |
function closeModel() { |
||||
closeModalModify() |
closeModalModify(); |
||||
reload() |
reload(); |
||||
} |
} |
||||
|
//新增模板 |
||||
|
const addTemplateRef = ref(); |
||||
|
function handleAdd() { |
||||
|
addTemplateRef.value.showModal() |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped> |
<style scoped></style> |
||||
|
|
||||
</style> |
|
||||
|
Loading…
Reference in new issue