调试
This commit is contained in:
parent
ad740ab1fa
commit
4ec5d99d0c
@ -15,31 +15,31 @@ export function apiAreaList(params: any) {
|
||||
|
||||
//获取所有人员
|
||||
export function getAdminsByAll(params: any) {
|
||||
return request.get({ url: "/auth.admin/getAdminsByAll", params });
|
||||
return request.get({ url: "/auth/admin/getAdminsByAll", params });
|
||||
}
|
||||
|
||||
//获取某个部门下的所有人员
|
||||
|
||||
export function getAdminsByDept(params: any) {
|
||||
return request.get({ url: "/auth.admin/getAdminsByDept", params });
|
||||
return request.get({ url: "/auth/admin/getAdminsByDept", params });
|
||||
}
|
||||
|
||||
//获取某个岗位下的所有人员
|
||||
export function getAdminsByJob(params: any) {
|
||||
return request.get({ url: "/auth.admin/getAdminsByJob", params });
|
||||
return request.get({ url: "/auth/admin/getAdminsByJob", params });
|
||||
}
|
||||
|
||||
//获取所有岗位
|
||||
export function getAllJobs(params: any) {
|
||||
return request.get({ url: "/dept.jobs/getAllJobs", params });
|
||||
return request.get({ url: "/dept/jobs/getAllJobs", params });
|
||||
}
|
||||
|
||||
//获取所有部门
|
||||
export function getAllDept(params: any) {
|
||||
return request.get({ url: "/dept.dept/getAllDept", params });
|
||||
return request.get({ url: "/dept/dept/getAllDept", params });
|
||||
}
|
||||
|
||||
//某个项目下的项目合同列表
|
||||
export function projectcontracts(params: any) {
|
||||
return request.get({ url: "/project.project/contracts", params });
|
||||
return request.get({ url: "/project/project/contracts", params });
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<el-card class="!border-none" v-loading="pager.loading" shadow="never">
|
||||
<el-form class="mb-[-16px]" :model="queryParams" inline>
|
||||
|
||||
<el-form-item :label="item.label" v-for="(item, index) in config.serchList" :key="index">
|
||||
<el-form-item :label="item.label" v-for="(item, index) in config.serchList" :key="index" class="w-[280px]">
|
||||
<el-select v-model="queryParams[item.value]" v-if="item.select" :disabled="isDisabled(item.value)">
|
||||
<el-option :label="i.name" :value="i.value" v-for="i in item.select"
|
||||
v-if="Array.isArray(item.select)"></el-option>
|
||||
|
||||
139
src/components/oaFlow/index.vue
Normal file
139
src/components/oaFlow/index.vue
Normal file
@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<template #header> 审批流程 </template>
|
||||
<el-form ref="formRef" :model="formData" label-width="100px" :rules="formRules">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="审批流程" prop="flow_id">
|
||||
<el-select v-model="formData.flow_id" placeholder="选择审批流程" class="flex-1" @change="flowChnage">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in flowList">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" v-if="checkType == 2">
|
||||
<el-form-item label="审核人" prop="check_admin_names">
|
||||
<el-input v-model="formData.check_admin_names" clearable placeholder="点击选择审核人" readonly
|
||||
@click="userclick(1)" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col v-else style="max-height: 400px;min-height: 200px;margin-left: 30px;">
|
||||
<el-steps direction="vertical" :active="0">
|
||||
<el-step :title="i + 1 + '级审核' + `(${flowTypeToText(items.flow_type, items)})`"
|
||||
:description="items.flow_user_names" v-for="(items, i) in flowListPer" />
|
||||
</el-steps>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="抄送人">
|
||||
<el-input v-model="formData.copy_names" clearable placeholder="点击选择抄送人" readonly
|
||||
@click="userclick(2)" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-if="showPerDialog">
|
||||
<personnelselector ref="personnel" @confirm="submituser" :type="perType">
|
||||
</personnelselector>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps } from "vue";
|
||||
import { apiOaFlowLists, apiOaFlowDetail } from "@/api/oa/oa_flow";
|
||||
import useUserStore from "@/stores/modules/user";
|
||||
import feedback from './../../utils/feedback'
|
||||
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
flow_cate: {
|
||||
type: Number,
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
// 表单验证
|
||||
const formRules = reactive({
|
||||
flow_id: [{
|
||||
required: true,
|
||||
message: '不可为空',
|
||||
trigger: ['blur']
|
||||
}],
|
||||
check_admin_names: [{
|
||||
required: true,
|
||||
message: '不可为空',
|
||||
trigger: ['blur']
|
||||
}],
|
||||
})
|
||||
|
||||
|
||||
const showPerDialog = ref(false);
|
||||
const personnel = ref(null);
|
||||
const perType = ref(2); //人员选择器1为单选2为多选
|
||||
const userStore = useUserStore().userInfo;
|
||||
|
||||
const userclick = async (type) => {
|
||||
perType.value = type;
|
||||
showPerDialog.value = true;
|
||||
await nextTick();
|
||||
personnel.value.open();
|
||||
};
|
||||
const submituser = (e) => {
|
||||
if (perType.value == 1) {
|
||||
if (e.id == userStore.id) {
|
||||
showPerDialog.value = false;
|
||||
return feedback.msgError("审核人不能为自己")
|
||||
}
|
||||
props.formData.check_admin_names = e.name;
|
||||
props.formData.check_admin_ids = e.id;
|
||||
} else {
|
||||
if (e.map((item) => item.id).includes(userStore.id)) {
|
||||
showPerDialog.value = false;
|
||||
return feedback.msgError("抄送人不能包含自己")
|
||||
}
|
||||
props.formData.copy_names = e.map((item) => item.name).join(",");
|
||||
props.formData.copy_uids = e.map((item) => item.id).join(",");
|
||||
}
|
||||
showPerDialog.value = false;
|
||||
};
|
||||
|
||||
const flowList = ref([]);
|
||||
const getFlowList = async () => {
|
||||
// 根据id筛选审批流程列表
|
||||
const res = await apiOaFlowLists({ flow_cate: props.flow_cate, type: props.type });
|
||||
flowList.value = res.lists;
|
||||
};
|
||||
getFlowList();
|
||||
|
||||
// 根据选择的流程类型展示固定审批流与非固定审批流的审批流程人员
|
||||
const checkType = ref(2);
|
||||
const flowListPer = ref([]); //非固定审批流的审批流程人员
|
||||
|
||||
const flowChnage = async (e) => {
|
||||
const flow = flowList.value.find((item) => item.id === e);
|
||||
checkType.value = flow.check_type;
|
||||
if (flow.check_type != 2) {
|
||||
props.formData.check_admin_names = '';
|
||||
props.formData.check_admin_ids = '';
|
||||
let res = await apiOaFlowDetail({ id: flow.id });
|
||||
flowListPer.value = res.flow_list;
|
||||
}
|
||||
};
|
||||
|
||||
const flowTypeToText = (type, item) => {
|
||||
if (type == 1) return '当前部门负责人';
|
||||
if (type == 2) return '或签';
|
||||
if (type == 3) return '会签';
|
||||
if (type == 4) return item.flow_name;
|
||||
}
|
||||
|
||||
</script>
|
||||
190
src/components/oaFlowCheck/index.vue
Normal file
190
src/components/oaFlowCheck/index.vue
Normal file
@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<el-descriptions :column="3" border>
|
||||
<el-descriptions-item label="审批状态" label-align="left" align="left">
|
||||
{{ formData.check_status_text }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="当前审核人" label-align="left" align="left">
|
||||
{{ formData.check_admin_users || "审批结束" }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="抄送人" label-align="left" align="left">
|
||||
{{ formData.copy_users }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="审批流程" label-align="left" align="left">
|
||||
<el-steps class="mb-4" style="max-width: 50vw" :space="200" :active="findActive() + 2" simple>
|
||||
<el-step :icon="Clock" :title="formData.record[formData.record.length - 1].check_user_name + '创建'" />
|
||||
<el-step :icon="Clock" :title="flowTypeToText(item.flow_type, item)" v-for="item in formData.steps" />
|
||||
</el-steps>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="审批记录" label-align="left" align="left">
|
||||
<p v-for="item in formData.record">
|
||||
<span>{{ item.check_user_name + item.status_text }} </span>了申请
|
||||
{{ item.check_time }}
|
||||
<span>
|
||||
操作意见：
|
||||
{{ item.content }}
|
||||
</span>
|
||||
</p>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="审批节点" label-align="left" align="left"
|
||||
v-if="formData.flow_info.check_type == 2 && formData.check_status != 3 && formData.check_status != 2 && formData.admin_id != userStore.id && showTextarea()">
|
||||
<div class="flex" style="position: relative;">
|
||||
<el-radio-group v-model="form.check_node">
|
||||
<el-radio :label="1">审批结束</el-radio>
|
||||
<el-radio :label="2">下一审批人</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="w-280[px]" style="position: absolute;left:250px">
|
||||
<el-input v-show="form.check_node == 2" v-model="form.check_admin_names" placeholder="点击选择下一审批人"
|
||||
clearable readonly @click="userclick" />
|
||||
</div>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="审批意见" label-align="left" align="left"
|
||||
v-if="showTextarea() && formData.admin_id != userStore.id">
|
||||
<el-input type="textarea" v-model="form.content"></el-input>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="操作" label-align="left" align="left" v-if="showTextarea()">
|
||||
<el-button type="primary" @click="form.check = 1, handCheck()" v-if="formData.admin_id != userStore.id">
|
||||
通过
|
||||
</el-button>
|
||||
<el-button @click="form.check = 2, handCheck()"
|
||||
v-if="formData.admin_id != userStore.id && formData.flow_info.check_type != 3">
|
||||
拒绝
|
||||
</el-button>
|
||||
<el-button @click="form.check = 2, handCheck()"
|
||||
v-if="formData.admin_id != userStore.id && formData.flow_info.check_type == 3">
|
||||
回退
|
||||
</el-button>
|
||||
<el-button type="info" @click=" showBackDialog = true" v-if="formData.admin_id == userStore.id">
|
||||
撤回
|
||||
</el-button>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="操作" label-align="left" align="left"
|
||||
v-if="formData.check_status == 3 && formData.record[formData.record.length - 1].check_user_id == userStore.id">
|
||||
<el-button type="info" @click="reEdit">
|
||||
重新编辑
|
||||
</el-button>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div v-if="showPerDialog">
|
||||
<personnelselector ref="personnel" @confirm="submituser" type="1">
|
||||
</personnelselector>
|
||||
</div>
|
||||
<el-dialog v-model="showBackDialog" title="撤回审批" width="550px">
|
||||
<el-form-item label="撤回原因">
|
||||
<el-input v-model="form.content" type="textarea"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-button type="primary" @click="backFn">撤回</el-button>
|
||||
<el-button @click="showBackDialog = false">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { apiOaoaApproveCheck } from "@/api/oa/oa_initiate"
|
||||
import useUserStore from "@/stores/modules/user";
|
||||
import { Clock } from '@element-plus/icons-vue'
|
||||
import feedback from '@/utils/feedback'
|
||||
import { defineProps } from "vue"
|
||||
|
||||
let props = defineProps({
|
||||
formData: {
|
||||
type: Object,
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(["success", "close", "reEdit"]);
|
||||
const showPerDialog = ref(false);
|
||||
const personnel = ref(null);
|
||||
const userStore = useUserStore().userInfo;
|
||||
const showBackDialog = ref(false)
|
||||
|
||||
const form = reactive({
|
||||
"id": props.formData.id,
|
||||
"check": '',
|
||||
"content": "",
|
||||
"check_node": 1,
|
||||
"check_admin_ids": '',
|
||||
check_admin_names: ""
|
||||
})
|
||||
|
||||
|
||||
const backFn = () => {
|
||||
if (!form.content) return feedback.msgError("请填写撤回原因");
|
||||
form.check = 3
|
||||
handCheck()
|
||||
}
|
||||
const userclick = async () => {
|
||||
showPerDialog.value = true;
|
||||
await nextTick();
|
||||
personnel.value.open();
|
||||
};
|
||||
|
||||
const submituser = (e) => {
|
||||
form.check_admin_names = e.name;
|
||||
form.check_admin_ids = e.id;
|
||||
showPerDialog.value = false;
|
||||
};
|
||||
|
||||
|
||||
const flowTypeToText = (type, item) => {
|
||||
if (type == 0) return item.user_id_info[0].name;
|
||||
if (type == 1) return "部门负责人";
|
||||
if (type == 2) return "或签";
|
||||
if (type == 3) return "会签";
|
||||
if (type == 4) return item.user_id_info[0].name;
|
||||
}
|
||||
|
||||
const findActive = () => {
|
||||
let index = props.formData.steps.findIndex(item => { return item.sort == props.formData.check_step_sort })
|
||||
return index
|
||||
}
|
||||
|
||||
// 关闭回调
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const hdClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
|
||||
// 审批
|
||||
const handCheck = async () => {
|
||||
if (props.formData.check_admin_ids && props.formData.record[props.formData.record.length - 1].check_user_id == form.check_admin_ids) {
|
||||
return feedback.msgError("下一级审批人不能是发起审批人")
|
||||
|
||||
}
|
||||
if (props.formData.flow_info.check_type != 2) delete form.check_node;
|
||||
form.id = props.formData.id
|
||||
const res = await apiOaoaApproveCheck({ ...form })
|
||||
handleClose()
|
||||
}
|
||||
|
||||
// 显示
|
||||
const showActionList = reactive([4, 3, 2])
|
||||
const showTextarea = () => {
|
||||
if (showActionList.includes(props.formData.check_status)) return false;
|
||||
if (props.formData.admin_id == userStore.id) return true;
|
||||
if (props.formData?.check_admin_ids.length > 1) {
|
||||
if (props.formData.steps[findActive()].check_list.map(item => item.check_user_id).includes(userStore.id)) return false;
|
||||
else return (props.formData?.check_admin_ids.split(',').map(Number).includes(userStore.id)); // 判断是否是当前用户
|
||||
} else {
|
||||
return (props.formData?.check_admin_ids == userStore.id)
|
||||
}
|
||||
}
|
||||
|
||||
//重新编辑
|
||||
const reEdit = () => {
|
||||
emit('reEdit')
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-step__icon) {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,173 +1,150 @@
|
||||
<template>
|
||||
<div class="article-edit">
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-page-header :content="$route.meta.title" @back="$router.back()" />
|
||||
</el-card>
|
||||
<el-card class="mt-4 !border-none" shadow="never">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
class="ls-form"
|
||||
:model="formData"
|
||||
label-width="85px"
|
||||
:rules="rules"
|
||||
>
|
||||
<div class="xl:flex">
|
||||
<div>
|
||||
<el-form-item label="文章标题" prop="title">
|
||||
<div class="w-80">
|
||||
<el-input
|
||||
v-model="formData.title"
|
||||
placeholder="请输入文章标题"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 3, maxRows: 3 }"
|
||||
maxlength="64"
|
||||
show-word-limit
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章栏目" prop="cid">
|
||||
<el-select
|
||||
class="w-80"
|
||||
v-model="formData.cid"
|
||||
placeholder="请选择文章栏目"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in optionsData.article_cate"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章简介" prop="desc">
|
||||
<div class="w-80">
|
||||
<el-input
|
||||
v-model="formData.desc"
|
||||
placeholder="请输入文章简介"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 3, maxRows: 6 }"
|
||||
:maxlength="200"
|
||||
show-word-limit
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="摘要" prop="abstract">
|
||||
<div class="w-80">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 6, maxRows: 6 }"
|
||||
v-model="formData.abstract"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章封面" prop="image">
|
||||
<div>
|
||||
<div>
|
||||
<material-picker v-model="formData.image" :limit="1" />
|
||||
</div>
|
||||
<div class="form-tips">建议尺寸：240*180px</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="作者" prop="author">
|
||||
<div class="w-80">
|
||||
<el-input v-model="formData.author" placeholder="请输入作者名称" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<div>
|
||||
<el-input-number v-model="formData.sort" :min="0" :max="9999" />
|
||||
<div class="form-tips">默认为0， 数值越大越排前</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="初始浏览量" prop="click_virtual">
|
||||
<div>
|
||||
<el-input-number v-model="formData.click_virtual" :min="0" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章状态" required prop="is_show">
|
||||
<el-radio-group v-model="formData.is_show">
|
||||
<el-radio :label="1">显示</el-radio>
|
||||
<el-radio :label="0">隐藏</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="xl:ml-20">
|
||||
<el-form-item label="文章内容" prop="content">
|
||||
<editor v-model="formData.content" :height="667" :width="375" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<footer-btns>
|
||||
<el-button type="primary" @click="handleSave">保存</el-button>
|
||||
</footer-btns>
|
||||
</div>
|
||||
<div class="edit-popup">
|
||||
<popup ref="popupRef" :title="popupTitle" :async="true" width="850px" @confirm="handleSubmit"
|
||||
@close="handleClose">
|
||||
<el-form ref="formRef" :model="formData" label-width="84px" :rules="formRules">
|
||||
<el-form-item label="文章标题" prop="title">
|
||||
<div class="w-80">
|
||||
<el-input v-model="formData.title" placeholder="请输入文章标题" type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 2 }" maxlength="64" show-word-limit clearable />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章栏目" prop="cid">
|
||||
<el-select class="w-80" v-model="formData.cid" placeholder="请选择文章栏目" clearable>
|
||||
<el-option v-for="item in optionsData.article_cate" :key="item.id" :label="item.name"
|
||||
:value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章简介" prop="desc">
|
||||
<div class="w-80">
|
||||
<el-input v-model="formData.desc" placeholder="请输入文章简介" type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 5 }" :maxlength="200" show-word-limit clearable />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="摘要" prop="abstract">
|
||||
<div class="w-80">
|
||||
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" v-model="formData.abstract"
|
||||
maxlength="200" show-word-limit clearable />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章封面" prop="image">
|
||||
<div>
|
||||
<div>
|
||||
<material-picker v-model="formData.image" :limit="1" />
|
||||
</div>
|
||||
<div class="form-tips">建议尺寸：240*180px</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="作者" prop="author">
|
||||
<div class="w-80">
|
||||
<el-input v-model="formData.author" placeholder="请输入作者名称" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<div>
|
||||
<el-input-number v-model="formData.sort" :min="0" :max="9999" />
|
||||
<div class="form-tips">默认为0， 数值越大越排前</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="初始浏览量" prop="click_virtual">
|
||||
<div>
|
||||
<el-input-number v-model="formData.click_virtual" :min="0" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章状态" required prop="is_show">
|
||||
<el-radio-group v-model="formData.is_show">
|
||||
<el-radio :label="1">显示</el-radio>
|
||||
<el-radio :label="0">隐藏</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章内容" prop="content">
|
||||
<editor v-model="formData.content" :height="400" :width="775" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</popup>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { useDictOptions } from '@/hooks/useDictOptions'
|
||||
import { articleDetail, articleEdit, articleAdd, articleCateAll } from '@/api/article'
|
||||
import Popup from '@/components/popup/index.vue'
|
||||
const emit = defineEmits(['success', 'close'])
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
||||
const mode = ref('add')
|
||||
const route = useRoute()
|
||||
const popupTitle = computed(() => {
|
||||
return mode.value == 'edit' ? '编辑文章' : '新增文章'
|
||||
})
|
||||
|
||||
<script lang="ts" setup name="articleListsEdit">
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { useDictOptions } from '@/hooks/useDictOptions'
|
||||
import { articleDetail, articleEdit, articleAdd, articleCateAll } from '@/api/article'
|
||||
import useMultipleTabs from '@/hooks/useMultipleTabs'
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
title: '',
|
||||
image: '',
|
||||
cid: '',
|
||||
desc: '',
|
||||
author: '',
|
||||
content: '',
|
||||
click_virtual: 0,
|
||||
sort: 0,
|
||||
is_show: 1,
|
||||
abstract: ''
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
title: '',
|
||||
image: '',
|
||||
cid: '',
|
||||
desc: '',
|
||||
author: '',
|
||||
content: '',
|
||||
click_virtual: 0,
|
||||
sort: 0,
|
||||
is_show: 1,
|
||||
abstract: ''
|
||||
})
|
||||
const formRules = {
|
||||
title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
|
||||
cid: [{ required: true, message: '请选择文章栏目', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
const { removeTab } = useMultipleTabs()
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const rules = reactive({
|
||||
title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
|
||||
cid: [{ required: true, message: '请选择文章栏目', trigger: 'blur' }]
|
||||
})
|
||||
const { optionsData } = useDictOptions<{
|
||||
article_cate : any[]
|
||||
}>({
|
||||
article_cate: {
|
||||
api: articleCateAll
|
||||
}
|
||||
})
|
||||
|
||||
const getDetails = async () => {
|
||||
const data = await articleDetail({
|
||||
id: route.query.id
|
||||
})
|
||||
Object.keys(formData).forEach((key) => {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
})
|
||||
}
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
if (route.query.id) {
|
||||
await articleEdit(formData)
|
||||
} else {
|
||||
await articleAdd(formData)
|
||||
}
|
||||
}
|
||||
|
||||
const { optionsData } = useDictOptions<{
|
||||
article_cate: any[]
|
||||
}>({
|
||||
article_cate: {
|
||||
api: articleCateAll
|
||||
}
|
||||
})
|
||||
const open = (type = 'add') => {
|
||||
mode.value = type
|
||||
popupRef.value?.open()
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
await formRef.value?.validate()
|
||||
if (route.query.id) {
|
||||
await articleEdit(formData)
|
||||
} else {
|
||||
await articleAdd(formData)
|
||||
}
|
||||
removeTab()
|
||||
router.back()
|
||||
}
|
||||
const setFormData = (data : Record<any, any>) => {
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
route.query.id && getDetails()
|
||||
</script>
|
||||
const getDetail = async (row: Record<string, any>) => {
|
||||
const data = await articleDetail({
|
||||
id: row.id
|
||||
})
|
||||
Object.keys(formData).forEach((key) => {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
})
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
setFormData,
|
||||
getDetail
|
||||
})
|
||||
</script>
|
||||
138
src/views/article/lists/edit2.vue
Normal file
138
src/views/article/lists/edit2.vue
Normal file
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div class="article-edit">
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-page-header :content="$route.meta.title" @back="$router.back()" />
|
||||
</el-card>
|
||||
<el-card class="mt-4 !border-none" shadow="never">
|
||||
<el-form ref="formRef" class="ls-form" :model="formData" label-width="85px" :rules="rules">
|
||||
<div class="xl:flex">
|
||||
<div>
|
||||
<el-form-item label="文章标题" prop="title">
|
||||
<div class="w-80">
|
||||
<el-input v-model="formData.title" placeholder="请输入文章标题" type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 2 }" maxlength="64" show-word-limit clearable />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章栏目" prop="cid">
|
||||
<el-select class="w-80" v-model="formData.cid" placeholder="请选择文章栏目" clearable>
|
||||
<el-option v-for="item in optionsData.article_cate" :key="item.id" :label="item.name"
|
||||
:value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章简介" prop="desc">
|
||||
<div class="w-80">
|
||||
<el-input v-model="formData.desc" placeholder="请输入文章简介" type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 5 }" :maxlength="200" show-word-limit clearable />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="摘要" prop="abstract">
|
||||
<div class="w-80">
|
||||
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
|
||||
v-model="formData.abstract" maxlength="200" show-word-limit clearable />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章封面" prop="image">
|
||||
<div>
|
||||
<div>
|
||||
<material-picker v-model="formData.image" :limit="1" />
|
||||
</div>
|
||||
<div class="form-tips">建议尺寸：240*180px</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="作者" prop="author">
|
||||
<div class="w-80">
|
||||
<el-input v-model="formData.author" placeholder="请输入作者名称" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<div>
|
||||
<el-input-number v-model="formData.sort" :min="0" :max="9999" />
|
||||
<div class="form-tips">默认为0， 数值越大越排前</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="初始浏览量" prop="click_virtual">
|
||||
<div>
|
||||
<el-input-number v-model="formData.click_virtual" :min="0" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章状态" required prop="is_show">
|
||||
<el-radio-group v-model="formData.is_show">
|
||||
<el-radio :label="1">显示</el-radio>
|
||||
<el-radio :label="0">隐藏</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="xl:ml-20">
|
||||
<el-form-item label="文章内容" prop="content">
|
||||
<editor v-model="formData.content" :height="300" :width="775" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<footer-btns>
|
||||
<el-button type="primary" @click="handleSave">保存</el-button>
|
||||
</footer-btns>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="articleListsEdit">
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { useDictOptions } from '@/hooks/useDictOptions'
|
||||
import { articleDetail, articleEdit, articleAdd, articleCateAll } from '@/api/article'
|
||||
import useMultipleTabs from '@/hooks/useMultipleTabs'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
title: '',
|
||||
image: '',
|
||||
cid: '',
|
||||
desc: '',
|
||||
author: '',
|
||||
content: '',
|
||||
click_virtual: 0,
|
||||
sort: 0,
|
||||
is_show: 1,
|
||||
abstract: ''
|
||||
})
|
||||
|
||||
const { removeTab } = useMultipleTabs()
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const rules = reactive({
|
||||
title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
|
||||
cid: [{ required: true, message: '请选择文章栏目', trigger: 'blur' }]
|
||||
})
|
||||
|
||||
const getDetails = async () => {
|
||||
const data = await articleDetail({
|
||||
id: route.query.id
|
||||
})
|
||||
Object.keys(formData).forEach((key) => {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
})
|
||||
}
|
||||
|
||||
const { optionsData } = useDictOptions<{
|
||||
article_cate : any[]
|
||||
}>({
|
||||
article_cate: {
|
||||
api: articleCateAll
|
||||
}
|
||||
})
|
||||
|
||||
const handleSave = async () => {
|
||||
await formRef.value?.validate()
|
||||
if (route.query.id) {
|
||||
await articleEdit(formData)
|
||||
} else {
|
||||
await articleAdd(formData)
|
||||
}
|
||||
removeTab()
|
||||
router.back()
|
||||
}
|
||||
|
||||
route.query.id && getDetails()
|
||||
</script>
|
||||
@ -1,154 +1,154 @@
|
||||
<template>
|
||||
<div class="article-lists">
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
|
||||
<el-form-item label="文章标题">
|
||||
<el-input class="w-[280px]" v-model="queryParams.title" clearable @keyup.enter="resetPage" />
|
||||
</el-form-item>
|
||||
<el-form-item label="栏目名称">
|
||||
<el-select class="w-[280px]" v-model="queryParams.cid">
|
||||
<el-option label="全部" value />
|
||||
<el-option v-for="item in optionsData.article_cate" :key="item.id" :label="item.name"
|
||||
:value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章状态">
|
||||
<el-select class="w-[280px]" v-model="queryParams.is_show">
|
||||
<el-option label="全部" value />
|
||||
<el-option label="显示" :value="1" />
|
||||
<el-option label="隐藏" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="resetPage">查询</el-button>
|
||||
<el-button @click="resetParams">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<div>
|
||||
<router-link v-perms="['article.article/add', 'article.article/add:edit']" :to="{
|
||||
path: getRoutePath('article.article/add:edit')
|
||||
}">
|
||||
<el-button type="primary" class="mb-4">
|
||||
<template #icon>
|
||||
<icon name="el-icon-Plus" />
|
||||
</template>
|
||||
发布文章
|
||||
</el-button>
|
||||
</router-link>
|
||||
</div>
|
||||
<el-table size="large" v-loading="pager.loading" :data="pager.lists">
|
||||
<el-table-column label="ID" prop="id" min-width="80" />
|
||||
<el-table-column label="封面" min-width="100">
|
||||
<template #default="{ row }">
|
||||
<image-contain v-if="row.image" :src="row.image" :width="60" :height="45"
|
||||
:preview-src-list="[row.image]" preview-teleported fit="contain" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="标题" prop="title" min-width="160" show-tooltip-when-overflow />
|
||||
<el-table-column label="栏目" prop="cate_name" min-width="100" />
|
||||
<el-table-column label="作者" prop="author" min-width="120" />
|
||||
<el-table-column label="浏览量" prop="click" min-width="100" />
|
||||
<el-table-column label="状态" min-width="100">
|
||||
<template #default="{ row }">
|
||||
<el-switch v-perms="['article.article/updateStatus']" v-model="row.is_show" :active-value="1"
|
||||
:inactive-value="0" @change="changeStatus($event, row.id)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" prop="sort" min-width="100" />
|
||||
<el-table-column label="发布时间" prop="create_time" min-width="120" />
|
||||
<el-table-column label="操作" width="170" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button v-perms="['article.article/edit', 'article.article/add:edit']" type="primary" link>
|
||||
<router-link :to="{
|
||||
path: getRoutePath('article.article/add:edit'),
|
||||
query: {
|
||||
id: row.id
|
||||
}
|
||||
}">
|
||||
编辑
|
||||
</router-link>
|
||||
</el-button>
|
||||
<el-button v-perms="['article.article/delete']" type="danger" link @click="handleDelete(row.id)">
|
||||
删除
|
||||
</el-button>
|
||||
<el-button v-perms="['article.article/detail']" link @click="handleDetail(row.id)">
|
||||
详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="flex justify-end mt-4">
|
||||
<pagination v-model="pager" @change="getLists" />
|
||||
</div>
|
||||
</el-card>
|
||||
<detail-popup v-if="showDtail" ref="detailRef" @close="showDtail = false" />
|
||||
|
||||
</div>
|
||||
<div class="article-lists">
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
|
||||
<el-form-item label="文章标题">
|
||||
<el-input class="w-[280px]" v-model="queryParams.title" clearable @keyup.enter="resetPage" />
|
||||
</el-form-item>
|
||||
<el-form-item label="栏目名称">
|
||||
<el-select class="w-[280px]" v-model="queryParams.cid">
|
||||
<el-option label="全部" value />
|
||||
<el-option v-for="item in optionsData.article_cate" :key="item.id" :label="item.name"
|
||||
:value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章状态">
|
||||
<el-select class="w-[280px]" v-model="queryParams.is_show">
|
||||
<el-option label="全部" value />
|
||||
<el-option label="显示" :value="1" />
|
||||
<el-option label="隐藏" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="resetPage">查询</el-button>
|
||||
<el-button @click="resetParams">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="!border-none mt-4" shadow="never">
|
||||
<div>
|
||||
<el-button class="mb-4" v-perms="['article.articleCate/add']" type="primary" @click="handleAdd()">
|
||||
<template #icon>
|
||||
<icon name="el-icon-Plus" />
|
||||
</template>
|
||||
发布文章
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table size="large" v-loading="pager.loading" :data="pager.lists">
|
||||
<el-table-column label="ID" prop="id" min-width="80" />
|
||||
<el-table-column label="封面" min-width="100">
|
||||
<template #default="{ row }">
|
||||
<image-contain v-if="row.image" :src="row.image" :width="60" :height="45"
|
||||
:preview-src-list="[row.image]" preview-teleported fit="contain" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="标题" prop="title" min-width="160" show-tooltip-when-overflow />
|
||||
<el-table-column label="栏目" prop="cate_name" min-width="100" />
|
||||
<el-table-column label="作者" prop="author" min-width="120" />
|
||||
<el-table-column label="浏览量" prop="click" min-width="100" />
|
||||
<el-table-column label="状态" min-width="100">
|
||||
<template #default="{ row }">
|
||||
<el-switch v-perms="['article.article/updateStatus']" v-model="row.is_show" :active-value="1"
|
||||
:inactive-value="0" @change="changeStatus($event, row.id)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" prop="sort" min-width="100" />
|
||||
<el-table-column label="发布时间" prop="create_time" min-width="120" />
|
||||
<el-table-column label="操作" width="170" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button v-perms="['article.article/edit', 'article.article/add:edit']" type="primary" link
|
||||
@click="handleEdit(row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button v-perms="['article.article/delete']" type="danger" link
|
||||
@click="handleDelete(row.id)">
|
||||
删除
|
||||
</el-button>
|
||||
<el-button v-perms="['article.article/detail']" link @click="handleDetail(row.id)">
|
||||
详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="flex justify-end mt-4">
|
||||
<pagination v-model="pager" @change="getLists" />
|
||||
</div>
|
||||
</el-card>
|
||||
<detail-popup v-if="showDtail" ref="detailRef" @close="showDtail = false" />
|
||||
<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="articleLists">
|
||||
import { articleLists, articleDelete, articleStatus, articleCateAll, articleDetail } from '@/api/article'
|
||||
import { useDictOptions } from '@/hooks/useDictOptions'
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
import { getRoutePath } from '@/router'
|
||||
import feedback from '@/utils/feedback'
|
||||
import DetailPopup from './detail.vue'
|
||||
import { articleLists, articleDelete, articleStatus, articleCateAll, articleDetail } from '@/api/article'
|
||||
import { useDictOptions } from '@/hooks/useDictOptions'
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
import { getRoutePath } from '@/router'
|
||||
import feedback from '@/utils/feedback'
|
||||
import DetailPopup from './detail.vue'
|
||||
import EditPopup from './edit.vue'
|
||||
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
|
||||
const showEdit = ref(false)
|
||||
|
||||
const queryParams = reactive({
|
||||
title: '',
|
||||
cid: '',
|
||||
is_show: ''
|
||||
})
|
||||
|
||||
const queryParams = reactive({
|
||||
title: '',
|
||||
cid: '',
|
||||
is_show: ''
|
||||
})
|
||||
const { pager, getLists, resetPage, resetParams } = usePaging({
|
||||
fetchFun: articleLists,
|
||||
params: queryParams
|
||||
})
|
||||
|
||||
const { pager, getLists, resetPage, resetParams } = usePaging({
|
||||
fetchFun: articleLists,
|
||||
params: queryParams
|
||||
})
|
||||
const { optionsData } = useDictOptions<{
|
||||
article_cate : any[]
|
||||
}>({
|
||||
article_cate: {
|
||||
api: articleCateAll
|
||||
}
|
||||
})
|
||||
|
||||
const { optionsData } = useDictOptions<{
|
||||
article_cate: any[]
|
||||
}>({
|
||||
article_cate: {
|
||||
api: articleCateAll
|
||||
}
|
||||
})
|
||||
const changeStatus = async (is_show : any, id : number) => {
|
||||
try {
|
||||
await articleStatus({ id, is_show })
|
||||
getLists()
|
||||
} catch (error) {
|
||||
getLists()
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (id : number) => {
|
||||
await feedback.confirm('确定要删除？')
|
||||
await articleDelete({ id })
|
||||
getLists()
|
||||
}
|
||||
|
||||
const detailRef = shallowRef<InstanceType<typeof DetailPopup>>()
|
||||
const showDtail = ref(false)
|
||||
|
||||
const changeStatus = async (is_show: any, id: number) => {
|
||||
try {
|
||||
await articleStatus({ id, is_show })
|
||||
getLists()
|
||||
} catch (error) {
|
||||
getLists()
|
||||
}
|
||||
}
|
||||
const handleDetail = async (id : number) => {
|
||||
let res = await articleDetail({ id })
|
||||
showDtail.value = true
|
||||
await nextTick()
|
||||
detailRef.value?.open(res)
|
||||
}
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
await feedback.confirm('确定要删除？')
|
||||
await articleDelete({ id })
|
||||
getLists()
|
||||
}
|
||||
const handleAdd = async () => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('add')
|
||||
}
|
||||
|
||||
const detailRef = shallowRef<InstanceType<typeof DetailPopup>>()
|
||||
const showDtail = ref(false)
|
||||
const handleEdit = async (data : any) => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('edit')
|
||||
editRef.value?.getDetail(data)
|
||||
}
|
||||
|
||||
onActivated(() => {
|
||||
getLists()
|
||||
})
|
||||
|
||||
const handleDetail = async (id: number) => {
|
||||
let res = await articleDetail({ id })
|
||||
showDtail.value = true
|
||||
await nextTick()
|
||||
detailRef.value?.open(res)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
onActivated(() => {
|
||||
getLists()
|
||||
})
|
||||
|
||||
getLists()
|
||||
</script>
|
||||
getLists()
|
||||
</script>
|
||||
@ -79,7 +79,6 @@ const popupTitle = computed(() => {
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: 0,
|
||||
data: [],
|
||||
extends: {}
|
||||
});
|
||||
@ -90,7 +89,6 @@ const formData = reactive({
|
||||
// 获取详情
|
||||
const setFormData = async (data: Record<any, any>) => {
|
||||
formData.data = data.data;
|
||||
formData.id = data.id;
|
||||
};
|
||||
|
||||
// 获取详情
|
||||
|
||||
@ -80,7 +80,7 @@ const formRef = ref(null)
|
||||
const deptList = ref([])
|
||||
const getDeptList = async () => {
|
||||
const res = await deptLists()
|
||||
deptList.value = res.lists
|
||||
deptList.value = res
|
||||
}
|
||||
getDeptList()
|
||||
|
||||
@ -88,7 +88,7 @@ getDeptList()
|
||||
const zwlist = ref([])
|
||||
const getzwlist = async () => {
|
||||
const res = await jobsLists()
|
||||
zwlist.value = res.lists
|
||||
zwlist.value = res
|
||||
}
|
||||
getzwlist()
|
||||
|
||||
|
||||
@ -73,7 +73,7 @@ const formRef = ref(null)
|
||||
const deptList = ref([])
|
||||
const getDeptList = async () => {
|
||||
const res = await deptLists()
|
||||
deptList.value = res.lists
|
||||
deptList.value = res
|
||||
}
|
||||
getDeptList()
|
||||
|
||||
|
||||
@ -96,7 +96,7 @@ const formRef = ref(null)
|
||||
const deptList = ref([])
|
||||
const getDeptList = async () => {
|
||||
const res = await deptLists()
|
||||
deptList.value = res.lists
|
||||
deptList.value = res
|
||||
}
|
||||
getDeptList()
|
||||
|
||||
@ -104,7 +104,7 @@ getDeptList()
|
||||
const zwlist = ref([])
|
||||
const getzwlist = async () => {
|
||||
const res = await jobsLists()
|
||||
zwlist.value = res.lists
|
||||
zwlist.value = res
|
||||
}
|
||||
getzwlist()
|
||||
|
||||
|
||||
@ -69,7 +69,7 @@ const formRef = ref(null)
|
||||
const deptList = ref([])
|
||||
const getDeptList = async () => {
|
||||
const res = await deptLists()
|
||||
deptList.value = res.lists
|
||||
deptList.value = res
|
||||
}
|
||||
getDeptList()
|
||||
|
||||
@ -77,7 +77,7 @@ getDeptList()
|
||||
const zwlist = ref([])
|
||||
const getzwlist = async () => {
|
||||
const res = await jobsLists()
|
||||
zwlist.value = res.lists
|
||||
zwlist.value = res
|
||||
}
|
||||
getzwlist()
|
||||
|
||||
|
||||
@ -64,7 +64,7 @@ const formRef = ref(null)
|
||||
const deptList = ref([])
|
||||
const getDeptList = async () => {
|
||||
const res = await deptLists()
|
||||
deptList.value = res.lists
|
||||
deptList.value = res
|
||||
}
|
||||
getDeptList()
|
||||
|
||||
@ -72,7 +72,7 @@ getDeptList()
|
||||
const zwlist = ref([])
|
||||
const getzwlist = async () => {
|
||||
const res = await jobsLists()
|
||||
zwlist.value = res.lists
|
||||
zwlist.value = res
|
||||
}
|
||||
getzwlist()
|
||||
|
||||
|
||||
@ -79,7 +79,7 @@ import { deptLists } from "@/api/org/department";
|
||||
const deptList = ref([])
|
||||
const getDeptList = async () => {
|
||||
const res = await deptLists()
|
||||
deptList.value = res.lists
|
||||
deptList.value = res
|
||||
}
|
||||
getDeptList()
|
||||
|
||||
|
||||
@ -1,185 +1,181 @@
|
||||
<template>
|
||||
<div class="edit-popup">
|
||||
<popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit" @close="handleClose">
|
||||
<el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
|
||||
<el-form-item label="调动员工" prop="user_name">
|
||||
<el-input v-model="formData.user_name" clearable placeholder="点击选择员工" @click="userclick('uid')" />
|
||||
</el-form-item>
|
||||
<el-form-item label="调出部门">
|
||||
<el-select v-model="formData.from_did" placeholder="系统自动获取" disabled class="flex-1">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in deptList">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="调动日期" prop="move_time">
|
||||
<el-date-picker v-model="formData.move_time" value-format="YYYY-MM-DD" placeholder="选择日期"
|
||||
class="!flex flex-1"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="调入部门" prop="to_did">
|
||||
<el-select v-model="formData.to_did" placeholder="请选择调入部门" class="flex-1">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in deptList">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="调动描述">
|
||||
<el-input v-model="formData.remark" type="textarea" clearable placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div v-if="showDialog">
|
||||
<personnelselector ref="personnel" @confirm="submituser" type="1">
|
||||
</personnelselector>
|
||||
</div>
|
||||
</popup>
|
||||
</div>
|
||||
<div class="edit-popup">
|
||||
<popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit"
|
||||
@close="handleClose">
|
||||
<el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
|
||||
<el-form-item label="调动员工" prop="user_name">
|
||||
<el-input v-model="formData.user_name" clearable placeholder="点击选择员工" @click="userclick('uid')" />
|
||||
</el-form-item>
|
||||
<el-form-item label="调出部门">
|
||||
<el-select v-model="formData.from_did" placeholder="系统自动获取" disabled class="flex-1">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in deptList">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="调动日期" prop="move_time">
|
||||
<el-date-picker v-model="formData.move_time" value-format="YYYY-MM-DD" placeholder="选择日期"
|
||||
class="!flex flex-1"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="调入部门" prop="to_did">
|
||||
<el-select v-model="formData.to_did" placeholder="请选择调入部门" class="flex-1">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in deptList">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="调动描述">
|
||||
<el-input v-model="formData.remark" type="textarea" clearable placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div v-if="showDialog">
|
||||
<personnelselector ref="personnel" @confirm="submituser" type="1">
|
||||
</personnelselector>
|
||||
</div>
|
||||
</popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="oaDepartmentChangeEdit">
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import Popup from '@/components/popup/index.vue'
|
||||
import { apiOaDepartmentChangeAdd, apiOaDepartmentChangeEdit, apiOaDepartmentChangeDetail } from '@/api/oa/oa_department_change'
|
||||
import { timeFormat } from '@/utils/util'
|
||||
import type { PropType } from 'vue'
|
||||
defineProps({
|
||||
dictData: {
|
||||
type: Object as PropType<Record<string, any[]>>,
|
||||
default: () => ({})
|
||||
},
|
||||
deptList: Array
|
||||
|
||||
})
|
||||
const emit = defineEmits(['success', 'close'])
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
||||
const mode = ref('add')
|
||||
const showDialog = ref(false)
|
||||
const personnel = ref(null)
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import Popup from '@/components/popup/index.vue'
|
||||
import { apiOaDepartmentChangeAdd, apiOaDepartmentChangeEdit, apiOaDepartmentChangeDetail } from '@/api/oa/oa_department_change'
|
||||
import { timeFormat } from '@/utils/util'
|
||||
import type { PropType } from 'vue'
|
||||
const props = defineProps({
|
||||
dictData: {
|
||||
type: Object as PropType<Record<string, any[]>>,
|
||||
default: () => ({})
|
||||
},
|
||||
deptList: Array
|
||||
})
|
||||
const emit = defineEmits(['success', 'close'])
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
||||
const mode = ref('add')
|
||||
const showDialog = ref(false)
|
||||
const personnel = ref(null)
|
||||
|
||||
|
||||
// 弹窗标题
|
||||
const popupTitle = computed(() => {
|
||||
return mode.value == 'edit' ? '编辑人事调动部门记录表' : '新增人事调动部门记录表'
|
||||
})
|
||||
// 弹窗标题
|
||||
const popupTitle = computed(() => {
|
||||
return mode.value == 'edit' ? '编辑人事调动部门记录表' : '新增人事调动部门记录表'
|
||||
})
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
uid: '',
|
||||
user_name: '',
|
||||
from_did: '',
|
||||
to_did: '',
|
||||
remark: '',
|
||||
// admin_id: '',
|
||||
status: '',
|
||||
move_time: '',
|
||||
})
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
uid: '',
|
||||
user_name: '',
|
||||
from_did: '',
|
||||
to_did: '',
|
||||
remark: '',
|
||||
// admin_id: '',
|
||||
status: '',
|
||||
move_time: '',
|
||||
})
|
||||
|
||||
let value;
|
||||
const userclick = async (val) => {
|
||||
showDialog.value = true
|
||||
value = val
|
||||
await nextTick()
|
||||
personnel.value.open()
|
||||
}
|
||||
const submituser = (e: any) => {
|
||||
formData['user_name'] = e.name
|
||||
formData['uid'] = e.id
|
||||
formData.from_did = e.dept_id
|
||||
showDialog.value = false
|
||||
}
|
||||
const chekcDate = (rule: any, value: any, callback: any) => {
|
||||
console.log(formData)
|
||||
if (formData.to_did == formData.from_did) {
|
||||
callback(new Error('不同调入原部门！'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
let value;
|
||||
const userclick = async (val) => {
|
||||
showDialog.value = true
|
||||
value = val
|
||||
await nextTick()
|
||||
personnel.value.open()
|
||||
}
|
||||
const submituser = (e : any) => {
|
||||
console.log(e)
|
||||
formData['user_name'] = e.name
|
||||
formData['uid'] = e.id
|
||||
formData.from_did = e.dept_id
|
||||
showDialog.value = false
|
||||
}
|
||||
const chekcDate = (rule : any, value : any, callback : any) => {
|
||||
if (formData.to_did == formData.from_did) {
|
||||
callback(new Error('不同调入原部门！'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
const formRules = reactive<any>({
|
||||
uid_name: [{
|
||||
required: true,
|
||||
message: '请选择员工',
|
||||
trigger: ['change']
|
||||
}],
|
||||
from_did: [{
|
||||
required: true,
|
||||
message: '请输入原部门id',
|
||||
trigger: ['blur']
|
||||
}],
|
||||
to_did: [{
|
||||
required: true,
|
||||
message: '请输入调到部门id',
|
||||
trigger: ['blur']
|
||||
}, {
|
||||
validator: chekcDate,
|
||||
trigger: ['blur']
|
||||
}
|
||||
],
|
||||
admin_id: [{
|
||||
required: true,
|
||||
message: '请输入创建人',
|
||||
trigger: ['blur']
|
||||
}],
|
||||
// 表单验证
|
||||
const formRules = reactive<any>({
|
||||
uid_name: [{
|
||||
required: true,
|
||||
message: '请选择员工',
|
||||
trigger: ['change']
|
||||
}],
|
||||
from_did: [{
|
||||
required: true,
|
||||
message: '请输入原部门id',
|
||||
trigger: ['blur']
|
||||
}],
|
||||
to_did: [{
|
||||
required: true,
|
||||
message: '请输入调到部门id',
|
||||
trigger: ['blur']
|
||||
}, {
|
||||
validator: chekcDate,
|
||||
trigger: ['blur']
|
||||
}
|
||||
],
|
||||
admin_id: [{
|
||||
required: true,
|
||||
message: '请输入创建人',
|
||||
trigger: ['blur']
|
||||
}],
|
||||
|
||||
move_time: [{
|
||||
required: true,
|
||||
message: '请输入调动时间',
|
||||
trigger: ['blur']
|
||||
}]
|
||||
})
|
||||
move_time: [{
|
||||
required: true,
|
||||
message: '请输入调动时间',
|
||||
trigger: ['blur']
|
||||
}]
|
||||
})
|
||||
|
||||
|
||||
// 获取详情
|
||||
const setFormData = async (data: Record<any, any>) => {
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
// 获取详情
|
||||
const setFormData = async (data : Record<any, any>) => {
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getDetail = async (row : Record<string, any>) => {
|
||||
const data = await apiOaDepartmentChangeDetail({
|
||||
id: row.id
|
||||
})
|
||||
setFormData(data)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
// 提交按钮
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
const data = { ...formData, }
|
||||
mode.value == 'edit'
|
||||
? await apiOaDepartmentChangeEdit(data)
|
||||
: await apiOaDepartmentChangeAdd(data)
|
||||
popupRef.value?.close()
|
||||
emit('success')
|
||||
}
|
||||
|
||||
const getDetail = async (row: Record<string, any>) => {
|
||||
const data = await apiOaDepartmentChangeDetail({
|
||||
id: row.id
|
||||
})
|
||||
setFormData(data)
|
||||
}
|
||||
//打开弹窗
|
||||
const open = (type = 'add') => {
|
||||
mode.value = type
|
||||
popupRef.value?.open()
|
||||
}
|
||||
|
||||
// 关闭回调
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
// 提交按钮
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
const data = { ...formData, }
|
||||
mode.value == 'edit'
|
||||
? await apiOaDepartmentChangeEdit(data)
|
||||
: await apiOaDepartmentChangeAdd(data)
|
||||
popupRef.value?.close()
|
||||
emit('success')
|
||||
}
|
||||
|
||||
//打开弹窗
|
||||
const open = (type = 'add') => {
|
||||
mode.value = type
|
||||
popupRef.value?.open()
|
||||
}
|
||||
|
||||
// 关闭回调
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
setFormData,
|
||||
getDetail
|
||||
})
|
||||
</script>
|
||||
defineExpose({
|
||||
open,
|
||||
setFormData,
|
||||
getDetail
|
||||
})
|
||||
</script>
|
||||
@ -121,7 +121,7 @@ const handleDelete = async (id: number | any[]) => {
|
||||
const deptList = ref([])
|
||||
const getDeptList = async () => {
|
||||
const res = await deptLists()
|
||||
deptList.value = res.lists
|
||||
deptList.value = res
|
||||
}
|
||||
getDeptList()
|
||||
getLists()
|
||||
|
||||
@ -130,7 +130,7 @@ const handleDelete = async (id: number | any[]) => {
|
||||
const deptList = ref([])
|
||||
const getDeptList = async () => {
|
||||
const res = await deptLists()
|
||||
deptList.value = res.lists
|
||||
deptList.value = res
|
||||
}
|
||||
getDeptList()
|
||||
getLists()
|
||||
|
||||
@ -134,7 +134,7 @@ const formData = reactive({
|
||||
title: "",
|
||||
name: "",
|
||||
icon: "",
|
||||
department_ids: "",
|
||||
department_ids: [],
|
||||
data: [
|
||||
{
|
||||
"type": '0',
|
||||
@ -194,6 +194,7 @@ const setFormData = async (data: Record<any, any>) => {
|
||||
}
|
||||
}
|
||||
formData.department_ids = formData.department_ids.split(",").map(Number);
|
||||
console.log(formData.department_ids)
|
||||
};
|
||||
|
||||
const getDetail = async (row: Record<string, any>) => {
|
||||
|
||||
@ -138,7 +138,7 @@ const handleDelete = async (id: number | any[]) => {
|
||||
const deptList = ref([])
|
||||
const getDeptList = async () => {
|
||||
const res = await deptLists()
|
||||
deptList.value = res.lists
|
||||
deptList.value = res
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit" @close="handleClose">
|
||||
<el-form ref="formRef" :model="formData" label-width="110px" :rules="formRules">
|
||||
<el-form-item label="离职员工" prop="uid_name">
|
||||
<el-input v-model="formData.uid_name" clearable placeholder="点击选择" @click="userclick('uid', 1)" />
|
||||
<el-input v-model="formData.uid_name" clearable placeholder="点击选择" @click="userclick('uid', 'uid_name', 1)" />
|
||||
</el-form-item>
|
||||
<el-form-item label="离职日期" prop="quit_time">
|
||||
<el-date-picker v-model="formData.quit_time" value-format="YYYY-MM-DD" placeholder="选择日期"
|
||||
@ -11,11 +11,11 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="部门负责人" prop="lead_admin_id">
|
||||
<el-input v-model="formData.lead_admin_name" clearable placeholder="点击选择"
|
||||
@click="userclick('lead_admin', 1)" />
|
||||
@click="userclick('lead_admin_id', 'lead_admin_name', 1)" />
|
||||
</el-form-item>
|
||||
<el-form-item label="资料交接人" prop="connect_id">
|
||||
<el-input v-model="formData.connect_name" clearable placeholder="点击选择"
|
||||
@click="userclick('connect', 1)" />
|
||||
@click="userclick('connect_id', 'connect_name', 1)" />
|
||||
</el-form-item>
|
||||
<el-form-item label="资料交接时间" prop="connect_time">
|
||||
<el-date-picker v-model="formData.connect_time" value-format="YYYY-MM-DD" placeholder="请选择资料交接时间"
|
||||
@ -23,7 +23,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="参与交接人" prop="connect_uids">
|
||||
<el-input v-model="formData.connect_names" clearable placeholder="点击选择"
|
||||
@click="userclick('connect_uids', 2)" />
|
||||
@click="userclick('connect_uids', 'connect_names', 2)" />
|
||||
</el-form-item>
|
||||
<el-form-item label="离职原因">
|
||||
<el-input v-model="formData.remark" type="textarea" clearable placeholder="请输入备注" />
|
||||
@ -80,17 +80,19 @@ const formData = reactive({
|
||||
|
||||
let personnelType = ref('1')
|
||||
let value;
|
||||
const userclick = async (val, type) => {
|
||||
let formLabel;
|
||||
const userclick = async (field, label, type) => {
|
||||
personnelType.value = type
|
||||
showDialog.value = true
|
||||
value = val
|
||||
value = field
|
||||
formLabel = label
|
||||
await nextTick()
|
||||
personnel.value.open()
|
||||
}
|
||||
const submituser = (e: any) => {
|
||||
if (personnelType.value == '1') {
|
||||
formData[value + '_name'] = e.name
|
||||
formData[value + "_id"] = String(e.id)
|
||||
formData[formLabel] = e.name
|
||||
formData[value] = String(e.id)
|
||||
} else {
|
||||
formData.connect_uids = e.map((item: any) => {
|
||||
return item.id
|
||||
@ -99,6 +101,7 @@ const submituser = (e: any) => {
|
||||
return item.name
|
||||
}).join(',')
|
||||
}
|
||||
console.log(formData);
|
||||
showDialog.value = false
|
||||
}
|
||||
|
||||
@ -203,7 +206,6 @@ const setFormData = async (data: Record<any, any>) => {
|
||||
formData.uid_name = data.user_name
|
||||
formData.connect_names = data.connect_users
|
||||
formData.connect_name = data.connect_user_name
|
||||
formData.uid_id = formData.uid
|
||||
}
|
||||
|
||||
const getDetail = async (row: Record<string, any>) => {
|
||||
@ -215,9 +217,6 @@ const getDetail = async (row: Record<string, any>) => {
|
||||
|
||||
// 提交按钮
|
||||
const handleSubmit = async () => {
|
||||
formData.uid = formData.uid_id
|
||||
delete formData.uid_id
|
||||
console.log(formData)
|
||||
await formRef.value?.validate()
|
||||
const data = { ...formData, }
|
||||
mode.value == 'edit'
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<el-form-item label="工作安排主题" prop="title">
|
||||
<el-input class="w-[280px]" v-model="queryParams.title" clearable placeholder="请输入工作安排主题" />
|
||||
</el-form-item>
|
||||
<el-form-item label="日程优先级" prop="type">
|
||||
<el-form-item label="日程优先级" prop="type" class="w-[260px]">
|
||||
<el-select v-model="queryParams.type" clearable placeholder="请选择日程优先级" class="flex-1">
|
||||
<el-option label="紧急" :value="4" />
|
||||
<el-option label="重要" :value="3" />
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<el-form-item label="工作记录主题" prop="title">
|
||||
<el-input class="w-[280px]" v-model="queryParams.title" clearable placeholder="请输入工作记录主题" />
|
||||
</el-form-item>
|
||||
<el-form-item label="工作类型" prop="labor_type">
|
||||
<el-form-item label="工作类型" prop="labor_type" class="w-[260px]">
|
||||
<el-select v-model="queryParams.labor_type" clearable placeholder="请选择工作类型" class="flex-1">
|
||||
<el-option label="案头工作" :value="1" />
|
||||
<el-option label="外勤工作" :value="2" />
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<el-form class="mb-[-16px] mt-5" :model="queryParams" inline>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<!-- <el-form class="mb-[-16px] mt-5" :model="queryParams" inline>
|
||||
<el-form-item label="类型" prop="type" class="w-[260px]">
|
||||
<el-select v-model="queryParams.type" clearable placeholder="请选择类型" class="flex-1">
|
||||
<el-option label="月报" :value="3" />
|
||||
<el-option label="周报" :value="2" />
|
||||
@ -11,7 +11,7 @@
|
||||
<el-button type="primary" @click="resetPage">查询</el-button>
|
||||
<el-button @click="resetParams">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-form> -->
|
||||
<div class="mt-4">
|
||||
<el-button v-perms="['works.rcbg.oa_work/delete']" :disabled="!selectData.length" @click="handleDelete(selectData)">
|
||||
删除
|
||||
@ -86,6 +86,7 @@ const handleAdd = async () => {
|
||||
// 编辑
|
||||
const handleEdit = async (data: any) => {
|
||||
let res = await apiOaWorkrecordDetail({ id: data.id })
|
||||
console.log(res);
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
editRef.value?.open('edit')
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<el-form class="mb-[-16px] mt-5" :model="queryParams" inline>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-form-item label="类型" prop="type" class="w-[260px]">
|
||||
<el-select v-model="queryParams.type" clearable placeholder="请选择类型" class="flex-1">
|
||||
<el-option label="月报" :value="3" />
|
||||
<el-option label="周报" :value="2" />
|
||||
|
||||
@ -42,9 +42,6 @@ import { timeFormat } from "@/utils/util";
|
||||
import type { PropType } from "vue";
|
||||
import useUserStore from "@/stores/modules/user";
|
||||
|
||||
|
||||
|
||||
|
||||
defineProps({
|
||||
dictData: {
|
||||
type: Object as PropType<Record<string, any[]>>,
|
||||
|
||||
@ -1,161 +1,162 @@
|
||||
<template>
|
||||
<div class="edit-popup">
|
||||
<popup
|
||||
ref="popupRef"
|
||||
:title="popupTitle"
|
||||
:async="true"
|
||||
width="550px"
|
||||
@confirm="handleSubmit"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" label-width="84px" :rules="formRules">
|
||||
<el-form-item label="上级部门" prop="pid" v-if="formData.pid !== 0">
|
||||
<el-tree-select
|
||||
class="flex-1"
|
||||
v-model="formData.pid"
|
||||
:data="optionsData.dept"
|
||||
clearable
|
||||
node-key="id"
|
||||
:props="{
|
||||
<div class="edit-popup">
|
||||
<popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit"
|
||||
@close="handleClose">
|
||||
<el-form ref="formRef" :model="formData" label-width="84px" :rules="formRules">
|
||||
<el-form-item label="上级部门" prop="pid" v-if="formData.pid !== 0">
|
||||
<el-tree-select class="flex-1" v-model="formData.pid" :data="optionsData.dept" clearable
|
||||
node-key="id" :props="{
|
||||
value: 'id',
|
||||
label: 'name'
|
||||
}"
|
||||
check-strictly
|
||||
:default-expand-all="true"
|
||||
placeholder="请选择上级部门"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门名称" prop="name">
|
||||
<el-input
|
||||
v-model="formData.name"
|
||||
placeholder="请输入部门名称"
|
||||
:maxlength="100"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" prop="leader">
|
||||
<el-input
|
||||
v-model="formData.leader"
|
||||
placeholder="请输入负责人姓名"
|
||||
:maxlength="30"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="mobile">
|
||||
<el-input v-model="formData.mobile" placeholder="请输入联系电话" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<div>
|
||||
<el-input-number v-model="formData.sort" :min="0" :max="9999" />
|
||||
<div class="form-tips">默认为0， 数值越大越排前</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门状态">
|
||||
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</popup>
|
||||
</div>
|
||||
}" check-strictly :default-expand-all="true" placeholder="请选择上级部门" />
|
||||
</el-form-item>
|
||||
<el-form-item label="部门名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入部门名称" :maxlength="100" />
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" prop="leader_id">
|
||||
<el-select v-model="formData.leader_id" filterable remote reserve-keyword placeholder="输入负责人姓名搜索"
|
||||
remote-show-suffix :remote-method="remoteMethod" :loading="loading" style="width: 240px">
|
||||
<el-option v-for="item in adminList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="mobile">
|
||||
<el-input v-model="formData.mobile" placeholder="请输入联系电话" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<div>
|
||||
<el-input-number v-model="formData.sort" :min="0" :max="9999" />
|
||||
<div class="form-tips">默认为0， 数值越大越排前</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门状态">
|
||||
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</popup>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { deptEdit, deptAdd, deptDetail, deptAll } from '@/api/org/department'
|
||||
import Popup from '@/components/popup/index.vue'
|
||||
import { useDictOptions } from '@/hooks/useDictOptions'
|
||||
const emit = defineEmits(['success', 'close'])
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
||||
const mode = ref('add')
|
||||
const popupTitle = computed(() => {
|
||||
return mode.value == 'edit' ? '编辑部门' : '新增部门'
|
||||
})
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
pid: '' as string | number,
|
||||
name: '',
|
||||
leader: '',
|
||||
mobile: '',
|
||||
sort: 0,
|
||||
status: 1
|
||||
})
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { deptEdit, deptAdd, deptDetail, deptAll } from '@/api/org/department'
|
||||
import { adminAll, adminLists } from '@/api/perms/admin'
|
||||
import Popup from '@/components/popup/index.vue'
|
||||
import { useDictOptions } from '@/hooks/useDictOptions'
|
||||
const emit = defineEmits(['success', 'close'])
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
||||
const mode = ref('add')
|
||||
const popupTitle = computed(() => {
|
||||
return mode.value == 'edit' ? '编辑部门' : '新增部门'
|
||||
})
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
pid: '' as string | number,
|
||||
name: '',
|
||||
leader: '',
|
||||
leader_id: '',
|
||||
mobile: '',
|
||||
sort: 0,
|
||||
status: 1
|
||||
})
|
||||
|
||||
const checkMobile = (rule: any, value: any, callback: any) => {
|
||||
if (!value) {
|
||||
return callback()
|
||||
} else {
|
||||
const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
|
||||
console.log(reg.test(value))
|
||||
if (reg.test(value)) {
|
||||
callback()
|
||||
} else {
|
||||
return callback(new Error('请输入正确的手机号'))
|
||||
}
|
||||
}
|
||||
}
|
||||
const formRules = {
|
||||
pid: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择上级部门',
|
||||
trigger: ['change']
|
||||
}
|
||||
],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入部门名称',
|
||||
trigger: ['blur']
|
||||
}
|
||||
],
|
||||
mobile: [
|
||||
{
|
||||
validator: checkMobile,
|
||||
trigger: ['blur']
|
||||
}
|
||||
]
|
||||
}
|
||||
const loading = ref(false)
|
||||
const adminList = ref([])
|
||||
const remoteMethod = (e = '') => {
|
||||
loading.value = true
|
||||
adminLists({
|
||||
name: e,
|
||||
page_size: 50
|
||||
}).then((res) => {
|
||||
adminList.value = res.lists
|
||||
console.log(adminList);
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 300)
|
||||
}).catch((err) => {
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
const { optionsData } = useDictOptions<{
|
||||
dept: any[]
|
||||
}>({
|
||||
dept: {
|
||||
api: deptAll
|
||||
}
|
||||
})
|
||||
const checkMobile = (rule : any, value : any, callback : any) => {
|
||||
if (!value) {
|
||||
return callback()
|
||||
} else {
|
||||
const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
|
||||
if (reg.test(value)) {
|
||||
callback()
|
||||
} else {
|
||||
return callback(new Error('请输入正确的手机号'))
|
||||
}
|
||||
}
|
||||
}
|
||||
const formRules = {
|
||||
pid: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择上级部门',
|
||||
trigger: ['change']
|
||||
}
|
||||
],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入部门名称',
|
||||
trigger: ['blur']
|
||||
}
|
||||
],
|
||||
mobile: [
|
||||
{
|
||||
validator: checkMobile,
|
||||
trigger: ['blur']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
mode.value == 'edit' ? await deptEdit(formData) : await deptAdd(formData)
|
||||
popupRef.value?.close()
|
||||
emit('success')
|
||||
}
|
||||
const { optionsData } = useDictOptions<{
|
||||
dept : any[]
|
||||
}>({
|
||||
dept: {
|
||||
api: deptAll
|
||||
}
|
||||
})
|
||||
|
||||
const open = (type = 'add') => {
|
||||
mode.value = type
|
||||
popupRef.value?.open()
|
||||
}
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
mode.value == 'edit' ? await deptEdit(formData) : await deptAdd(formData)
|
||||
popupRef.value?.close()
|
||||
emit('success')
|
||||
}
|
||||
|
||||
const setFormData = (data: Record<any, any>) => {
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
const open = (type = 'add') => {
|
||||
mode.value = type
|
||||
popupRef.value?.open()
|
||||
}
|
||||
|
||||
const getDetail = async (row: Record<string, any>) => {
|
||||
const data = await deptDetail({
|
||||
id: row.id
|
||||
})
|
||||
setFormData(data)
|
||||
}
|
||||
const setFormData = (data : Record<any, any>) => {
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
const getDetail = async (row : Record<string, any>) => {
|
||||
const data = await deptDetail({
|
||||
id: row.id
|
||||
})
|
||||
setFormData(data)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
setFormData,
|
||||
getDetail
|
||||
})
|
||||
</script>
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
setFormData,
|
||||
getDetail
|
||||
})
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user