wbc
2 months ago
71 changed files with 4675 additions and 72 deletions
@ -0,0 +1,204 @@ |
|||
<template> |
|||
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%"> |
|||
<a-form :model="form" layout="vertical"> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="合同名称" name="contractName"> |
|||
<a-input v-model:value="form.contractName" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="父级合同" name="contractParent"> |
|||
<a-select |
|||
v-model:value="form.projectName" |
|||
:options="projectNameOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="合同编号" name="contractCode"> |
|||
<a-input v-model:value="form.contractCode" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="合同类别" name="contractType"> |
|||
<a-select |
|||
v-model:value="form.contractType" |
|||
:options="projectNameOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="所属区域" name="district"> |
|||
<a-select |
|||
v-model:value="form.district" |
|||
:options="projectNameOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="合同金额" name="contractPrice"> |
|||
<a-input v-model:value="form.contractPrice" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="签订日期" name="signDate"> |
|||
<a-date-picker v-model:value="form.signDate" placeholder="请选择" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="合同工期" name="contractDuration"> |
|||
<a-range-picker v-model:value="form.contractDuration" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
|
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="甲方单位" name="partyA"> |
|||
<a-select |
|||
v-model:value="form.partyA" |
|||
:options="projectNameOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="甲方代表" name="partyAPerson"> |
|||
<a-input v-model:value="form.partyAPerson" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="乙方单位" name="partyB"> |
|||
<a-select |
|||
v-model:value="form.partyB" |
|||
:options="projectNameOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="乙方代表" name="partyBPerson"> |
|||
<a-input v-model:value="form.partyBPerson" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="合同内容" name="contractContent"> |
|||
<a-textarea v-model:value="form.contractContent" :rows="4" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="备注" name="remark"> |
|||
<a-textarea v-model:value="form.remark" :rows="4" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="附件" name="attachment"> |
|||
<a-upload |
|||
v-model:file-list="form.attachment" |
|||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76" |
|||
> |
|||
<a-button type="primary"> 上传 </a-button> |
|||
</a-upload> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref } from 'vue'; |
|||
|
|||
export default { |
|||
setup() { |
|||
const title = ref('新增'); |
|||
const visible = ref(false); |
|||
const form = reactive({ |
|||
contractName: '', |
|||
contractCode: '', |
|||
contractParent: '', |
|||
contractType: '', |
|||
district: '', |
|||
contractPrice: '', |
|||
signDate: '', |
|||
contractDuration: [], |
|||
partyA: '', |
|||
partyAPerson: '', |
|||
partyB: '', |
|||
partyBPerson: '', |
|||
contractContent: '', |
|||
remark: '', |
|||
attachment: [], |
|||
}); |
|||
//下拉框 |
|||
const projectNameOptions = [ |
|||
{ |
|||
value: '1', |
|||
label: 'a', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: 'b', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: 'c', |
|||
}, |
|||
]; |
|||
const showModal = (type, id) => { |
|||
if (type == 1) { |
|||
title.value = '新增'; |
|||
} else if (type == 2) { |
|||
title.value = '编辑'; |
|||
console.log(id); |
|||
} |
|||
visible.value = true; |
|||
}; |
|||
|
|||
const handleOk = () => { |
|||
console.log('Form Data:', form); |
|||
// 在此处可以添加表单验证逻辑 |
|||
visible.value = false; |
|||
}; |
|||
|
|||
return { |
|||
visible, |
|||
title, |
|||
form, |
|||
showModal, |
|||
handleOk, |
|||
projectNameOptions, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-modal-body { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,32 @@ |
|||
import { ID, IDS, PageQuery, commonExport } from '@/api/base'; |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
|
|||
enum Api { |
|||
root = '/workflow/leave', |
|||
list = '/workflow/leave/list', |
|||
export = '/workflow/leave/export', |
|||
} |
|||
|
|||
export function list(params?: PageQuery) { |
|||
return defHttp.get({ url: Api.list, params }); |
|||
} |
|||
|
|||
export function exportExcel(data: any) { |
|||
return commonExport(Api.export, data); |
|||
} |
|||
|
|||
export function getInfo(id: ID) { |
|||
return defHttp.get({ url: `${Api.root}/${id}` }); |
|||
} |
|||
|
|||
export function add(data: any) { |
|||
return defHttp.post({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function update(data: any) { |
|||
return defHttp.put({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function removeByIds(ids: IDS) { |
|||
return defHttp.deleteWithMsg({ url: `${Api.root}/${ids.join(',')}` }); |
|||
} |
|||
@ -0,0 +1,107 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
|
|||
export const formSchemas: FormSchema[] = [ |
|||
{ |
|||
field: 'calculationCode', |
|||
label: '结算编号', |
|||
component: 'Input', |
|||
componentProps: { |
|||
placeholder: '请输入', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'ioCompany', |
|||
label: '运维单位', |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: [ |
|||
{ |
|||
value: '1', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '2323', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'statusKey', |
|||
label: '状态搜素', |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: [ |
|||
{ |
|||
value: '1', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '2323', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'calculationRange', |
|||
label: '结算范围', |
|||
component: 'RangePicker', |
|||
}, |
|||
]; |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '编号', |
|||
dataIndex: 'code', |
|||
}, |
|||
{ |
|||
title: '结算日期', |
|||
dataIndex: 'calculaitionDate', |
|||
}, |
|||
{ |
|||
title: '开始日期', |
|||
dataIndex: 'startDate', |
|||
}, |
|||
{ |
|||
title: '结束日期', |
|||
dataIndex: 'endDate', |
|||
}, |
|||
{ |
|||
title: '结算总价', |
|||
dataIndex: 'calculationSum', |
|||
}, |
|||
{ |
|||
title: '材料费用', |
|||
dataIndex: 'meterialCost', |
|||
}, |
|||
{ |
|||
title: '超期接单扣款', |
|||
dataIndex: 'outDateOrderCost', |
|||
}, |
|||
{ |
|||
title: '超期处理扣款', |
|||
dataIndex: 'outDateHandleCost', |
|||
}, |
|||
{ |
|||
title: '其他扣款', |
|||
dataIndex: 'otherCost', |
|||
}, |
|||
{ |
|||
title: '所属单位', |
|||
dataIndex: 'unit', |
|||
}, |
|||
{ |
|||
title: '当前状态', |
|||
dataIndex: 'status', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,56 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
<a-button type="primary" @click="handleAdd">审核</a-button> |
|||
</template> |
|||
</BasicTable> |
|||
<addModal ref="addModalRef" /> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable } from '@/components/Table'; |
|||
import { list } from './api'; |
|||
import { formSchemas, columns } from './data'; |
|||
import addModal from './addModal.vue'; |
|||
import { ref } from 'vue'; |
|||
|
|||
defineOptions({ name: 'CalculationAudit' }); |
|||
|
|||
const [registerTable] = useTable({ |
|||
rowSelection: { |
|||
type: 'checkbox', |
|||
}, |
|||
title: '代办审核', |
|||
api: list, |
|||
showIndexColumn: true, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
name: 'calculationAudit', |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 200, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
//新增编辑弹窗 |
|||
const addModalRef = ref(); |
|||
const handleAdd = () => { |
|||
addModalRef.value.showModal(1); |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,204 @@ |
|||
<template> |
|||
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%"> |
|||
<a-form :model="form" layout="vertical"> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="合同名称" name="contractName"> |
|||
<a-input v-model:value="form.contractName" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="父级合同" name="contractParent"> |
|||
<a-select |
|||
v-model:value="form.projectName" |
|||
:options="projectNameOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="合同编号" name="contractCode"> |
|||
<a-input v-model:value="form.contractCode" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="合同类别" name="contractType"> |
|||
<a-select |
|||
v-model:value="form.contractType" |
|||
:options="projectNameOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="所属区域" name="district"> |
|||
<a-select |
|||
v-model:value="form.district" |
|||
:options="projectNameOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="合同金额" name="contractPrice"> |
|||
<a-input v-model:value="form.contractPrice" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="签订日期" name="signDate"> |
|||
<a-date-picker v-model:value="form.signDate" placeholder="请选择" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="合同工期" name="contractDuration"> |
|||
<a-range-picker v-model:value="form.contractDuration" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
|
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="甲方单位" name="partyA"> |
|||
<a-select |
|||
v-model:value="form.partyA" |
|||
:options="projectNameOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="甲方代表" name="partyAPerson"> |
|||
<a-input v-model:value="form.partyAPerson" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="乙方单位" name="partyB"> |
|||
<a-select |
|||
v-model:value="form.partyB" |
|||
:options="projectNameOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="乙方代表" name="partyBPerson"> |
|||
<a-input v-model:value="form.partyBPerson" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="合同内容" name="contractContent"> |
|||
<a-textarea v-model:value="form.contractContent" :rows="4" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="备注" name="remark"> |
|||
<a-textarea v-model:value="form.remark" :rows="4" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="附件" name="attachment"> |
|||
<a-upload |
|||
v-model:file-list="form.attachment" |
|||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76" |
|||
> |
|||
<a-button type="primary"> 上传 </a-button> |
|||
</a-upload> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref } from 'vue'; |
|||
|
|||
export default { |
|||
setup() { |
|||
const title = ref('新增'); |
|||
const visible = ref(false); |
|||
const form = reactive({ |
|||
contractName: '', |
|||
contractCode: '', |
|||
contractParent: '', |
|||
contractType: '', |
|||
district: '', |
|||
contractPrice: '', |
|||
signDate: '', |
|||
contractDuration: [], |
|||
partyA: '', |
|||
partyAPerson: '', |
|||
partyB: '', |
|||
partyBPerson: '', |
|||
contractContent: '', |
|||
remark: '', |
|||
attachment: [], |
|||
}); |
|||
//下拉框 |
|||
const projectNameOptions = [ |
|||
{ |
|||
value: '1', |
|||
label: 'a', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: 'b', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: 'c', |
|||
}, |
|||
]; |
|||
const showModal = (type, id) => { |
|||
if (type == 1) { |
|||
title.value = '新增'; |
|||
} else if (type == 2) { |
|||
title.value = '编辑'; |
|||
console.log(id); |
|||
} |
|||
visible.value = true; |
|||
}; |
|||
|
|||
const handleOk = () => { |
|||
console.log('Form Data:', form); |
|||
// 在此处可以添加表单验证逻辑 |
|||
visible.value = false; |
|||
}; |
|||
|
|||
return { |
|||
visible, |
|||
title, |
|||
form, |
|||
showModal, |
|||
handleOk, |
|||
projectNameOptions, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-modal-body { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,32 @@ |
|||
import { ID, IDS, PageQuery, commonExport } from '@/api/base'; |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
|
|||
enum Api { |
|||
root = '/workflow/leave', |
|||
list = '/workflow/leave/list', |
|||
export = '/workflow/leave/export', |
|||
} |
|||
|
|||
export function list(params?: PageQuery) { |
|||
return defHttp.get({ url: Api.list, params }); |
|||
} |
|||
|
|||
export function exportExcel(data: any) { |
|||
return commonExport(Api.export, data); |
|||
} |
|||
|
|||
export function getInfo(id: ID) { |
|||
return defHttp.get({ url: `${Api.root}/${id}` }); |
|||
} |
|||
|
|||
export function add(data: any) { |
|||
return defHttp.post({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function update(data: any) { |
|||
return defHttp.put({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function removeByIds(ids: IDS) { |
|||
return defHttp.deleteWithMsg({ url: `${Api.root}/${ids.join(',')}` }); |
|||
} |
|||
@ -0,0 +1,107 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
|
|||
export const formSchemas: FormSchema[] = [ |
|||
{ |
|||
field: 'calculationCode', |
|||
label: '结算编号', |
|||
component: 'Input', |
|||
componentProps: { |
|||
placeholder: '请输入', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'ioCompany', |
|||
label: '运维单位', |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: [ |
|||
{ |
|||
value: '1', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '2323', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'statusKey', |
|||
label: '状态搜素', |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: [ |
|||
{ |
|||
value: '1', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '2323', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'calculationRange', |
|||
label: '结算范围', |
|||
component: 'RangePicker', |
|||
}, |
|||
]; |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '编号', |
|||
dataIndex: 'code', |
|||
}, |
|||
{ |
|||
title: '结算日期', |
|||
dataIndex: 'calculaitionDate', |
|||
}, |
|||
{ |
|||
title: '开始日期', |
|||
dataIndex: 'startDate', |
|||
}, |
|||
{ |
|||
title: '结束日期', |
|||
dataIndex: 'endDate', |
|||
}, |
|||
{ |
|||
title: '结算总价', |
|||
dataIndex: 'calculationSum', |
|||
}, |
|||
{ |
|||
title: '材料费用', |
|||
dataIndex: 'meterialCost', |
|||
}, |
|||
{ |
|||
title: '超期接单扣款', |
|||
dataIndex: 'outDateOrderCost', |
|||
}, |
|||
{ |
|||
title: '超期处理扣款', |
|||
dataIndex: 'outDateHandleCost', |
|||
}, |
|||
{ |
|||
title: '其他扣款', |
|||
dataIndex: 'otherCost', |
|||
}, |
|||
{ |
|||
title: '所属单位', |
|||
dataIndex: 'unit', |
|||
}, |
|||
{ |
|||
title: '当前状态', |
|||
dataIndex: 'status', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,56 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
<a-button type="primary" @click="handleAdd">详情</a-button> |
|||
</template> |
|||
</BasicTable> |
|||
<addModal ref="addModalRef" /> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable } from '@/components/Table'; |
|||
import { list } from './api'; |
|||
import { formSchemas, columns } from './data'; |
|||
import addModal from './addModal.vue'; |
|||
import { ref } from 'vue'; |
|||
|
|||
defineOptions({ name: 'CalculationList' }); |
|||
|
|||
const [registerTable] = useTable({ |
|||
rowSelection: { |
|||
type: 'checkbox', |
|||
}, |
|||
title: '全部列表', |
|||
api: list, |
|||
showIndexColumn: true, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
name: 'calculationList', |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 200, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
//新增编辑弹窗 |
|||
const addModalRef = ref(); |
|||
const handleAdd = () => { |
|||
addModalRef.value.showModal(1); |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,108 @@ |
|||
<template> |
|||
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%"> |
|||
<a-form :model="form" layout="vertical"> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="文档名称" name="documentName"> |
|||
<a-input v-model:value="form.documentName" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="类型" name="type"> |
|||
<a-select |
|||
v-model:value="form.type" |
|||
:options="projectNameOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="状态" name="status"> |
|||
<a-radio-group v-model:value="form.status"> |
|||
<a-radio :value="1">启用</a-radio> |
|||
<a-radio :value="0">禁用</a-radio> |
|||
</a-radio-group> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="附件" name="attachment"> |
|||
<a-upload |
|||
v-model:file-list="form.attachment" |
|||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76" |
|||
> |
|||
<a-button type="primary"> 上传 </a-button> |
|||
</a-upload> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref } from 'vue'; |
|||
|
|||
export default { |
|||
setup() { |
|||
const title = ref('新增'); |
|||
const visible = ref(false); |
|||
const form = reactive({ |
|||
documentName: '', |
|||
type: '', |
|||
status: 1, |
|||
attachment: [], |
|||
}); |
|||
//下拉框 |
|||
const projectNameOptions = [ |
|||
{ |
|||
value: '1', |
|||
label: 'a', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: 'b', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: 'c', |
|||
}, |
|||
]; |
|||
const showModal = (type, id) => { |
|||
if (type == 1) { |
|||
title.value = '新增'; |
|||
} else if (type == 2) { |
|||
title.value = '编辑'; |
|||
console.log(id); |
|||
} |
|||
visible.value = true; |
|||
}; |
|||
|
|||
const handleOk = () => { |
|||
console.log('Form Data:', form); |
|||
// 在此处可以添加表单验证逻辑 |
|||
visible.value = false; |
|||
}; |
|||
|
|||
return { |
|||
visible, |
|||
title, |
|||
form, |
|||
showModal, |
|||
handleOk, |
|||
projectNameOptions, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-modal-body { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,32 @@ |
|||
import { ID, IDS, PageQuery, commonExport } from '@/api/base'; |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
|
|||
enum Api { |
|||
root = '/workflow/leave', |
|||
list = '/workflow/leave/list', |
|||
export = '/workflow/leave/export', |
|||
} |
|||
|
|||
export function list(params?: PageQuery) { |
|||
return defHttp.get({ url: Api.list, params }); |
|||
} |
|||
|
|||
export function exportExcel(data: any) { |
|||
return commonExport(Api.export, data); |
|||
} |
|||
|
|||
export function getInfo(id: ID) { |
|||
return defHttp.get({ url: `${Api.root}/${id}` }); |
|||
} |
|||
|
|||
export function add(data: any) { |
|||
return defHttp.post({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function update(data: any) { |
|||
return defHttp.put({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function removeByIds(ids: IDS) { |
|||
return defHttp.deleteWithMsg({ url: `${Api.root}/${ids.join(',')}` }); |
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
|
|||
export const formSchemas: FormSchema[] = [ |
|||
{ |
|||
field: 'ducumentName', |
|||
label: '文档名称', |
|||
component: 'Input', |
|||
componentProps: { |
|||
placeholder: '请输入', |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '文档名称', |
|||
dataIndex: 'ducumentName', |
|||
}, |
|||
{ |
|||
title: '类型', |
|||
dataIndex: 'type', |
|||
}, |
|||
{ |
|||
title: '状态', |
|||
dataIndex: 'status', |
|||
}, |
|||
{ |
|||
title: '创建时间', |
|||
dataIndex: 'createTime', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,110 @@ |
|||
<template> |
|||
<div> |
|||
<!-- 抽屉组件 --> |
|||
<a-drawer |
|||
title="合同详情" |
|||
placement="right" |
|||
:closable="true" |
|||
:open="visible" |
|||
@close="onClose" |
|||
width="600px" |
|||
> |
|||
<a-tabs v-model:activeKey="activeKey"> |
|||
<a-tab-pane key="1" tab="详细信息"> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">名称：</span>{{ detail.ducumentName }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">类型：</span>{{ detail.type }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">状态：</span>{{ detail.status }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">录入时间：</span>{{ detail.createTime }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">附件：</span>{{ detail.attachment }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
</a-tab-pane> |
|||
</a-tabs> |
|||
</a-drawer> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref } from 'vue'; |
|||
// import { getInfo } from './api'; |
|||
export default { |
|||
setup() { |
|||
//抽屉详情 |
|||
let detail = reactive({ |
|||
ducumentName: '', |
|||
type: '', |
|||
status: '', |
|||
createTime: '', |
|||
attachment: [], |
|||
}); |
|||
|
|||
// 打开抽屉的方法 |
|||
const visible = ref(false); |
|||
// const showDrawer = async(id) => { |
|||
// const data = await getInfo(id) |
|||
// for(let i in detail){ |
|||
// detail[i] = data[i] |
|||
// } |
|||
// visible.value = true; |
|||
// console.log(detail) |
|||
// }; |
|||
const showDrawer = () => { |
|||
visible.value = true; |
|||
}; |
|||
// 关闭抽屉的方法 |
|||
const onClose = () => { |
|||
visible.value = false; |
|||
}; |
|||
const activeKey = ref('1'); |
|||
|
|||
return { |
|||
visible, |
|||
showDrawer, |
|||
onClose, |
|||
activeKey, |
|||
detail, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-btn { |
|||
margin: 20px; |
|||
} |
|||
|
|||
/* .singerDetail{ |
|||
margin-bottom: 10px; |
|||
} */ |
|||
div { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.timeText { |
|||
margin: 0 0 40px 20px; |
|||
color: red; |
|||
} |
|||
|
|||
.titleLabel { |
|||
color: gray; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,72 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
<a-button type="primary" @click="handleAdd">新增</a-button> |
|||
<a-button type="link" @click="handleDetail">详情</a-button> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column && record && column.key === 'action'"> |
|||
<!-- <a-button type="link" @click="handleEdit(record.id)">编辑</a-button> |
|||
<a-button type="link" @click="handleDelete(record.id)">删除</a-button> --> |
|||
<a-button type="link" @click="handleDetail">详情</a-button> |
|||
</template> |
|||
</template> |
|||
</BasicTable> |
|||
<detailDrawer ref="detailDrawerRef" /> |
|||
<addModal ref="addModalRef" /> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable } from '@/components/Table'; |
|||
import { list } from './api'; |
|||
import { formSchemas, columns } from './data'; |
|||
import detailDrawer from './detailDrawer.vue'; |
|||
import { ref } from 'vue'; |
|||
import addModal from './addModal.vue'; |
|||
|
|||
defineOptions({ name: 'Document' }); |
|||
|
|||
const [registerTable] = useTable({ |
|||
rowSelection: { |
|||
type: 'checkbox', |
|||
}, |
|||
title: '文档管理', |
|||
api: list, |
|||
showIndexColumn: true, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
name: 'document', |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 200, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
|
|||
//抽屉 |
|||
const detailDrawerRef = ref(); |
|||
const handleDetail = () => { |
|||
detailDrawerRef.value.showDrawer(); |
|||
}; |
|||
//新增编辑弹窗 |
|||
const addModalRef = ref(); |
|||
const handleAdd = () => { |
|||
addModalRef.value.showModal(1); |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,151 @@ |
|||
<template> |
|||
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%"> |
|||
<a-form :model="form" layout="vertical"> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="标题" name="title"> |
|||
<a-input v-model:value="form.title" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="类型" name="type"> |
|||
<a-select |
|||
v-model:value="form.type" |
|||
:options="projectNameOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div style="border: 1px solid #ccc"> |
|||
<Toolbar |
|||
style="border-bottom: 1px solid #ccc" |
|||
:editor="editorRef" |
|||
:defaultConfig="toolbarConfig" |
|||
:mode="mode" |
|||
/> |
|||
<Editor |
|||
style="height: 500px; overflow-y: hidden" |
|||
v-model="form.content" |
|||
:defaultConfig="editorConfig" |
|||
:mode="mode" |
|||
@on-created="handleCreated" |
|||
/> |
|||
</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="附件" name="attachment"> |
|||
<a-upload |
|||
v-model:file-list="form.attachment" |
|||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76" |
|||
> |
|||
<a-button type="primary"> 上传 </a-button> |
|||
</a-upload> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref, shallowRef, onMounted, onBeforeUnmount } from 'vue'; |
|||
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'; |
|||
import '@wangeditor/editor/dist/css/style.css'; |
|||
|
|||
export default { |
|||
components: { Editor, Toolbar }, |
|||
setup() { |
|||
const title = ref('新增'); |
|||
const visible = ref(false); |
|||
const form = reactive({ |
|||
title: '', |
|||
type: '', |
|||
content: '<p>hello</p>', |
|||
attachment: [], |
|||
}); |
|||
//下拉框 |
|||
const projectNameOptions = [ |
|||
{ |
|||
value: '1', |
|||
label: 'a', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: 'b', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: 'c', |
|||
}, |
|||
]; |
|||
const showModal = (type, id) => { |
|||
if (type == 1) { |
|||
title.value = '新增'; |
|||
} else if (type == 2) { |
|||
title.value = '编辑'; |
|||
console.log(id); |
|||
} |
|||
visible.value = true; |
|||
}; |
|||
|
|||
const handleOk = () => { |
|||
console.log('Form Data:', form); |
|||
// 在此处可以添加表单验证逻辑 |
|||
visible.value = false; |
|||
}; |
|||
//富文本 |
|||
// 编辑器实例，必须用 shallowRef |
|||
const editorRef = shallowRef(); |
|||
|
|||
// 内容 HTML |
|||
|
|||
// 模拟 ajax 异步获取内容 |
|||
onMounted(() => { |
|||
setTimeout(() => { |
|||
form.content = '<p>模拟 Ajax 异步设置内容</p>'; |
|||
}, 1500); |
|||
}); |
|||
|
|||
const toolbarConfig = {}; |
|||
const editorConfig = { placeholder: '请输入内容...' }; |
|||
|
|||
// 组件销毁时，也及时销毁编辑器 |
|||
onBeforeUnmount(() => { |
|||
const editor = editorRef.value; |
|||
if (editor == null) return; |
|||
editor.destroy(); |
|||
}); |
|||
|
|||
const handleCreated = (editor) => { |
|||
editorRef.value = editor; // 记录 editor 实例，重要！ |
|||
}; |
|||
|
|||
return { |
|||
visible, |
|||
title, |
|||
form, |
|||
showModal, |
|||
handleOk, |
|||
projectNameOptions, |
|||
editorRef, |
|||
mode: 'default', |
|||
toolbarConfig, |
|||
editorConfig, |
|||
handleCreated, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-modal-body { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,32 @@ |
|||
import { ID, IDS, PageQuery, commonExport } from '@/api/base'; |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
|
|||
enum Api { |
|||
root = '/workflow/leave', |
|||
list = '/workflow/leave/list', |
|||
export = '/workflow/leave/export', |
|||
} |
|||
|
|||
export function list(params?: PageQuery) { |
|||
return defHttp.get({ url: Api.list, params }); |
|||
} |
|||
|
|||
export function exportExcel(data: any) { |
|||
return commonExport(Api.export, data); |
|||
} |
|||
|
|||
export function getInfo(id: ID) { |
|||
return defHttp.get({ url: `${Api.root}/${id}` }); |
|||
} |
|||
|
|||
export function add(data: any) { |
|||
return defHttp.post({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function update(data: any) { |
|||
return defHttp.put({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function removeByIds(ids: IDS) { |
|||
return defHttp.deleteWithMsg({ url: `${Api.root}/${ids.join(',')}` }); |
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
|
|||
export const formSchemas: FormSchema[] = [ |
|||
{ |
|||
field: 'title', |
|||
label: '标题', |
|||
component: 'Input', |
|||
componentProps: { |
|||
placeholder: '请输入', |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '标题', |
|||
dataIndex: 'title', |
|||
}, |
|||
{ |
|||
title: '类型', |
|||
dataIndex: 'type', |
|||
}, |
|||
{ |
|||
title: '发布日期', |
|||
dataIndex: 'createTime', |
|||
}, |
|||
{ |
|||
title: '操作人', |
|||
dataIndex: 'handler', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,117 @@ |
|||
<template> |
|||
<div> |
|||
<!-- 抽屉组件 --> |
|||
<a-drawer |
|||
title="合同详情" |
|||
placement="right" |
|||
:closable="true" |
|||
:open="visible" |
|||
@close="onClose" |
|||
width="600px" |
|||
> |
|||
<a-tabs v-model:activeKey="activeKey"> |
|||
<a-tab-pane key="1" tab="基本信息"> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">标题：</span>{{ detail.title }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<div><span class="titleLabel">类型：</span>{{ detail.type }}</div> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<div><span class="titleLabel">发布人：</span>{{ detail.handler }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<div><span class="titleLabel">发布日期：</span>{{ detail.createTime }}</div> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<div><span class="titleLabel">项目：</span>{{ detail.projectName }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row> |
|||
<a-col :span="24"> |
|||
<div v-html="detail.content"></div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">附件：</span>{{ detail.attachment }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
</a-tab-pane> |
|||
</a-tabs> |
|||
</a-drawer> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref } from 'vue'; |
|||
// import { getInfo } from './api'; |
|||
export default { |
|||
setup() { |
|||
//抽屉详情 |
|||
let detail = reactive({ |
|||
title: '', |
|||
type: '', |
|||
handler: '', |
|||
content: '<p>是假的是假的</p>', |
|||
createTime: '', |
|||
attachment: [], |
|||
}); |
|||
|
|||
// 打开抽屉的方法 |
|||
const visible = ref(false); |
|||
// const showDrawer = async(id) => { |
|||
// const data = await getInfo(id) |
|||
// for(let i in detail){ |
|||
// detail[i] = data[i] |
|||
// } |
|||
// visible.value = true; |
|||
// console.log(detail) |
|||
// }; |
|||
const showDrawer = () => { |
|||
visible.value = true; |
|||
}; |
|||
// 关闭抽屉的方法 |
|||
const onClose = () => { |
|||
visible.value = false; |
|||
}; |
|||
const activeKey = ref('1'); |
|||
|
|||
return { |
|||
visible, |
|||
showDrawer, |
|||
onClose, |
|||
activeKey, |
|||
detail, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-btn { |
|||
margin: 20px; |
|||
} |
|||
|
|||
/* .singerDetail{ |
|||
margin-bottom: 10px; |
|||
} */ |
|||
div { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.timeText { |
|||
margin: 0 0 40px 20px; |
|||
color: red; |
|||
} |
|||
|
|||
.titleLabel { |
|||
color: gray; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,72 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
<a-button type="primary" @click="handleAdd">新增</a-button> |
|||
<a-button type="link" @click="handleDetail">详情</a-button> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column && record && column.key === 'action'"> |
|||
<!-- <a-button type="link" @click="handleEdit(record.id)">编辑</a-button> |
|||
<a-button type="link" @click="handleDelete(record.id)">删除</a-button> --> |
|||
<a-button type="link" @click="handleDetail">详情</a-button> |
|||
</template> |
|||
</template> |
|||
</BasicTable> |
|||
<detailDrawer ref="detailDrawerRef" /> |
|||
<addModal ref="addModalRef" /> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable } from '@/components/Table'; |
|||
import { list } from './api'; |
|||
import { formSchemas, columns } from './data'; |
|||
import detailDrawer from './detailDrawer.vue'; |
|||
import { ref } from 'vue'; |
|||
import addModal from './addModal.vue'; |
|||
|
|||
defineOptions({ name: 'Document' }); |
|||
|
|||
const [registerTable] = useTable({ |
|||
rowSelection: { |
|||
type: 'checkbox', |
|||
}, |
|||
title: '文档管理', |
|||
api: list, |
|||
showIndexColumn: true, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
name: 'document', |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 200, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
|
|||
//抽屉 |
|||
const detailDrawerRef = ref(); |
|||
const handleDetail = () => { |
|||
detailDrawerRef.value.showDrawer(); |
|||
}; |
|||
//新增编辑弹窗 |
|||
const addModalRef = ref(); |
|||
const handleAdd = () => { |
|||
addModalRef.value.showModal(1); |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,116 @@ |
|||
<template> |
|||
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%"> |
|||
<a-form :model="form" layout="vertical"> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="类型" name="type"> |
|||
<a-select v-model:value="form.type" :options="statusOptions" placeholder="请选择" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="考核类型" name="checkType"> |
|||
<a-select |
|||
v-model:value="form.checkType" |
|||
:options="statusOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="评分大类" name="largeRating"> |
|||
<a-select |
|||
v-model:value="form.largeRating" |
|||
:options="statusOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="评分小类" name="smallRating"> |
|||
<a-input v-model:value="form.smallRating" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="分值" name="rating"> |
|||
<a-input v-model:value="form.rating" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="扣分标准" name="subStandards"> |
|||
<a-textarea v-model:value="form.subStandards" :rows="4" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref } from 'vue'; |
|||
|
|||
export default { |
|||
setup() { |
|||
const title = ref('新增'); |
|||
const visible = ref(false); |
|||
const form = reactive({ |
|||
type: '', |
|||
checkType: '', |
|||
largeRating: '', |
|||
smallRating: '', |
|||
rating: '', |
|||
subStandards: '', |
|||
}); |
|||
//下拉框 |
|||
const statusOptions = [ |
|||
{ |
|||
value: 0, |
|||
label: '禁用', |
|||
}, |
|||
{ |
|||
value: 1, |
|||
label: '启用', |
|||
}, |
|||
]; |
|||
const showModal = (type, id) => { |
|||
if (type == 1) { |
|||
title.value = '新增'; |
|||
} else if (type == 2) { |
|||
title.value = '编辑'; |
|||
console.log(id); |
|||
} |
|||
visible.value = true; |
|||
}; |
|||
|
|||
const handleOk = () => { |
|||
console.log('Form Data:', form); |
|||
// 在此处可以添加表单验证逻辑 |
|||
visible.value = false; |
|||
}; |
|||
|
|||
return { |
|||
visible, |
|||
title, |
|||
form, |
|||
showModal, |
|||
handleOk, |
|||
statusOptions, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-modal-body { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,58 @@ |
|||
import { ID, IDS, PageQuery, commonExport } from '@/api/base'; |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
import { Dayjs } from 'dayjs'; |
|||
|
|||
enum Api { |
|||
root = '/workflow/leave', |
|||
list = '/workflow/leave/list', |
|||
export = '/workflow/leave/export', |
|||
} |
|||
|
|||
export interface Leave { |
|||
id: string; |
|||
leaveType: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
leaveDays: number; |
|||
remark: string; |
|||
processInstanceVo?: any; |
|||
dateTime?: [string, string] | [Dayjs, Dayjs]; |
|||
} |
|||
|
|||
export interface Resp { |
|||
createDept: number; |
|||
createBy: number; |
|||
createTime: string; |
|||
updateBy: number; |
|||
updateTime: string; |
|||
id: string; |
|||
leaveType: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
leaveDays: number; |
|||
remark?: any; |
|||
} |
|||
|
|||
export function list(params?: PageQuery) { |
|||
return defHttp.get<Leave[]>({ url: Api.list, params }); |
|||
} |
|||
|
|||
export function exportExcel(data: any) { |
|||
return commonExport(Api.export, data); |
|||
} |
|||
|
|||
export function getInfo(id: ID) { |
|||
return defHttp.get<Leave>({ url: `${Api.root}/${id}` }); |
|||
} |
|||
|
|||
export function add(data: any) { |
|||
return defHttp.post<Resp>({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function update(data: any) { |
|||
return defHttp.put<Resp>({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function removeByIds(ids: IDS) { |
|||
return defHttp.deleteWithMsg<void>({ url: `${Api.root}/${ids.join(',')}` }); |
|||
} |
|||
@ -0,0 +1,53 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
|
|||
export const formSchemas: FormSchema[] = [ |
|||
{ |
|||
field: 'type', |
|||
label: '考核类型', |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: [ |
|||
{ |
|||
value: '1', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '2323', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '类型', |
|||
dataIndex: 'type', |
|||
}, |
|||
{ |
|||
title: '评分大类', |
|||
dataIndex: 'langeRating', |
|||
}, |
|||
{ |
|||
title: '评分小类', |
|||
dataIndex: 'smallRating', |
|||
}, |
|||
{ |
|||
title: '分值', |
|||
dataIndex: 'rating', |
|||
}, |
|||
{ |
|||
title: '扣分标准', |
|||
dataIndex: 'subStandards', |
|||
}, |
|||
{ |
|||
title: '创建日期', |
|||
dataIndex: 'createDate', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,70 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
<a-button type="primary" @click="handleAdd">新增</a-button> |
|||
<a-button type="primary" @click="handleAdd">导入</a-button> |
|||
<a-button type="primary" @click="handleAdd">导出</a-button> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column && record && column.key === 'action'"> |
|||
<a-button type="link" @click="handleEdit(record.id)">编辑</a-button> |
|||
<a-button type="link" @click="handleDelete(record.id)">删除</a-button> |
|||
</template> |
|||
</template> |
|||
</BasicTable> |
|||
<addModal ref="addModalRef" /> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable } from '@/components/Table'; |
|||
import { list } from './api'; |
|||
import { formSchemas, columns } from './data'; |
|||
import addModal from './addModal.vue'; |
|||
import { ref } from 'vue'; |
|||
|
|||
defineOptions({ name: 'CheckManage' }); |
|||
|
|||
const [registerTable] = useTable({ |
|||
rowSelection: { |
|||
type: 'checkbox', |
|||
}, |
|||
title: '考核管理', |
|||
api: list, |
|||
showIndexColumn: true, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
name: 'checkManage', |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 200, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
//新增编辑弹窗 |
|||
const addModalRef = ref(); |
|||
const handleAdd = () => { |
|||
addModalRef.value.showModal(1); |
|||
}; |
|||
const handleEdit = (id: any) => { |
|||
addModalRef.value.showModal(2, id); |
|||
}; |
|||
const handleDelete = (id: any) => { |
|||
addModalRef.value.showModal(2, id); |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,98 @@ |
|||
<template> |
|||
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="30%"> |
|||
<a-form :model="form" layout="vertical"> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="运维单位" name="ioUnit"> |
|||
<a-select v-model:value="form.ioUnit" :options="statusOptions" placeholder="请选择" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="考核项目" name="checkProject"> |
|||
<a-select |
|||
v-model:value="form.checkProject" |
|||
:options="statusOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="考核时间" name="checkTime"> |
|||
<a-date-picker v-model:value="form.checkTime" placeholder="请选择" type="month" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="考核名称" name="checkName"> |
|||
<a-textarea v-model:value="form.checkName" :rows="4" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref } from 'vue'; |
|||
|
|||
export default { |
|||
setup() { |
|||
const title = ref('新增'); |
|||
const visible = ref(false); |
|||
const form = reactive({ |
|||
ioUnit: '', |
|||
checkProject: '', |
|||
checkTime: '', |
|||
checkName: '', |
|||
}); |
|||
//下拉框 |
|||
const statusOptions = [ |
|||
{ |
|||
value: 0, |
|||
label: '禁用', |
|||
}, |
|||
{ |
|||
value: 1, |
|||
label: '启用', |
|||
}, |
|||
]; |
|||
const showModal = (type, id) => { |
|||
if (type == 1) { |
|||
title.value = '新增'; |
|||
} else if (type == 2) { |
|||
title.value = '编辑'; |
|||
console.log(id); |
|||
} |
|||
visible.value = true; |
|||
}; |
|||
|
|||
const handleOk = () => { |
|||
console.log('Form Data:', form); |
|||
// 在此处可以添加表单验证逻辑 |
|||
visible.value = false; |
|||
}; |
|||
|
|||
return { |
|||
visible, |
|||
title, |
|||
form, |
|||
showModal, |
|||
handleOk, |
|||
statusOptions, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-modal-body { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,58 @@ |
|||
import { ID, IDS, PageQuery, commonExport } from '@/api/base'; |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
import { Dayjs } from 'dayjs'; |
|||
|
|||
enum Api { |
|||
root = '/workflow/leave', |
|||
list = '/workflow/leave/list', |
|||
export = '/workflow/leave/export', |
|||
} |
|||
|
|||
export interface Leave { |
|||
id: string; |
|||
leaveType: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
leaveDays: number; |
|||
remark: string; |
|||
processInstanceVo?: any; |
|||
dateTime?: [string, string] | [Dayjs, Dayjs]; |
|||
} |
|||
|
|||
export interface Resp { |
|||
createDept: number; |
|||
createBy: number; |
|||
createTime: string; |
|||
updateBy: number; |
|||
updateTime: string; |
|||
id: string; |
|||
leaveType: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
leaveDays: number; |
|||
remark?: any; |
|||
} |
|||
|
|||
export function list(params?: PageQuery) { |
|||
return defHttp.get<Leave[]>({ url: Api.list, params }); |
|||
} |
|||
|
|||
export function exportExcel(data: any) { |
|||
return commonExport(Api.export, data); |
|||
} |
|||
|
|||
export function getInfo(id: ID) { |
|||
return defHttp.get<Leave>({ url: `${Api.root}/${id}` }); |
|||
} |
|||
|
|||
export function add(data: any) { |
|||
return defHttp.post<Resp>({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function update(data: any) { |
|||
return defHttp.put<Resp>({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function removeByIds(ids: IDS) { |
|||
return defHttp.deleteWithMsg<void>({ url: `${Api.root}/${ids.join(',')}` }); |
|||
} |
|||
@ -0,0 +1,37 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
|
|||
export const formSchemas: FormSchema[] = [ |
|||
{ |
|||
field: 'checkTime', |
|||
label: '考核时间', |
|||
component: 'DatePicker', |
|||
componentProps: { |
|||
format: 'YYYY-MM-DD', |
|||
valueFormat: 'YYYY-MM-DD', |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '运维单位', |
|||
dataIndex: 'ioUnit', |
|||
}, |
|||
{ |
|||
title: '考核项目', |
|||
dataIndex: 'checkProject', |
|||
}, |
|||
{ |
|||
title: '考核名称', |
|||
dataIndex: 'checkName', |
|||
}, |
|||
{ |
|||
title: '考核时间', |
|||
dataIndex: 'checkTime', |
|||
}, |
|||
{ |
|||
title: '考核得分', |
|||
dataIndex: 'checkRating', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,79 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
<a-button type="primary" @click="handleAdd">新增</a-button> |
|||
<a-button type="primary" @click="handleAdd">考核项编辑</a-button> |
|||
<a-button type="primary" @click="handleRating(1, 2)">评分</a-button> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column && record && column.key === 'action'"> |
|||
<a-button type="link" @click="handleEdit(record.id)">编辑</a-button> |
|||
<a-button type="link" @click="handleDelete(record.id)">删除</a-button> |
|||
<a-button type="primary" @click="handleRating(1, record.id)">评分</a-button> |
|||
<a-button type="primary" @click="handleRating(2, record.id)">查看评分</a-button> |
|||
</template> |
|||
</template> |
|||
</BasicTable> |
|||
<addModal ref="addModalRef" /> |
|||
<ratingModal ref="ratingModalRef" /> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable } from '@/components/Table'; |
|||
import { list } from './api'; |
|||
import { formSchemas, columns } from './data'; |
|||
import addModal from './addModal.vue'; |
|||
import { ref } from 'vue'; |
|||
import ratingModal from './ratingModal.vue'; |
|||
|
|||
defineOptions({ name: 'CheckRating' }); |
|||
|
|||
const [registerTable] = useTable({ |
|||
rowSelection: { |
|||
type: 'checkbox', |
|||
}, |
|||
title: '考核评分', |
|||
api: list, |
|||
showIndexColumn: true, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
name: 'checkRating', |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 200, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
//新增编辑弹窗 |
|||
const addModalRef = ref(); |
|||
const handleAdd = () => { |
|||
addModalRef.value.showModal(1); |
|||
}; |
|||
const handleEdit = (id: any) => { |
|||
addModalRef.value.showModal(2, id); |
|||
}; |
|||
const handleDelete = (id: any) => { |
|||
addModalRef.value.showModal(2, id); |
|||
}; |
|||
//评分 |
|||
const ratingModalRef = ref(); |
|||
const handleRating = (type: Number, id: any) => { |
|||
ratingModalRef.value.showModal(type, id); |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,193 @@ |
|||
<template> |
|||
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%"> |
|||
<a-table :dataSource="dataSource" :columns="columns" bordered> |
|||
<template #summary> |
|||
<a-table-summary-row> |
|||
<a-table-summary-cell>评分</a-table-summary-cell> |
|||
<a-table-summary-cell> |
|||
<a-typography-text /> |
|||
</a-table-summary-cell> |
|||
<a-table-summary-cell> |
|||
<a-typography-text /> |
|||
</a-table-summary-cell> |
|||
<a-table-summary-cell> |
|||
<a-typography-text type="danger">{{ totals.sumRating }}</a-typography-text> |
|||
</a-table-summary-cell> |
|||
<a-table-summary-cell> |
|||
<a-typography-text>{{ totals.subRating }}</a-typography-text> |
|||
</a-table-summary-cell> |
|||
<a-table-summary-cell> |
|||
<a-typography-text type="danger">{{ totals.currentRating }}</a-typography-text> |
|||
</a-table-summary-cell> |
|||
</a-table-summary-row> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column && record && column.key === 'subRating'"> |
|||
<a-input v-model:value="record.subRating" /> |
|||
</template> |
|||
</template> |
|||
</a-table> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
import { computed, ref } from 'vue'; |
|||
|
|||
export default { |
|||
setup() { |
|||
const title = ref('详情'); |
|||
const visible = ref(false); |
|||
const rowSpanMap = ref([]); |
|||
|
|||
const columns = [ |
|||
{ |
|||
title: '评分大类', |
|||
dataIndex: 'largeRating', |
|||
key: 'largeRating', |
|||
customCell: (_, index) => { |
|||
return { |
|||
rowSpan: rowSpanMap.value[index], |
|||
}; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '评分小类', |
|||
dataIndex: 'smallRating', |
|||
key: 'smallRating', |
|||
}, |
|||
{ |
|||
title: '扣分标准', |
|||
dataIndex: 'subStandards', |
|||
key: 'subStandards', |
|||
}, |
|||
{ |
|||
title: '总分', |
|||
dataIndex: 'sumRating', |
|||
key: 'sumRating', |
|||
}, |
|||
{ |
|||
title: '扣分', |
|||
dataIndex: 'subRating', |
|||
key: 'subRating', |
|||
}, |
|||
{ |
|||
title: '备注', |
|||
dataIndex: 'remark', |
|||
key: 'remark', |
|||
}, |
|||
]; |
|||
const dataSource = ref([ |
|||
{ |
|||
largeRating: '1', |
|||
smallRating: '2', |
|||
subStandards: 'ss', |
|||
sumRating: 100, |
|||
subRating: 7, |
|||
remark: '双颊及', |
|||
}, |
|||
{ |
|||
largeRating: '1', |
|||
smallRating: '4', |
|||
subStandards: 'ssfdf', |
|||
sumRating: 92, |
|||
subRating: 9, |
|||
remark: '郭德纲', |
|||
}, |
|||
{ |
|||
largeRating: '24', |
|||
smallRating: '4', |
|||
subStandards: 'ssfdf', |
|||
sumRating: 92, |
|||
subRating: 9, |
|||
remark: '郭德纲', |
|||
}, |
|||
{ |
|||
largeRating: '24', |
|||
smallRating: '4', |
|||
subStandards: 'ssfdf', |
|||
sumRating: 92, |
|||
subRating: 7, |
|||
remark: '郭德纲', |
|||
}, |
|||
{ |
|||
largeRating: '24', |
|||
smallRating: '4', |
|||
subStandards: 'ssfdf', |
|||
sumRating: 92, |
|||
subRating: 4, |
|||
remark: '郭德纲', |
|||
}, |
|||
]); |
|||
const getRowSpanMap = () => { |
|||
const spans = []; |
|||
let k = 0; // 当前位置索引 |
|||
|
|||
while (k < dataSource.value.length) { |
|||
const current = dataSource.value[k].largeRating; |
|||
let count = 1; |
|||
|
|||
while ( |
|||
k + count < dataSource.value.length && |
|||
dataSource.value[k + count].largeRating === current |
|||
) { |
|||
count++; |
|||
} |
|||
|
|||
// 设置当前位置的 rowSpan 为计数，后续位置设为 0 |
|||
spans[k] = count; |
|||
for (let i = 1; i < count; i++) { |
|||
spans[k + i] = 0; |
|||
} |
|||
|
|||
k += count; // 移动到下一个不同元素的位置 |
|||
} |
|||
|
|||
rowSpanMap.value = spans; |
|||
console.log(rowSpanMap.value); |
|||
}; |
|||
getRowSpanMap(); |
|||
//总得分，扣分 |
|||
const totals = computed(() => { |
|||
let sumRating = 0; |
|||
let subRating = 0; |
|||
dataSource.value.forEach((i) => { |
|||
i.subRating = Number(i.subRating); |
|||
sumRating += i.sumRating; |
|||
subRating += i.subRating; |
|||
}); |
|||
let currentRating = sumRating - subRating; |
|||
return { |
|||
sumRating, |
|||
subRating, |
|||
currentRating, |
|||
}; |
|||
}); |
|||
const showModal = (type, id) => { |
|||
if (type == 1) { |
|||
console.log(id); |
|||
visible.value = true; |
|||
} |
|||
}; |
|||
const handleOk = () => { |
|||
console.log('222'); |
|||
}; |
|||
return { |
|||
visible, |
|||
title, |
|||
showModal, |
|||
handleOk, |
|||
columns, |
|||
dataSource, |
|||
totals, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-modal-body { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,58 @@ |
|||
import { ID, IDS, PageQuery, commonExport } from '@/api/base'; |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
import { Dayjs } from 'dayjs'; |
|||
|
|||
enum Api { |
|||
root = '/workflow/leave', |
|||
list = '/workflow/leave/list', |
|||
export = '/workflow/leave/export', |
|||
} |
|||
|
|||
export interface Leave { |
|||
id: string; |
|||
leaveType: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
leaveDays: number; |
|||
remark: string; |
|||
processInstanceVo?: any; |
|||
dateTime?: [string, string] | [Dayjs, Dayjs]; |
|||
} |
|||
|
|||
export interface Resp { |
|||
createDept: number; |
|||
createBy: number; |
|||
createTime: string; |
|||
updateBy: number; |
|||
updateTime: string; |
|||
id: string; |
|||
leaveType: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
leaveDays: number; |
|||
remark?: any; |
|||
} |
|||
|
|||
export function list(params?: PageQuery) { |
|||
return defHttp.get<Leave[]>({ url: Api.list, params }); |
|||
} |
|||
|
|||
export function exportExcel(data: any) { |
|||
return commonExport(Api.export, data); |
|||
} |
|||
|
|||
export function getInfo(id: ID) { |
|||
return defHttp.get<Leave>({ url: `${Api.root}/${id}` }); |
|||
} |
|||
|
|||
export function add(data: any) { |
|||
return defHttp.post<Resp>({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function update(data: any) { |
|||
return defHttp.put<Resp>({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function removeByIds(ids: IDS) { |
|||
return defHttp.deleteWithMsg<void>({ url: `${Api.root}/${ids.join(',')}` }); |
|||
} |
|||
@ -0,0 +1,54 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
|
|||
export const formSchemas: FormSchema[] = [ |
|||
{ |
|||
field: 'projectName', |
|||
label: '项目名称', |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: [ |
|||
{ |
|||
value: '1', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '2323', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '2323', |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'checkTime', |
|||
label: '考核时间', |
|||
component: 'DatePicker', |
|||
componentProps: { |
|||
format: 'YYYY-MM-DD', |
|||
valueFormat: 'YYYY-MM-DD', |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '运维单位', |
|||
dataIndex: 'ioUnit', |
|||
}, |
|||
{ |
|||
title: '考核项目', |
|||
dataIndex: 'checkProject', |
|||
}, |
|||
{ |
|||
title: '考核时间', |
|||
dataIndex: 'checkTime', |
|||
}, |
|||
{ |
|||
title: '分值', |
|||
dataIndex: 'rating', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,88 @@ |
|||
<template> |
|||
<div> |
|||
<!-- 抽屉组件 --> |
|||
<a-drawer |
|||
title="详情" |
|||
placement="right" |
|||
:closable="true" |
|||
:open="visible" |
|||
@close="onClose" |
|||
width="600px" |
|||
> |
|||
<div ref="chartRef" style="width: 500px; height: 500px"></div> |
|||
</a-drawer> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { ref } from 'vue'; |
|||
import { useECharts } from '@/hooks/web/useECharts'; |
|||
// import { getInfo } from './api'; |
|||
|
|||
export default { |
|||
setup() { |
|||
//抽屉详情 |
|||
const chartRef = ref(); |
|||
|
|||
const { setOptions } = useECharts(chartRef); |
|||
const visible = ref(false); |
|||
const showDrawer = () => { |
|||
visible.value = true; |
|||
console.log('11'); |
|||
setOptions(options); |
|||
}; |
|||
// 关闭抽屉的方法 |
|||
const onClose = () => { |
|||
visible.value = false; |
|||
}; |
|||
const options = { |
|||
title: { |
|||
text: '成绩查询', |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: [150, 230, 224, 218, 135, 147, 260], |
|||
type: 'line', |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
return { |
|||
visible, |
|||
showDrawer, |
|||
onClose, |
|||
chartRef, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-btn { |
|||
margin: 20px; |
|||
} |
|||
|
|||
/* .singerDetail{ |
|||
margin-bottom: 10px; |
|||
} */ |
|||
div { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.timeText { |
|||
margin: 0 0 40px 20px; |
|||
color: red; |
|||
} |
|||
|
|||
.titleLabel { |
|||
color: gray; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,62 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
<a-button type="primary" @click="handleDetail">导出</a-button> |
|||
<a-button type="link" @click="handleDetail">详情</a-button> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column && record && column.key === 'action'"> |
|||
<a-button type="link" @click="handleDetail">详情</a-button> |
|||
</template> |
|||
</template> |
|||
</BasicTable> |
|||
<detailDrawer ref="detailDrawerRef" /> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable } from '@/components/Table'; |
|||
import { list } from './api'; |
|||
import { formSchemas, columns } from './data'; |
|||
import detailDrawer from './detailDrawer.vue'; |
|||
import { ref } from 'vue'; |
|||
|
|||
defineOptions({ name: 'RatingSearch' }); |
|||
|
|||
const [registerTable] = useTable({ |
|||
rowSelection: { |
|||
type: 'checkbox', |
|||
}, |
|||
title: '成绩查询', |
|||
api: list, |
|||
showIndexColumn: true, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
name: 'ratingSearch', |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 200, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
//抽屉 |
|||
const detailDrawerRef = ref(); |
|||
const handleDetail = () => { |
|||
detailDrawerRef.value.showDrawer(); |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,204 @@ |
|||
<template> |
|||
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%"> |
|||
<a-form :model="form" layout="vertical"> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="合同名称" name="contractName"> |
|||
<a-input v-model:value="form.contractName" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="父级合同" name="contractParent"> |
|||
<a-select |
|||
v-model:value="form.projectName" |
|||
:options="projectNameOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="合同编号" name="contractCode"> |
|||
<a-input v-model:value="form.contractCode" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="合同类别" name="contractType"> |
|||
<a-select |
|||
v-model:value="form.contractType" |
|||
:options="projectNameOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="所属区域" name="district"> |
|||
<a-select |
|||
v-model:value="form.district" |
|||
:options="projectNameOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="合同金额" name="contractPrice"> |
|||
<a-input v-model:value="form.contractPrice" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="签订日期" name="signDate"> |
|||
<a-date-picker v-model:value="form.signDate" placeholder="请选择" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="合同工期" name="contractDuration"> |
|||
<a-range-picker v-model:value="form.contractDuration" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
|
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="甲方单位" name="partyA"> |
|||
<a-select |
|||
v-model:value="form.partyA" |
|||
:options="projectNameOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="甲方代表" name="partyAPerson"> |
|||
<a-input v-model:value="form.partyAPerson" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="乙方单位" name="partyB"> |
|||
<a-select |
|||
v-model:value="form.partyB" |
|||
:options="projectNameOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="乙方代表" name="partyBPerson"> |
|||
<a-input v-model:value="form.partyBPerson" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="合同内容" name="contractContent"> |
|||
<a-textarea v-model:value="form.contractContent" :rows="4" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="备注" name="remark"> |
|||
<a-textarea v-model:value="form.remark" :rows="4" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="附件" name="attachment"> |
|||
<a-upload |
|||
v-model:file-list="form.attachment" |
|||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76" |
|||
> |
|||
<a-button type="primary"> 上传 </a-button> |
|||
</a-upload> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref } from 'vue'; |
|||
|
|||
export default { |
|||
setup() { |
|||
const title = ref('新增'); |
|||
const visible = ref(false); |
|||
const form = reactive({ |
|||
contractName: '', |
|||
contractCode: '', |
|||
contractParent: '', |
|||
contractType: '', |
|||
district: '', |
|||
contractPrice: '', |
|||
signDate: '', |
|||
contractDuration: [], |
|||
partyA: '', |
|||
partyAPerson: '', |
|||
partyB: '', |
|||
partyBPerson: '', |
|||
contractContent: '', |
|||
remark: '', |
|||
attachment: [], |
|||
}); |
|||
//下拉框 |
|||
const projectNameOptions = [ |
|||
{ |
|||
value: '1', |
|||
label: 'a', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: 'b', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: 'c', |
|||
}, |
|||
]; |
|||
const showModal = (type, id) => { |
|||
if (type == 1) { |
|||
title.value = '新增'; |
|||
} else if (type == 2) { |
|||
title.value = '编辑'; |
|||
console.log(id); |
|||
} |
|||
visible.value = true; |
|||
}; |
|||
|
|||
const handleOk = () => { |
|||
console.log('Form Data:', form); |
|||
// 在此处可以添加表单验证逻辑 |
|||
visible.value = false; |
|||
}; |
|||
|
|||
return { |
|||
visible, |
|||
title, |
|||
form, |
|||
showModal, |
|||
handleOk, |
|||
projectNameOptions, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-modal-body { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,58 @@ |
|||
import { ID, IDS, PageQuery, commonExport } from '@/api/base'; |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
import { Dayjs } from 'dayjs'; |
|||
|
|||
enum Api { |
|||
root = '/workflow/leave', |
|||
list = '/workflow/leave/list', |
|||
export = '/workflow/leave/export', |
|||
} |
|||
|
|||
export interface Leave { |
|||
id: string; |
|||
leaveType: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
leaveDays: number; |
|||
remark: string; |
|||
processInstanceVo?: any; |
|||
dateTime?: [string, string] | [Dayjs, Dayjs]; |
|||
} |
|||
|
|||
export interface Resp { |
|||
createDept: number; |
|||
createBy: number; |
|||
createTime: string; |
|||
updateBy: number; |
|||
updateTime: string; |
|||
id: string; |
|||
leaveType: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
leaveDays: number; |
|||
remark?: any; |
|||
} |
|||
|
|||
export function list(params?: PageQuery) { |
|||
return defHttp.get<Leave[]>({ url: Api.list, params }); |
|||
} |
|||
|
|||
export function exportExcel(data: any) { |
|||
return commonExport(Api.export, data); |
|||
} |
|||
|
|||
export function getInfo(id: ID) { |
|||
return defHttp.get<Leave>({ url: `${Api.root}/${id}` }); |
|||
} |
|||
|
|||
export function add(data: any) { |
|||
return defHttp.post<Resp>({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function update(data: any) { |
|||
return defHttp.put<Resp>({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function removeByIds(ids: IDS) { |
|||
return defHttp.deleteWithMsg<void>({ url: `${Api.root}/${ids.join(',')}` }); |
|||
} |
|||
@ -0,0 +1,36 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
|
|||
export const formSchemas: FormSchema[] = [ |
|||
{ |
|||
field: 'contractName', |
|||
label: '合同名称', |
|||
component: 'Input', |
|||
componentProps: { |
|||
placeholder: '请输入', |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '合同编号', |
|||
dataIndex: 'contractCode', |
|||
}, |
|||
{ |
|||
title: '合同名称', |
|||
dataIndex: 'contractName', |
|||
}, |
|||
{ |
|||
title: '合同金额(万元)', |
|||
dataIndex: 'contractPrice', |
|||
}, |
|||
{ |
|||
title: '甲方单位', |
|||
dataIndex: 'partyA', |
|||
}, |
|||
{ |
|||
title: '乙方单位', |
|||
dataIndex: 'partyB', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,164 @@ |
|||
<template> |
|||
<div> |
|||
<!-- 抽屉组件 --> |
|||
<a-drawer |
|||
title="合同详情" |
|||
placement="right" |
|||
:closable="true" |
|||
:open="visible" |
|||
@close="onClose" |
|||
width="600px" |
|||
> |
|||
<a-tabs v-model:activeKey="activeKey"> |
|||
<a-tab-pane key="1" tab="详细信息"> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">合同编号：</span>{{ detail.contractCode }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">合同名称：</span>{{ detail.contractName }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">合同类型：</span>{{ detail.contractType }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<div><span class="titleLabel">甲方单位：</span>{{ detail.partyA }}</div> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<div><span class="titleLabel">甲方代表：</span>{{ detail.partyAPerson }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<div><span class="titleLabel">乙方单位：</span>{{ detail.partyB }}</div> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<div><span class="titleLabel">乙方代表：</span>{{ detail.partyBPerson }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<div><span class="titleLabel">合同金额：</span>{{ detail.contractPrice }}</div> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<div><span class="titleLabel">签订日期：</span>{{ detail.signDate }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<div><span class="titleLabel">开始日期：</span>{{ detail.startDate }}</div> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<div><span class="titleLabel">结束日期：</span>{{ detail.endDate }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div |
|||
><span class="titleLabel">关联合同数量：</span |
|||
>{{ detail.relatedContractAmount }}</div |
|||
> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">合同内容：</span>{{ detail.contractContent }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">合同备注：</span>{{ detail.remark }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">合同附件：</span>{{ detail.attachment }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
</a-tab-pane> |
|||
</a-tabs> |
|||
</a-drawer> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref } from 'vue'; |
|||
// import { getInfo } from './api'; |
|||
export default { |
|||
setup() { |
|||
//抽屉详情 |
|||
let detail = reactive({ |
|||
contractCode: '', |
|||
contractName: '', |
|||
contractType: '', |
|||
partyA: '', |
|||
partyAPerson: '', |
|||
partyB: '', |
|||
contractPrice: '', |
|||
signDate: '', |
|||
startDate: '', |
|||
endDate: '', |
|||
relatedContractAmount: null, |
|||
contractContent: '', |
|||
remark: '', |
|||
attachment: [], |
|||
}); |
|||
|
|||
// 打开抽屉的方法 |
|||
const visible = ref(false); |
|||
// const showDrawer = async(id) => { |
|||
// const data = await getInfo(id) |
|||
// for(let i in detail){ |
|||
// detail[i] = data[i] |
|||
// } |
|||
// visible.value = true; |
|||
// console.log(detail) |
|||
// }; |
|||
const showDrawer = () => { |
|||
visible.value = true; |
|||
}; |
|||
// 关闭抽屉的方法 |
|||
const onClose = () => { |
|||
visible.value = false; |
|||
}; |
|||
const activeKey = ref('1'); |
|||
|
|||
return { |
|||
visible, |
|||
showDrawer, |
|||
onClose, |
|||
activeKey, |
|||
detail, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-btn { |
|||
margin: 20px; |
|||
} |
|||
|
|||
/* .singerDetail{ |
|||
margin-bottom: 10px; |
|||
} */ |
|||
div { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.timeText { |
|||
margin: 0 0 40px 20px; |
|||
color: red; |
|||
} |
|||
|
|||
.titleLabel { |
|||
color: gray; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,72 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
<a-button type="primary" @click="handleAdd">新增</a-button> |
|||
<a-button type="link" @click="handleDetail">详情</a-button> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column && record && column.key === 'action'"> |
|||
<!-- <a-button type="link" @click="handleEdit(record.id)">编辑</a-button> |
|||
<a-button type="link" @click="handleDelete(record.id)">删除</a-button> --> |
|||
<a-button type="link" @click="handleDetail">详情</a-button> |
|||
</template> |
|||
</template> |
|||
</BasicTable> |
|||
<detailDrawer ref="detailDrawerRef" /> |
|||
<addModal ref="addModalRef" /> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable } from '@/components/Table'; |
|||
import { list } from './api'; |
|||
import { formSchemas, columns } from './data'; |
|||
import detailDrawer from './detailDrawer.vue'; |
|||
import { ref } from 'vue'; |
|||
import addModal from './addModal.vue'; |
|||
|
|||
defineOptions({ name: 'ContractManage' }); |
|||
|
|||
const [registerTable] = useTable({ |
|||
rowSelection: { |
|||
type: 'checkbox', |
|||
}, |
|||
title: '合同管理', |
|||
api: list, |
|||
showIndexColumn: true, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
name: 'contractManage', |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 200, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
|
|||
//抽屉 |
|||
const detailDrawerRef = ref(); |
|||
const handleDetail = () => { |
|||
detailDrawerRef.value.showDrawer(); |
|||
}; |
|||
//新增编辑弹窗 |
|||
const addModalRef = ref(); |
|||
const handleAdd = () => { |
|||
addModalRef.value.showModal(1); |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,180 @@ |
|||
<template> |
|||
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%"> |
|||
<a-form :model="form" layout="vertical"> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="所属合同" name="contractName"> |
|||
<a-select |
|||
v-model:value="form.contractName" |
|||
:options="projectNameOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="项目名称" name="projectName"> |
|||
<a-input v-model:value="form.projectName" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="项目编号" name="projectCode"> |
|||
<a-input v-model:value="form.projectCode" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="项目类别" name="projectType"> |
|||
<a-select |
|||
v-model:value="form.projectType" |
|||
:options="projectNameOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="故障大类" name="faultCategory"> |
|||
<a-select |
|||
v-model:value="form.faultCategory" |
|||
:options="projectNameOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="接单超期时间" name="orderTakingOverTime"> |
|||
<a-input v-model:value="form.orderTakingOverTime" placeholder="接单超期时间(小时)" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="接单超期扣款" name="orderTakingCost"> |
|||
<a-input v-model:value="form.orderTakingCost" placeholder="接单超期扣款(元/小时)" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="处理超期时间" name="handleOverTime"> |
|||
<a-input v-model:value="form.handleOverTime" placeholder="处理超期时间(小时)" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="处理超期扣款" name="handleCost"> |
|||
<a-input v-model:value="form.handleCost" placeholder="处理超期扣款(元/小时)" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="项目概要" name="projectContent"> |
|||
<a-textarea v-model:value="form.projectContent" :rows="4" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="项目图标" name="icon"> |
|||
<a-upload |
|||
v-model:file-list="form.icon" |
|||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76" |
|||
> |
|||
<a-button type="primary"> 上传 </a-button> |
|||
</a-upload> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="附件" name="attachment"> |
|||
<a-upload |
|||
v-model:file-list="form.attachment" |
|||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76" |
|||
> |
|||
<a-button type="primary"> 上传 </a-button> |
|||
</a-upload> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref } from 'vue'; |
|||
|
|||
export default { |
|||
setup() { |
|||
const title = ref('新增'); |
|||
const visible = ref(false); |
|||
const form = reactive({ |
|||
contractName: '', |
|||
contractCode: '', |
|||
projectCode: '', |
|||
projectType: '', |
|||
faultCategory: '', |
|||
orderTakingOverTime: '', |
|||
orderTakingCost: '', |
|||
handleOverTime: '', |
|||
handleCost: '', |
|||
projectContent: '', |
|||
icon: [], |
|||
attachment: [], |
|||
}); |
|||
//下拉框 |
|||
const projectNameOptions = [ |
|||
{ |
|||
value: '1', |
|||
label: 'a', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: 'b', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: 'c', |
|||
}, |
|||
]; |
|||
const showModal = (type, id) => { |
|||
if (type == 1) { |
|||
title.value = '新增'; |
|||
} else if (type == 2) { |
|||
title.value = '编辑'; |
|||
console.log(id); |
|||
} |
|||
visible.value = true; |
|||
}; |
|||
|
|||
const handleOk = () => { |
|||
console.log('Form Data:', form); |
|||
// 在此处可以添加表单验证逻辑 |
|||
visible.value = false; |
|||
}; |
|||
|
|||
return { |
|||
visible, |
|||
title, |
|||
form, |
|||
showModal, |
|||
handleOk, |
|||
projectNameOptions, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-modal-body { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,58 @@ |
|||
import { ID, IDS, PageQuery, commonExport } from '@/api/base'; |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
import { Dayjs } from 'dayjs'; |
|||
|
|||
enum Api { |
|||
root = '/workflow/leave', |
|||
list = '/workflow/leave/list', |
|||
export = '/workflow/leave/export', |
|||
} |
|||
|
|||
export interface Leave { |
|||
id: string; |
|||
leaveType: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
leaveDays: number; |
|||
remark: string; |
|||
processInstanceVo?: any; |
|||
dateTime?: [string, string] | [Dayjs, Dayjs]; |
|||
} |
|||
|
|||
export interface Resp { |
|||
createDept: number; |
|||
createBy: number; |
|||
createTime: string; |
|||
updateBy: number; |
|||
updateTime: string; |
|||
id: string; |
|||
leaveType: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
leaveDays: number; |
|||
remark?: any; |
|||
} |
|||
|
|||
export function list(params?: PageQuery) { |
|||
return defHttp.get<Leave[]>({ url: Api.list, params }); |
|||
} |
|||
|
|||
export function exportExcel(data: any) { |
|||
return commonExport(Api.export, data); |
|||
} |
|||
|
|||
export function getInfo(id: ID) { |
|||
return defHttp.get<Leave>({ url: `${Api.root}/${id}` }); |
|||
} |
|||
|
|||
export function add(data: any) { |
|||
return defHttp.post<Resp>({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function update(data: any) { |
|||
return defHttp.put<Resp>({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function removeByIds(ids: IDS) { |
|||
return defHttp.deleteWithMsg<void>({ url: `${Api.root}/${ids.join(',')}` }); |
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
|
|||
export const formSchemas: FormSchema[] = [ |
|||
{ |
|||
field: 'projectName', |
|||
label: '项目名称', |
|||
component: 'Input', |
|||
componentProps: { |
|||
placeholder: '请输入', |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '项目编号', |
|||
dataIndex: 'projectCode', |
|||
}, |
|||
{ |
|||
title: '项目名称', |
|||
dataIndex: 'projectName', |
|||
}, |
|||
{ |
|||
title: '项目类别', |
|||
dataIndex: 'projectType', |
|||
}, |
|||
{ |
|||
title: '项目概要', |
|||
dataIndex: 'projectContent', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,163 @@ |
|||
<template> |
|||
<div> |
|||
<!-- 抽屉组件 --> |
|||
<a-drawer |
|||
title="项目详情" |
|||
placement="right" |
|||
:closable="true" |
|||
:open="visible" |
|||
@close="onClose" |
|||
width="600px" |
|||
> |
|||
<a-tabs v-model:activeKey="activeKey"> |
|||
<a-tab-pane key="1" tab="详细信息"> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">项目名称：</span>{{ detail.projectName }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">所属合同：</span>{{ detail.contractName }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">项目编号：</span>{{ detail.projectCode }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">项目类别：</span>{{ detail.projectType }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">项目故障大类：</span>{{ detail.faultCategory }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div |
|||
><span class="titleLabel">接单超期时间：</span>{{ detail.orderTakingOverTime }}</div |
|||
> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">接单超期扣款：</span>{{ detail.orderTakingCost }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">处理超期时间：</span>{{ detail.handleOverTime }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">处理超期扣款：</span>{{ detail.handleCost }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div |
|||
><span class="titleLabel">关联项目数量：</span |
|||
>{{ detail.relatedProjectAmount }}</div |
|||
> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">项目概要：</span>{{ detail.projectContent }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">项目图标：</span>{{ detail.icon }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<div><span class="titleLabel">项目附件：</span>{{ detail.attachment }}</div> |
|||
</a-col> |
|||
</a-row> |
|||
</a-tab-pane> |
|||
</a-tabs> |
|||
</a-drawer> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref } from 'vue'; |
|||
// import { getInfo } from './api'; |
|||
export default { |
|||
setup() { |
|||
//抽屉详情 |
|||
let detail = reactive({ |
|||
projectName: '', |
|||
contractName: '', |
|||
projectCode: '', |
|||
projectType: '', |
|||
faultCategory: '', |
|||
orderTakingOverTime: '', |
|||
orderTakingCost: '', |
|||
handleOverTime: '', |
|||
handleCost: '', |
|||
relatedProjectAmount: null, |
|||
projectContent: '', |
|||
icon: '', |
|||
attachment: [], |
|||
}); |
|||
|
|||
// 打开抽屉的方法 |
|||
const visible = ref(false); |
|||
// const showDrawer = async(id) => { |
|||
// const data = await getInfo(id) |
|||
// for(let i in detail){ |
|||
// detail[i] = data[i] |
|||
// } |
|||
// visible.value = true; |
|||
// console.log(detail) |
|||
// }; |
|||
const showDrawer = () => { |
|||
visible.value = true; |
|||
}; |
|||
// 关闭抽屉的方法 |
|||
const onClose = () => { |
|||
visible.value = false; |
|||
}; |
|||
const activeKey = ref('1'); |
|||
|
|||
return { |
|||
visible, |
|||
showDrawer, |
|||
onClose, |
|||
activeKey, |
|||
detail, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-btn { |
|||
margin: 20px; |
|||
} |
|||
|
|||
/* .singerDetail{ |
|||
margin-bottom: 10px; |
|||
} */ |
|||
div { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.timeText { |
|||
margin: 0 0 40px 20px; |
|||
color: red; |
|||
} |
|||
|
|||
.titleLabel { |
|||
color: gray; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,74 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
<a-button type="primary" @click="handleAdd">新增</a-button> |
|||
<a-button type="link" @click="handleDetail">详情</a-button> |
|||
<a-button type="primary" @click="handleAdd">配置人员</a-button> |
|||
<a-button type="primary" @click="handleAdd">配置服务目录</a-button> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column && record && column.key === 'action'"> |
|||
<!-- <a-button type="link" @click="handleEdit(record.id)">编辑</a-button> |
|||
<a-button type="link" @click="handleDelete(record.id)">删除</a-button> --> |
|||
<a-button type="link" @click="handleDetail">详情</a-button> |
|||
</template> |
|||
</template> |
|||
</BasicTable> |
|||
<detailDrawer ref="detailDrawerRef" /> |
|||
<addModal ref="addModalRef" /> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable } from '@/components/Table'; |
|||
import { list } from './api'; |
|||
import { formSchemas, columns } from './data'; |
|||
import detailDrawer from './detailDrawer.vue'; |
|||
import { ref } from 'vue'; |
|||
import addModal from './addModal.vue'; |
|||
|
|||
defineOptions({ name: 'ProjectManage' }); |
|||
|
|||
const [registerTable] = useTable({ |
|||
rowSelection: { |
|||
type: 'checkbox', |
|||
}, |
|||
title: '项目管理', |
|||
api: list, |
|||
showIndexColumn: true, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
name: 'projectManage', |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 200, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
|
|||
//抽屉 |
|||
const detailDrawerRef = ref(); |
|||
const handleDetail = () => { |
|||
detailDrawerRef.value.showDrawer(); |
|||
}; |
|||
//新增编辑弹窗 |
|||
const addModalRef = ref(); |
|||
const handleAdd = () => { |
|||
addModalRef.value.showModal(1); |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,220 @@ |
|||
<template> |
|||
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%"> |
|||
<a-form :model="form" layout="vertical"> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="大类名称" name="largeTypeName"> |
|||
<a-select |
|||
v-model:value="form.largeTypeName" |
|||
:options="statusOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="大类编号" name="largeTypeCode"> |
|||
<a-input v-model:value="form.largeTypeCode" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="中类名称" name="middleTypeName"> |
|||
<a-select |
|||
v-model:value="form.middleTypeName" |
|||
:options="statusOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="中类编号" name="middleTypeCode"> |
|||
<a-input v-model:value="form.middleTypeCode" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="小类名称" name="smallTypeName"> |
|||
<a-select |
|||
v-model:value="form.smallTypeName" |
|||
:options="statusOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="小类编号" name="smallTypeCode"> |
|||
<a-input v-model:value="form.smallTypeCode" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="说明" name="description"> |
|||
<a-textarea v-model:value="form.description" :rows="4" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="交付内容" name="deliverContent"> |
|||
<a-input v-model:value="form.deliverContent" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="代码" name="code"> |
|||
<a-input v-model:value="form.code" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="服务项目" name="serviceProject"> |
|||
<a-select |
|||
v-model:value="form.serviceProject" |
|||
:options="statusOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="服务内容" name="serviceContent"> |
|||
<a-textarea v-model:value="form.serviceContent" :rows="4" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="响应级别" name="responseLevel"> |
|||
<a-input v-model:value="form.responseLevel" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="频率" name="frequnency"> |
|||
<a-input |
|||
v-model:value="form.frequnency" |
|||
placeholder="单位数量" |
|||
style="width: 25%; margin-right: 10px" |
|||
/> |
|||
<a-select |
|||
v-model:value="form.frequnency" |
|||
:options="statusOptions" |
|||
placeholder="周期单位" |
|||
style="width: 25%; margin-right: 10px" |
|||
/> |
|||
<a-input |
|||
v-model:value="form.frequnency" |
|||
placeholder="周期次数" |
|||
style="width: 25%; margin-right: 10px" |
|||
/> |
|||
次 |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="备注" name="remark"> |
|||
<a-textarea v-model:value="form.remark" :rows="4" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="请求类型" name="responseType"> |
|||
<a-input v-model:value="form.responseType" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="交付方式" name="deliverType"> |
|||
<a-input v-model:value="form.deliverType" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="交付成果" name="deliverResult"> |
|||
<a-textarea v-model:value="form.deliverResult" :rows="4" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref } from 'vue'; |
|||
|
|||
export default { |
|||
setup() { |
|||
const title = ref('新增'); |
|||
const visible = ref(false); |
|||
const form = reactive({ |
|||
largeTypeName: '', |
|||
largeTypeCode: '', |
|||
middleTypeName: '', |
|||
middleTypeCode: '', |
|||
smallTypeName: '', |
|||
smallTypeCode: '', |
|||
description: '', |
|||
deliverContent: '', |
|||
code: '', |
|||
serviceProject: '', |
|||
serviceContent: '', |
|||
responseLevel: '', |
|||
frequnency: '', |
|||
remark: '', |
|||
responseType: '', |
|||
deliverType: '', |
|||
deliverResult: '', |
|||
}); |
|||
//下拉框 |
|||
const statusOptions = [ |
|||
{ |
|||
value: 0, |
|||
label: '禁用', |
|||
}, |
|||
{ |
|||
value: 1, |
|||
label: '启用', |
|||
}, |
|||
]; |
|||
const showModal = (type, id) => { |
|||
if (type == 1) { |
|||
title.value = '新增'; |
|||
} else if (type == 2) { |
|||
title.value = '编辑'; |
|||
console.log(id); |
|||
} |
|||
visible.value = true; |
|||
}; |
|||
|
|||
const handleOk = () => { |
|||
console.log('Form Data:', form); |
|||
// 在此处可以添加表单验证逻辑 |
|||
visible.value = false; |
|||
}; |
|||
|
|||
return { |
|||
visible, |
|||
title, |
|||
form, |
|||
showModal, |
|||
handleOk, |
|||
statusOptions, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-modal-body { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,132 @@ |
|||
<template> |
|||
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%"> |
|||
<a-form :model="form" layout="vertical"> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="新增类型" name="type"> |
|||
<a-select v-model:value="form.type" :options="statusOptions" placeholder="请选择" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="大类名称" name="largeTypeName"> |
|||
<a-select |
|||
v-model:value="form.largeTypeName" |
|||
:options="statusOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="大类编号" name="largeTypeCode"> |
|||
<a-input v-model:value="form.largeTypeCode" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="中类名称" name="middleTypeName"> |
|||
<a-select |
|||
v-model:value="form.middleTypeName" |
|||
:options="statusOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="中类编号" name="middleTypeCode"> |
|||
<a-input v-model:value="form.middleTypeCode" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="12"> |
|||
<a-form-item label="小类名称" name="smallTypeName"> |
|||
<a-select |
|||
v-model:value="form.smallTypeName" |
|||
:options="statusOptions" |
|||
placeholder="请选择" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="小类编号" name="smallTypeCode"> |
|||
<a-input v-model:value="form.smallTypeCode" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
<a-row :gutter="[16, 16]"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="说明" name="description"> |
|||
<a-textarea v-model:value="form.description" :rows="4" placeholder="请输入" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, ref } from 'vue'; |
|||
|
|||
export default { |
|||
setup() { |
|||
const title = ref('新增'); |
|||
const visible = ref(false); |
|||
const form = reactive({ |
|||
largeTypeName: '', |
|||
largeTypeCode: '', |
|||
middleTypeName: '', |
|||
middleTypeCode: '', |
|||
smallTypeName: '', |
|||
smallTypeCode: '', |
|||
description: '', |
|||
type: '', |
|||
}); |
|||
//下拉框 |
|||
const statusOptions = [ |
|||
{ |
|||
value: 0, |
|||
label: '禁用', |
|||
}, |
|||
{ |
|||
value: 1, |
|||
label: '启用', |
|||
}, |
|||
]; |
|||
const showModal = (type, id) => { |
|||
if (type == 1) { |
|||
title.value = '新增'; |
|||
} else if (type == 2) { |
|||
title.value = '编辑'; |
|||
console.log(id); |
|||
} |
|||
visible.value = true; |
|||
}; |
|||
|
|||
const handleOk = () => { |
|||
console.log('Form Data:', form); |
|||
// 在此处可以添加表单验证逻辑 |
|||
visible.value = false; |
|||
}; |
|||
|
|||
return { |
|||
visible, |
|||
title, |
|||
form, |
|||
showModal, |
|||
handleOk, |
|||
statusOptions, |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可选样式调整 */ |
|||
.ant-modal-body { |
|||
max-width: 600px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,58 @@ |
|||
import { ID, IDS, PageQuery, commonExport } from '@/api/base'; |
|||
import { defHttp } from '@/utils/http/axios'; |
|||
import { Dayjs } from 'dayjs'; |
|||
|
|||
enum Api { |
|||
root = '/workflow/leave', |
|||
list = '/workflow/leave/list', |
|||
export = '/workflow/leave/export', |
|||
} |
|||
|
|||
export interface Leave { |
|||
id: string; |
|||
leaveType: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
leaveDays: number; |
|||
remark: string; |
|||
processInstanceVo?: any; |
|||
dateTime?: [string, string] | [Dayjs, Dayjs]; |
|||
} |
|||
|
|||
export interface Resp { |
|||
createDept: number; |
|||
createBy: number; |
|||
createTime: string; |
|||
updateBy: number; |
|||
updateTime: string; |
|||
id: string; |
|||
leaveType: string; |
|||
startDate: string; |
|||
endDate: string; |
|||
leaveDays: number; |
|||
remark?: any; |
|||
} |
|||
|
|||
export function list(params?: PageQuery) { |
|||
return defHttp.get<Leave[]>({ url: Api.list, params }); |
|||
} |
|||
|
|||
export function exportExcel(data: any) { |
|||
return commonExport(Api.export, data); |
|||
} |
|||
|
|||
export function getInfo(id: ID) { |
|||
return defHttp.get<Leave>({ url: `${Api.root}/${id}` }); |
|||
} |
|||
|
|||
export function add(data: any) { |
|||
return defHttp.post<Resp>({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function update(data: any) { |
|||
return defHttp.put<Resp>({ url: Api.root, data }); |
|||
} |
|||
|
|||
export function removeByIds(ids: IDS) { |
|||
return defHttp.deleteWithMsg<void>({ url: `${Api.root}/${ids.join(',')}` }); |
|||
} |
|||
@ -0,0 +1,52 @@ |
|||
import { BasicColumn } from '@/components/Table'; |
|||
import { FormSchema } from '@/components/Form'; |
|||
|
|||
export const formSchemas: FormSchema[] = [ |
|||
{ |
|||
field: 'serviceContent', |
|||
label: '服务内容', |
|||
component: 'Input', |
|||
componentProps: { |
|||
placeholder: '请输入', |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '交付内容', |
|||
dataIndex: 'deliverContent', |
|||
}, |
|||
{ |
|||
title: '服务项目', |
|||
dataIndex: 'serviceProject', |
|||
}, |
|||
{ |
|||
title: '代码', |
|||
dataIndex: 'code', |
|||
}, |
|||
{ |
|||
title: '服务内容', |
|||
dataIndex: 'serviceContent', |
|||
}, |
|||
{ |
|||
title: '相应级别', |
|||
dataIndex: 'responseLevel', |
|||
}, |
|||
{ |
|||
title: '服务频率', |
|||
dataIndex: 'frequency', |
|||
}, |
|||
{ |
|||
title: '请求类型', |
|||
dataIndex: 'responseType', |
|||
}, |
|||
{ |
|||
title: '交付方式', |
|||
dataIndex: 'deliverType', |
|||
}, |
|||
{ |
|||
title: '交付成果', |
|||
dataIndex: 'deliverResult', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,191 @@ |
|||
<template> |
|||
<PageWrapper dense> |
|||
<a-row> |
|||
<a-col :span="8" style="margin-top: 1%"> |
|||
<div> |
|||
<a-button type="primary" @click="handleAdd" size="small" class="treeButton" |
|||
>新增目录</a-button |
|||
> |
|||
<a-button type="primary" @click="handleAdd" size="small" class="treeButton" |
|||
>编辑目录</a-button |
|||
> |
|||
<a-button type="primary" @click="handleAdd" size="small" class="treeButton" |
|||
>删除目录</a-button |
|||
> |
|||
<a-button type="primary" @click="handleAdd" size="small" class="treeButton" |
|||
>导入</a-button |
|||
> |
|||
</div> |
|||
<a-tree |
|||
:show-line="true" |
|||
:show-icon="true" |
|||
:depoint-expanded-keys="['0-0-0']" |
|||
:tree-data="treeData" |
|||
@select="onSelect" |
|||
> |
|||
<template #title="{ dataRef }"> |
|||
<template v-if="dataRef.key === '0-0-0-1'"> |
|||
<div>multiple line title</div> |
|||
<div>multiple line title</div> |
|||
</template> |
|||
<template v-else>{{ dataRef.title }}</template> |
|||
</template> |
|||
</a-tree> |
|||
</a-col> |
|||
<a-col :span="16"> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
<a-button type="primary" @click="handleAdd">新增协议</a-button> |
|||
<a-button type="primary" @click="handleTypeAdd">新增类型</a-button> |
|||
<a-button type="primary" @click="handleAdd">导入</a-button> |
|||
<a-button type="primary" @click="handleAdd">导出</a-button> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column && record && column.key === 'action'"> |
|||
<a-button type="link" @click="handleEdit(record.id)">编辑</a-button> |
|||
<a-button type="link" @click="handleDelete(record.id)">删除</a-button> |
|||
</template> |
|||
</template> |
|||
</BasicTable> |
|||
<addModal ref="addModalRef" /> |
|||
<AddTypeModal ref="addTypeModalRef" /> |
|||
</a-col> |
|||
</a-row> |
|||
</PageWrapper> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { PageWrapper } from '@/components/Page'; |
|||
import { BasicTable, useTable } from '@/components/Table'; |
|||
import { list } from './api'; |
|||
import { formSchemas, columns } from './data'; |
|||
import addModal from './addModal.vue'; |
|||
import { ref } from 'vue'; |
|||
import AddTypeModal from './addTypeModal.vue'; |
|||
|
|||
defineOptions({ name: 'ServiceManage' }); |
|||
|
|||
const [registerTable, { reload }] = useTable({ |
|||
rowSelection: { |
|||
type: 'checkbox', |
|||
}, |
|||
title: '服务管理', |
|||
api: list, |
|||
showIndexColumn: true, |
|||
rowKey: 'id', |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
schemas: formSchemas, |
|||
name: 'serviceManage', |
|||
baseColProps: { |
|||
xs: 24, |
|||
sm: 24, |
|||
md: 24, |
|||
lg: 6, |
|||
}, |
|||
}, |
|||
columns: columns, |
|||
actionColumn: { |
|||
width: 200, |
|||
title: '操作', |
|||
key: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}); |
|||
//新增编辑弹窗 |
|||
const addModalRef = ref(); |
|||
const handleAdd = () => { |
|||
addModalRef.value.showModal(1); |
|||
}; |
|||
const handleEdit = (id: any) => { |
|||
addModalRef.value.showModal(2, id); |
|||
}; |
|||
const handleDelete = (id: any) => { |
|||
addModalRef.value.showModal(2, id); |
|||
}; |
|||
//新增类型弹窗 |
|||
const addTypeModalRef = ref(); |
|||
const handleTypeAdd = () => { |
|||
addTypeModalRef.value.showModal(1); |
|||
}; |
|||
//tree |
|||
const treeData = ref([ |
|||
{ |
|||
title: 'parent 1', |
|||
key: '0-0', |
|||
children: [ |
|||
{ |
|||
title: 'parent 1-0', |
|||
key: '0-0-0', |
|||
children: [ |
|||
{ |
|||
title: 'leaf', |
|||
key: '0-0-0-0', |
|||
}, |
|||
{ |
|||
key: '0-0-0-1', |
|||
}, |
|||
{ |
|||
title: 'leaf', |
|||
key: '0-0-0-2', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
title: 'parent 1-1', |
|||
key: '0-0-1', |
|||
children: [ |
|||
{ |
|||
title: 'leaf', |
|||
key: '0-0-1-0', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
title: 'parent 1-2', |
|||
key: '0-0-2', |
|||
children: [ |
|||
{ |
|||
title: 'leaf 1', |
|||
key: '0-0-2-0', |
|||
}, |
|||
{ |
|||
title: 'leaf 2', |
|||
key: '0-0-2-1', |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
title: 'parent 2', |
|||
key: '0-1', |
|||
children: [ |
|||
{ |
|||
title: 'parent 2-0', |
|||
key: '0-1-0', |
|||
children: [ |
|||
{ |
|||
title: 'leaf', |
|||
key: '0-1-0-0', |
|||
}, |
|||
{ |
|||
title: 'leaf', |
|||
key: '0-1-0-1', |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
]); |
|||
const onSelect = (selectedKeys: any, info: any) => { |
|||
console.log('selected', selectedKeys, info); |
|||
reload(); |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.treeButton { |
|||
margin: 0 1% 1%; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue