zhouhaibin
5 months ago
14 changed files with 847 additions and 2 deletions
@ -0,0 +1,24 @@ |
|||||
|
import { defHttp } from '@/utils/http/axios'; |
||||
|
|
||||
|
export enum Api { |
||||
|
|
||||
|
changeFieldManagePageList = '/huzhouChangefieldmanage/changeFieldManagePageList', |
||||
|
getchangeFieldManageById = '/huzhouChangefieldmanage/getchangeFieldManageById', |
||||
|
modifychangeFieldManageById='/huzhouChangefieldmanage/modifychangeFieldManageById' |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 职务list |
||||
|
*/ |
||||
|
export const changeFieldManagePageList = (params?) =>defHttp.get({ url: Api.changeFieldManagePageList, params }); |
||||
|
|
||||
|
export const getchangeFieldManageById = (params?) =>defHttp.get({ url: Api.getchangeFieldManageById, params }); |
||||
|
export const modifychangeFieldManageById = (params?) =>defHttp.post({ url: Api.modifychangeFieldManageById, params }); |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
@ -0,0 +1,71 @@ |
|||||
|
import { FormSchema } from '@/components/Form'; |
||||
|
import { BasicColumn } from '@/components/Table'; |
||||
|
import { useDictStore } from '@/store/modules/dict'; |
||||
|
|
||||
|
export const countStatisticsColumns: BasicColumn[] = [ |
||||
|
|
||||
|
{ |
||||
|
title: '责任单位', |
||||
|
width: 150, |
||||
|
dataIndex: 'fieldName', |
||||
|
}, |
||||
|
{ |
||||
|
title: '行政区划', |
||||
|
dataIndex: 'ischange', |
||||
|
width: 150, |
||||
|
|
||||
|
}, |
||||
|
{ |
||||
|
title: '已提交稿件数量', |
||||
|
dataIndex: 'isuploadfile', |
||||
|
width: 150, |
||||
|
sorter: true, |
||||
|
|
||||
|
} |
||||
|
|
||||
|
]; |
||||
|
|
||||
|
|
||||
|
export const searchFormSchema: FormSchema[] = [ |
||||
|
{ |
||||
|
label: '责任单位', |
||||
|
field: 'fieldName', |
||||
|
component: 'Input', |
||||
|
colProps: { span: 6 }, |
||||
|
}, |
||||
|
{ |
||||
|
label: '行政区划', |
||||
|
field: 'fieldName', |
||||
|
component: 'Input', |
||||
|
colProps: { span: 6 }, |
||||
|
}, |
||||
|
] |
||||
|
export const countStatisticsFormSchema: FormSchema[] = [ |
||||
|
{ |
||||
|
label: '责任单位', |
||||
|
field: 'fieldName', |
||||
|
component: 'Input', |
||||
|
dynamicDisabled: true, |
||||
|
colProps: { span:12}, |
||||
|
}, |
||||
|
{ |
||||
|
label: '行政区划', |
||||
|
field: 'ischange', |
||||
|
component: 'DictSelect', |
||||
|
componentProps: { |
||||
|
dictType: 'whether', |
||||
|
}, |
||||
|
dynamicDisabled: true, |
||||
|
colProps: { span:12 }, |
||||
|
}, |
||||
|
{ |
||||
|
label: '已提交稿件数量', |
||||
|
field: 'isuploadfile', |
||||
|
component: 'DictSelect', |
||||
|
componentProps: { |
||||
|
dictType: 'whether', |
||||
|
}, |
||||
|
required: true, |
||||
|
colProps: { span: 12 }, |
||||
|
} |
||||
|
]; |
||||
@ -0,0 +1,73 @@ |
|||||
|
<template> |
||||
|
<PageWrapper dense> |
||||
|
|
||||
|
<!--引用表格--> |
||||
|
<BasicTable @register="registerTable"> |
||||
|
<!--插槽:table标题--> |
||||
|
<!--操作栏--> |
||||
|
<template #action="{ record }"> |
||||
|
<!-- <TableAction :actions="getTableAction(record)" /> --> |
||||
|
<TableAction :actions="getTableAction(record)" /> |
||||
|
</template> |
||||
|
</BasicTable> |
||||
|
<BasicModal @register="registechangeFieldManageModal" title="变更字段详情" width="1200px" :showOkBtn="false"> |
||||
|
<modifycountStatistics :id="id" @exit="close" /> |
||||
|
</BasicModal> |
||||
|
</PageWrapper> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" name="system-user" setup> |
||||
|
//ts语法 |
||||
|
import { ref } from 'vue'; |
||||
|
import { ActionItem, BasicTable, TableAction, useTable } from '@/components/Table'; |
||||
|
import { PageWrapper } from '@/components/Page'; |
||||
|
import modifycountStatistics from "./modifycountStatistics.vue" |
||||
|
import { BasicModal, useModal } from '@/components/Modal'; |
||||
|
import { countStatisticsColumns, searchFormSchema } from './countStatistics.data' |
||||
|
import { changeFieldManagePageList } from './countStatistics.api'; |
||||
|
|
||||
|
|
||||
|
let id = ref(); |
||||
|
const [registechangeFieldManageModal, { openModal: openchangeFieldManage,closeModal}] = useModal();//项目详情 |
||||
|
|
||||
|
|
||||
|
const [registerTable,{reload}] = useTable({ |
||||
|
title: '信息稿件详情', |
||||
|
api: changeFieldManagePageList, |
||||
|
columns: countStatisticsColumns, |
||||
|
useSearchForm: true, |
||||
|
actionColumn: { |
||||
|
width: 140, |
||||
|
title: '操作', |
||||
|
dataIndex: 'action', |
||||
|
slots: { customRender: 'action' }, |
||||
|
}, |
||||
|
//表单查询项设置 |
||||
|
formConfig: { |
||||
|
schemas: searchFormSchema, |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
function getTableAction(record): ActionItem[] { |
||||
|
return [ |
||||
|
{ |
||||
|
label: '修改', |
||||
|
onClick: handlemodifympage.bind(null, record), |
||||
|
}, |
||||
|
|
||||
|
]; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
function handlemodifympage(record) { |
||||
|
id.value = record.id |
||||
|
openchangeFieldManage() |
||||
|
} |
||||
|
function close(){ |
||||
|
closeModal() |
||||
|
reload() |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped></style> |
||||
@ -0,0 +1,58 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<BasicForm @register="registerchangeFieldForm" @submit="handleSubmit" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" name="changeFieldManageDetail" setup> |
||||
|
//ts语法 |
||||
|
import { defineProps, onMounted } from 'vue'; |
||||
|
import { useForm, BasicForm } from '@/components/Form'; |
||||
|
import { countStatisticsFormSchema } from './countStatistics.data' |
||||
|
import { modifychangeFieldManageById, getchangeFieldManageById } from './countStatistics.api'; |
||||
|
|
||||
|
let emit = defineEmits(["exit"]) |
||||
|
let dataTo = defineProps(["id"]) |
||||
|
|
||||
|
onMounted(async () => { |
||||
|
let res = await getchangeFieldManageById({id: dataTo.id}) |
||||
|
console.log("结果是", res) |
||||
|
setFieldsValue(res) |
||||
|
}) |
||||
|
const [registerchangeFieldForm,{ getFieldsValue, validate, setFieldsValue }] = useForm({ |
||||
|
//注册表单列 |
||||
|
schemas: countStatisticsFormSchema, |
||||
|
//自定义查询按钮的文本和图标 |
||||
|
// submitButtonOptions: { text: '提交', preIcon: '' }, |
||||
|
//自定义重置按钮的文本和图标 |
||||
|
resetButtonOptions: { text: '取消' }, |
||||
|
// showActionButtonGroup: false, |
||||
|
//回车提交 |
||||
|
// autoSubmitOnEnter: true, |
||||
|
// //不显示重置按钮 |
||||
|
// showResetButton: false, |
||||
|
//自定义提交按钮文本和图标 |
||||
|
submitButtonOptions: { text: '提交' }, |
||||
|
//查询列占比 24代表一行 取值范围 0-24 |
||||
|
actionColOptions: { span: 14 }, |
||||
|
//提交按钮的自定义事件 |
||||
|
// submitFunc: customSubmitFunc, |
||||
|
//重置按钮的自定义时间 |
||||
|
resetFunc: customResetFunc, |
||||
|
labelCol: { style: { width: '120px' } }, |
||||
|
wrapperCol: { style: { width: 'auto' } }, |
||||
|
// disabled:true |
||||
|
}) |
||||
|
async function handleSubmit() { |
||||
|
if (await validate()) { |
||||
|
let datas = await getFieldsValue() |
||||
|
await modifychangeFieldManageById(datas) |
||||
|
emit("exit") |
||||
|
} |
||||
|
} |
||||
|
async function customResetFunc() { |
||||
|
emit("exit") |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
<style scoped></style> |
||||
@ -0,0 +1,138 @@ |
|||||
|
<template> |
||||
|
<!-- 自定义表单 --> |
||||
|
<BasicModal v-bind="$attrs" @register="registerModal" title="月度期刊详情" width="1200px" :showOkBtn="false" :showCancelBtn="false"> |
||||
|
|
||||
|
<el-divider content-position="left">资料信息</el-divider> |
||||
|
<BasicForm @register="registerProjectForm" /> |
||||
|
<el-divider content-position="left">上传期刊资料</el-divider> |
||||
|
<el-form ref="importFormRef" > |
||||
|
|
||||
|
<el-form-item label="上传文件:"> |
||||
|
<el-upload class="upload-demo" ref="upload" action :http-request="httpRequest" :before-upload="beforeUpload" |
||||
|
:on-exceed="handleExceed" :limit="1" :on-remove="removeFile"> |
||||
|
<el-button slot="trigger" size="small" type="primary">选取文件</el-button> |
||||
|
<div slot="tip" class="el-upload__tip">文件大小且不超过500M</div> |
||||
|
</el-upload> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="submitImportForm">上传</el-button> |
||||
|
<el-button type="info" @click="dialogVisible">关闭窗口</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</BasicModal> |
||||
|
</template> |
||||
|
<script lang="ts" name="addAndModify" setup> |
||||
|
import { ref, reactive, defineProps, watchEffect } from 'vue' |
||||
|
import { useForm, BasicForm } from '@/components/Form'; |
||||
|
import { monthlyJournalformSchemas } from './monthlyJournal.data'; |
||||
|
import { modifyPeriodicallab, addPeriodicallab, getperiodicallabById } from './monthlyJournal.api'; |
||||
|
import { ElMessage } from 'element-plus' |
||||
|
import { useModalInner, BasicModal } from '@/components/Modal'; |
||||
|
const [registerModal, { closeModal }] = useModalInner(init); |
||||
|
|
||||
|
|
||||
|
let fileList = reactive<Array<any>>([]); |
||||
|
let id = ref() |
||||
|
const emit = defineEmits(['close']); |
||||
|
|
||||
|
async function init(data) { |
||||
|
fileList.pop() |
||||
|
if (data.id != null) { |
||||
|
id.value = data.id |
||||
|
let param: any = { |
||||
|
id: data.id |
||||
|
} |
||||
|
let res = await getperiodicallabById(param) |
||||
|
console.log("结果是", res) |
||||
|
setFieldsValue(res) |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
//项目入库详情 |
||||
|
const [registerProjectForm, { setFieldsValue: setFieldsValue, getFieldsValue, validate }] = useForm({ |
||||
|
//注册表单列 |
||||
|
schemas: monthlyJournalformSchemas, |
||||
|
showActionButtonGroup: false, |
||||
|
//回车提交 |
||||
|
// autoSubmitOnEnter: true, |
||||
|
// //不显示重置按钮 |
||||
|
// showResetButton: false, |
||||
|
//自定义提交按钮文本和图标 |
||||
|
// submitButtonOptions: { text: '提交', preIcon: '' }, |
||||
|
//查询列占比 24代表一行 取值范围 0-24 |
||||
|
// actionColOptions: { span: 17 }, |
||||
|
labelCol: { style: { width: '120px' } }, |
||||
|
wrapperCol: { style: { width: 'auto' } }, |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
// 覆盖默认的上传行为，可以自定义上传的实现，将上传的文件依次添加到fileList数组中,支持多个文件 |
||||
|
function httpRequest(option) { |
||||
|
fileList.push(option) |
||||
|
} |
||||
|
function removeFile(option) { |
||||
|
for (let i = 0; i < fileList.length; i++) { |
||||
|
if (fileList[i].file.name == option.name) { |
||||
|
fileList.splice(i, 1) |
||||
|
} |
||||
|
} |
||||
|
console.log(fileList, option) |
||||
|
|
||||
|
} |
||||
|
// 上传前处理 |
||||
|
function beforeUpload(file) { |
||||
|
let fileSize = file.size |
||||
|
const FIVE_M = 500 * 1024 * 1024; |
||||
|
//大于5M，不允许上传 |
||||
|
if (fileSize > FIVE_M) { |
||||
|
ElMessage.error("最大上传500M") |
||||
|
return false |
||||
|
} |
||||
|
|
||||
|
return true |
||||
|
} |
||||
|
// 文件数量过多时提醒 |
||||
|
function handleExceed() { |
||||
|
ElMessage.warning("最多只能上传一个文件") |
||||
|
} |
||||
|
//导入Excel病种信息数据 |
||||
|
async function submitImportForm() { |
||||
|
if (await validate()) { |
||||
|
|
||||
|
let data = await getFieldsValue() |
||||
|
console.log("data", data) |
||||
|
// 使用form表单的数据格式 |
||||
|
const params = new FormData() |
||||
|
if (id.value != null) { |
||||
|
//说明是修改 |
||||
|
if(fileList.length>0){ |
||||
|
params.append('file', fileList[0].file) |
||||
|
} |
||||
|
params.append("id", id.value) |
||||
|
params.append("name", data.name) |
||||
|
params.append("periods", data.periods) |
||||
|
params.append("publishTime", data.publishTime) |
||||
|
await modifyPeriodicallab(params) |
||||
|
} else { |
||||
|
if (fileList.length == 0) { |
||||
|
ElMessage.warning("请上传文件") |
||||
|
return; |
||||
|
} |
||||
|
params.append('file', fileList[0].file) |
||||
|
params.append("name", data.name) |
||||
|
params.append("periods", data.periods) |
||||
|
params.append("publishTime", data.publishTime) |
||||
|
await addPeriodicallab(params) |
||||
|
} |
||||
|
dialogVisible() |
||||
|
} |
||||
|
} |
||||
|
function dialogVisible() { |
||||
|
closeModal() |
||||
|
emit("close") |
||||
|
} |
||||
|
</script> |
||||
|
<style></style> |
||||
|
|
||||
@ -0,0 +1,113 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<!--引用表格--> |
||||
|
<BasicTable @register="registerTable"> |
||||
|
<template #action="{ record }"> |
||||
|
<!-- <TableAction :actions="getTableAction(record)" /> --> |
||||
|
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" /> |
||||
|
</template> |
||||
|
<template #tableTitle> |
||||
|
<el-button type="primary" round @click="handleAdd" v-if="isShowByRoles('manageOrg')">新增月度期刊</el-button> |
||||
|
<el-button type="primary" round @click="handleBatchdownload"> 批量导出</el-button> |
||||
|
</template> |
||||
|
</BasicTable> |
||||
|
<addAndModify @register="registerSubmitProjectArchive" @close="closeModel" /> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" name="system-user" setup> |
||||
|
//ts语法 |
||||
|
import { ref } from 'vue'; |
||||
|
import { ActionItem, BasicTable, TableAction, useTable } from '@/components/Table'; |
||||
|
import { useModal } from '@/components/Modal'; |
||||
|
import { downloadFile } from "../../../api/common/api" |
||||
|
import { isShowByRoles } from '@/views/projectLib/projectInfo/projectInfo.api'; |
||||
|
|
||||
|
import { monthlyJournalcolumns, searchFormSchema } from './monthlyJournal.data'; |
||||
|
import addAndModify from "./addAndModify.vue" |
||||
|
import { periodicallabPageList, batchdownloadPeriodicallabFiles, deletePeriodicallab } from './monthlyJournal.api'; |
||||
|
const [registerSubmitProjectArchive, { openModal }] = useModal(); |
||||
|
const [registerTable, { reload, getForm }] = useTable({ |
||||
|
title: '月度期刊信息', |
||||
|
api: periodicallabPageList, |
||||
|
columns: monthlyJournalcolumns, |
||||
|
useSearchForm: true, |
||||
|
actionColumn: { |
||||
|
width: 140, |
||||
|
title: '操作', |
||||
|
dataIndex: 'action', |
||||
|
slots: { customRender: 'action' }, |
||||
|
}, |
||||
|
//表单查询项设置 |
||||
|
formConfig: { |
||||
|
schemas: searchFormSchema, |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
function getTableAction(record): ActionItem[] { |
||||
|
return [ |
||||
|
{ |
||||
|
label: '下载', |
||||
|
onClick: handledown.bind(null, record), |
||||
|
} |
||||
|
|
||||
|
]; |
||||
|
} |
||||
|
function getDropDownAction(record): ActionItem[] { |
||||
|
return [ |
||||
|
{ |
||||
|
label: '修改', |
||||
|
ifShow: () => { |
||||
|
return isShowByRoles('manageOrg') |
||||
|
}, |
||||
|
onClick: handleModify.bind(null, record) |
||||
|
}, |
||||
|
{ |
||||
|
label: '删除', |
||||
|
ifShow: () => { |
||||
|
return isShowByRoles('manageOrg') |
||||
|
}, |
||||
|
popConfirm: { |
||||
|
title: '确定删除吗?', |
||||
|
confirm: handleDelete.bind(null, record), |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
]; |
||||
|
} |
||||
|
function handleAdd() { |
||||
|
openModal(true, { id: null }) |
||||
|
} |
||||
|
function handleModify(record) { |
||||
|
openModal(true, { id: record.id }) |
||||
|
|
||||
|
} |
||||
|
function handleSubmit(record) { |
||||
|
|
||||
|
|
||||
|
} |
||||
|
function handledown(record) { |
||||
|
let param = { |
||||
|
path: record.documentPath, |
||||
|
} |
||||
|
downloadFile("/huzhouUploadfileinfo/downloadfile", record.documentName, param) |
||||
|
|
||||
|
} |
||||
|
async function handleDelete(record) { |
||||
|
await deletePeriodicallab({ id: record.id }) |
||||
|
reload() |
||||
|
} |
||||
|
function handleBatchdownload() { |
||||
|
let { getFieldsValue } = getForm() |
||||
|
let fromData = getFieldsValue() |
||||
|
batchdownloadPeriodicallabFiles(fromData) |
||||
|
} |
||||
|
function closeModel() { |
||||
|
reload() |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style scoped></style> |
||||
@ -0,0 +1,23 @@ |
|||||
|
import { defHttp } from '@/utils/http/axios'; |
||||
|
import { downloadFile } from "../../../api/common/api" |
||||
|
|
||||
|
export enum Api { |
||||
|
periodicallabPageList = '/huzhouPeriodicallab/periodicallabPageList', |
||||
|
addPeriodicallab="/huzhouPeriodicallab/addPeriodicallab", |
||||
|
modifyPeriodicallab = '/huzhouPeriodicallab/modifyPeriodicallab', |
||||
|
getperiodicallabById="/huzhouPeriodicallab/getperiodicallabById", |
||||
|
deletePeriodicallab = '/huzhouPeriodicallab/deletePeriodicallab', |
||||
|
batchdownloadPeriodicallabFiles="/huzhouPeriodicallab/batchdownloadPeriodicallabFiles" |
||||
|
} |
||||
|
|
||||
|
export const periodicallabPageList = (params) => defHttp.get({ url: Api.periodicallabPageList, params }) |
||||
|
export const getperiodicallabById = (params) => defHttp.get({ url: Api.getperiodicallabById, params }) |
||||
|
export const batchdownloadPeriodicallabFiles = (params) => downloadFile(Api.batchdownloadPeriodicallabFiles,"批量导出.zip",params) |
||||
|
export const addPeriodicallab = (params?) =>defHttp.post({ url: Api.addPeriodicallab,headers:{ "Content-Type": "multipart/form-data" }, params }) |
||||
|
|
||||
|
export const modifyPeriodicallab = (params?) =>defHttp.post({ url: Api.modifyPeriodicallab,headers:{ "Content-Type": "multipart/form-data" }, params }) |
||||
|
|
||||
|
export const deletePeriodicallab = (params?) =>defHttp.post({ url: Api.deletePeriodicallab, params }) |
||||
|
|
||||
|
|
||||
|
|
||||
@ -0,0 +1,90 @@ |
|||||
|
import { FormSchema } from '@/components/Form'; |
||||
|
import { BasicColumn } from '@/components/Table'; |
||||
|
|
||||
|
|
||||
|
export const monthlyJournalcolumns: BasicColumn[] = [ |
||||
|
{ |
||||
|
title: '期刊名称', |
||||
|
width: 150, |
||||
|
dataIndex: 'name', |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
title: '期刊期数', |
||||
|
width: 150, |
||||
|
dataIndex: 'periods', |
||||
|
}, |
||||
|
{ |
||||
|
title: '发布日期', |
||||
|
width: 200, |
||||
|
dataIndex: 'publishTime', |
||||
|
}, |
||||
|
// {
|
||||
|
// title: '文件名称',
|
||||
|
// dataIndex: 'documentName',
|
||||
|
// width: 150,
|
||||
|
// },
|
||||
|
// {
|
||||
|
// title: '文件大小',
|
||||
|
// dataIndex: 'size',
|
||||
|
// width: 150,
|
||||
|
// customRender: ({ record }) => {
|
||||
|
// let kbNum: number = record.size / 1024
|
||||
|
// if (kbNum < 1024) {
|
||||
|
// return kbNum.toFixed(2).toString() + "KB"
|
||||
|
// } else {
|
||||
|
// let mbNum: number = kbNum / 1024
|
||||
|
// return mbNum.toFixed(2).toString() + "MB"
|
||||
|
// }
|
||||
|
|
||||
|
// },
|
||||
|
|
||||
|
// },
|
||||
|
|
||||
|
]; |
||||
|
export const searchFormSchema: FormSchema[] = [ |
||||
|
{ |
||||
|
label: '期刊期数', |
||||
|
field: 'periods', |
||||
|
component: 'Input', |
||||
|
colProps: { span: 5 }, |
||||
|
}, |
||||
|
{ |
||||
|
label: '发布日期', |
||||
|
field: 'publishTime', |
||||
|
component: 'Input', |
||||
|
colProps: { span: 5 }, |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
]; |
||||
|
export const monthlyJournalformSchemas: FormSchema[] = [ |
||||
|
{ |
||||
|
label: '期刊名称', |
||||
|
field: 'name', |
||||
|
component: 'Input', |
||||
|
required: true, |
||||
|
colProps: { span: 12 }, |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
label: '期刊期数', |
||||
|
field: 'periods', |
||||
|
required: true, |
||||
|
component: 'Input', |
||||
|
colProps: { span: 6 }, |
||||
|
|
||||
|
}, { |
||||
|
label: '发布日期', |
||||
|
field: 'publishTime', |
||||
|
component: 'DatePicker', |
||||
|
componentProps: { |
||||
|
valueFormat: 'YYYY-MM-DD', |
||||
|
|
||||
|
}, |
||||
|
required: true, |
||||
|
colProps: { span: 6}, |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
]; |
||||
@ -0,0 +1,57 @@ |
|||||
|
<template> |
||||
|
<BasicModal v-bind="$attrs" @register="registerModal" title="用户信息详情" width="1200px" :showOkBtn="false"> |
||||
|
<BasicTable @register="registerTable"> |
||||
|
|
||||
|
</BasicTable> |
||||
|
</BasicModal> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" name="system-user" setup> |
||||
|
//ts语法 |
||||
|
import { ref } from 'vue'; |
||||
|
import { BasicTable, useTable } from '@/components/Table'; |
||||
|
import { useModalInner, BasicModal } from '@/components/Modal'; |
||||
|
import { organizationStructurecolumns, searchFormSchema } from './organizationStructure.data'; |
||||
|
import { getUsers, } from './organizationStructure.api'; |
||||
|
|
||||
|
const condition= ref("all") |
||||
|
|
||||
|
const [registerModal] = useModalInner(init); |
||||
|
const [registerTable, { reload }] = useTable({ |
||||
|
title: '用户', |
||||
|
api: getUsers, |
||||
|
columns: organizationStructurecolumns, |
||||
|
useSearchForm: true, |
||||
|
|
||||
|
//表单查询项设置 |
||||
|
formConfig: { |
||||
|
schemas: searchFormSchema, |
||||
|
}, |
||||
|
beforeFetch(param) { |
||||
|
param.condition=condition.value |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
function init(data){ |
||||
|
if(data.name=="信息化专班"){ |
||||
|
condition.value="all" |
||||
|
}else if(data.name=="信息化工作小组"){ |
||||
|
condition.value="all" |
||||
|
}else if(data.name=="任务牵头处室"){ |
||||
|
condition.value="task" |
||||
|
}else if(data.name=="信息化保障团队"){ |
||||
|
condition.value="team" |
||||
|
}else if(data.name=="挂职人员"){ |
||||
|
condition.value="guazhi" |
||||
|
}else if(data.name=="总咨询单位"){ |
||||
|
condition.value="consult" |
||||
|
}else if(data.name=="项目联系人" ||data.name=="项目建设小组"){ |
||||
|
condition.value="contact" |
||||
|
} |
||||
|
console.log(data,condition.value) |
||||
|
reload() |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style scoped></style> |
||||
@ -0,0 +1,113 @@ |
|||||
|
<template> |
||||
|
<PageWrapper> |
||||
|
<div> |
||||
|
<div class="text-2xl mb-4 text-sky-400" >组织架构</div> |
||||
|
<div style="height: 480px"> |
||||
|
<vue3-tree-org |
||||
|
|
||||
|
:data="data" |
||||
|
:center="true" |
||||
|
:scalable="false" |
||||
|
:draggable="false" |
||||
|
:disabled="disaled" |
||||
|
:default-expand-level="3" |
||||
|
:horizontal="horizontal" |
||||
|
:collapsable="collapsable" |
||||
|
:only-one-node="onlyOneNode" |
||||
|
:node-draggable="false" |
||||
|
@on-node-click="onNodeClick" |
||||
|
> |
||||
|
<!-- 自定义节点内容 --> |
||||
|
<template v-slot="{ node }"> |
||||
|
|
||||
|
<div v-if="node.id==1" class="flex grow w-64 h-16 text-2xl justify-center items-center rounded-full bg-blue-600" >{{ node.label }}</div> |
||||
|
|
||||
|
<div v-else-if="node.id==2" class="flex grow w-64 h-16 text-2xl justify-center items-center rounded-full bg-sky-400" >{{ node.label }}</div> |
||||
|
<div v-else-if="node.id==6" class="flex grow w-64 h-16 text-2xl justify-center items-center bg-sky-400" >{{ node.label }}</div> |
||||
|
<div v-else-if="node.id==8" class="flex grow w-64 h-16 text-2xl justify-center items-center bg-sky-400" >{{ node.label }}</div> |
||||
|
<div v-else-if="node.id==10" class="flex grow w-64 h-16 text-2xl justify-center items-center bg-sky-400" >{{ node.label }}</div> |
||||
|
|
||||
|
<div v-else-if="node.id==9" class="flex grow w-64 h-16 text-2xl justify-center items-center outline outline-offset-2 outline-2" >{{ node.label }}</div> |
||||
|
<div v-else-if="node.id==11" class="flex grow w-64 h-16 text-2xl justify-center items-center outline outline-offset-2 outline-2" >{{ node.label }}</div> |
||||
|
<div v-else-if="node.id==12" class="flex grow w-64 h-16 text-2xl justify-center items-center outline outline-offset-2 outline-2" >{{ node.label }}</div> |
||||
|
</template> |
||||
|
</vue3-tree-org> |
||||
|
</div> |
||||
|
</div> |
||||
|
<detail @register="registerdetai" @close="closeModals" /> |
||||
|
|
||||
|
</PageWrapper> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import { ref, onMounted } from 'vue'; |
||||
|
import { PageWrapper } from '@/components/Page'; |
||||
|
import { useModal } from '@/components/Modal'; |
||||
|
import detail from './detail.vue'; |
||||
|
const [registerdetai, { openModal: openModal,closeModal: closeModals }] = useModal();//项目周月报详情页面 |
||||
|
|
||||
|
const data = ref({}); |
||||
|
data.value = { |
||||
|
id: 1, |
||||
|
label: '信息化专班', |
||||
|
style: { color: '#fff' }, |
||||
|
children: [ |
||||
|
{ |
||||
|
id: 2, |
||||
|
pid: 1, |
||||
|
label: '信息化工作小组', |
||||
|
style: { color: '#fff' }, |
||||
|
children: [ |
||||
|
{ |
||||
|
id: 6, |
||||
|
pid: 2, |
||||
|
label: '任务牵头处室', |
||||
|
style: { color: '#fff' }, |
||||
|
}, |
||||
|
{ |
||||
|
id: 8, |
||||
|
pid: 2, |
||||
|
label: '信息化保障团队', |
||||
|
style: { color: '#fff'}, |
||||
|
children: [ |
||||
|
{ id: 9, pid: 8, label: '挂职人员' , |
||||
|
style: { color: 'rgb(56 189 248)' }, |
||||
|
}, |
||||
|
{ id: 11, pid: 8, label: '总咨询单位' , |
||||
|
style: { color: 'rgb(56 189 248)' }, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
id: 10, |
||||
|
pid: 2, |
||||
|
label: '项目建设小组', |
||||
|
style: { color: '#fff' }, |
||||
|
children: [{ id: 12, pid: 10, label: '项目联系人', |
||||
|
style: { color: 'rgb(56 189 248)' }, |
||||
|
}], |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
const horizontal = ref(true); |
||||
|
const collapsable = ref(false); |
||||
|
const onlyOneNode = ref(false); |
||||
|
const disaled = ref(true); |
||||
|
// const onNodeDblclick = (node,data) => { |
||||
|
// console.log(node,data); |
||||
|
// }; |
||||
|
const onNodeClick = async (e,data) => { |
||||
|
console.log(data.label); |
||||
|
await openModal(true,{ name: data.label }); |
||||
|
}; |
||||
|
onMounted(() => { |
||||
|
console.log('mounted'); |
||||
|
}); |
||||
|
// import ProjectCard from './ProjectCard.vue'; |
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
.tree-org-node__content .tree-org-node__inner { |
||||
|
box-shadow:initial !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,10 @@ |
|||||
|
import { defHttp } from '@/utils/http/axios'; |
||||
|
import { downloadFile } from "../../../api/common/api" |
||||
|
|
||||
|
export enum Api { |
||||
|
getUsers = '/api/auth/sys/user/getUsers', |
||||
|
} |
||||
|
|
||||
|
export const getUsers = (params) => defHttp.get({ url: Api.getUsers, params }) |
||||
|
|
||||
|
|
||||
@ -0,0 +1,71 @@ |
|||||
|
import { FormSchema } from '@/components/Form'; |
||||
|
import { BasicColumn } from '@/components/Table'; |
||||
|
|
||||
|
|
||||
|
export const organizationStructurecolumns: BasicColumn[] = [ |
||||
|
{ |
||||
|
title: '昵称', |
||||
|
width: 150, |
||||
|
dataIndex: 'nickname', |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
title: '角色', |
||||
|
width: 150, |
||||
|
dataIndex: 'role', |
||||
|
// format: 'dict|regulationlabCategory',
|
||||
|
}, |
||||
|
{ |
||||
|
title: '性别', |
||||
|
width: 200, |
||||
|
dataIndex: 'sex', |
||||
|
format: 'dict|sex', |
||||
|
}, |
||||
|
{ |
||||
|
title: '手机号', |
||||
|
dataIndex: 'phoneNumber', |
||||
|
width: 150, |
||||
|
}, |
||||
|
{ |
||||
|
title: '单位名称', |
||||
|
dataIndex: 'workplace', |
||||
|
width: 150 |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
]; |
||||
|
export const searchFormSchema: FormSchema[] = [ |
||||
|
{ |
||||
|
label: '昵称', |
||||
|
field: 'nickname', |
||||
|
component: 'Input', |
||||
|
colProps: { span: 6 }, |
||||
|
}, |
||||
|
{ |
||||
|
label: '角色', |
||||
|
field: 'role', |
||||
|
component: 'Input', |
||||
|
|
||||
|
// component: 'DictSelect',
|
||||
|
// itemProps: { validateTrigger: 'blur' },
|
||||
|
// componentProps: {
|
||||
|
// dictType: 'regulationlabCategory'
|
||||
|
// },
|
||||
|
colProps: { span: 6 }, |
||||
|
|
||||
|
}, |
||||
|
{ |
||||
|
label: '手机号', |
||||
|
field: 'phoneNumber', |
||||
|
component: 'Input', |
||||
|
colProps: { span: 6 }, |
||||
|
|
||||
|
}, |
||||
|
{ |
||||
|
label: '单位名称', |
||||
|
field: 'workplace', |
||||
|
component: 'Input', |
||||
|
colProps: { span: 6 }, |
||||
|
} |
||||
|
|
||||
|
]; |
||||
Loading…
Reference in new issue