wbc
4 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