优化菜单结构
This commit is contained in:
@@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<a-page-header title="提交工单" @back="push('/system/my-task')">
|
||||
<a-card class="ele-body">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 14 }, sm: { span: 24 }, xs: { span: 24 } }"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 9, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="标题" name="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="50"
|
||||
placeholder="请输入工单标题"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="联系方式" name="phone">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- :maxlength="11"-->
|
||||
<!-- placeholder="请输入手机号码"-->
|
||||
<!-- v-model:value="form.phone"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 9, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="工单类型" name="taskType">
|
||||
<a-select
|
||||
optionFilterProp="label"
|
||||
placeholder="请选择工单类型"
|
||||
:options="taskType"
|
||||
allow-clear
|
||||
v-model:value="form.taskType"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 24, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="问题描述" name="content">
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-editor
|
||||
v-model:value="content"
|
||||
placeholder="请描述您的问题，支持图片粘贴"
|
||||
:locale="zh_Hans"
|
||||
:plugins="plugins"
|
||||
mode="tab"
|
||||
height="300px"
|
||||
maxLength="500"
|
||||
:editorConfig="{ lineNumbers: true }"
|
||||
@paste="onPaste"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="机密信息（选填）" name="files">
|
||||
<a-textarea :rows="4" v-model:value="form.confidential" placeholder="请在此处填写项目名、账号、密码等机密信息，提交后机密信息将做加密处理"></a-textarea>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-form-item>
|
||||
<a-button type="primary" block size="large" @click="save">提交</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// 表单数据
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { Task } from '@/api/oa/task/model';
|
||||
import {reactive, ref, unref, watch} from "vue";
|
||||
import { FormInstance, Rule, RuleObject } from "ant-design-vue/es/form";
|
||||
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
|
||||
import { uploadFile, uploadOss } from "@/api/system/file";
|
||||
import { Form, message } from "ant-design-vue";
|
||||
import gfm from "@bytemd/plugin-gfm";
|
||||
import CryptoJS from 'crypto-js';
|
||||
// 中文语言文件
|
||||
import zh_Hans from 'bytemd/locales/zh_Hans.json';
|
||||
import zh_HansGfm from "@bytemd/plugin-gfm/locales/zh_Hans.json";
|
||||
import highlight from "@bytemd/plugin-highlight";
|
||||
import { encrypt, getDictionaryOptions, getMobile, isImage, openUrl } from "@/utils/common";
|
||||
import { addTask } from "@/api/oa/task";
|
||||
import { isPhone } from "ele-admin-pro";
|
||||
import { useUserStore } from "@/store/modules/user";
|
||||
import { useParamsStore } from "@/store/modules/params";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useThemeStore } from "@/store/modules/theme";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { User } from "@/api/system/user/model";
|
||||
import { App } from "@/api/oa/app/model";
|
||||
|
||||
const { currentRoute } = useRouter();
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const userStore = useUserStore();
|
||||
const { info } = userStore;
|
||||
const paramsStore = useParamsStore();
|
||||
const { push } = useRouter();
|
||||
const useForm = Form.useForm;
|
||||
const taskType = [ { "key": "售前咨询", "value": "售前咨询", "label": "售前咨询", "comments": "" }, { "key": "售后服务", "value": "售后服务", "label": "售后服务", "comments": "" }, { "key": "技术支持", "value": "技术支持", "label": "技术支持", "comments": "" }, { "key": "经验分享", "value": "经验分享", "label": "经验分享", "comments": "" }, { "key": "意见反馈", "value": "意见反馈", "label": "意见反馈", "comments": "" } ] ;
|
||||
const fileList = ref<any[]>([]);
|
||||
const files = ref<ItemType[]>([]);
|
||||
const phone = ref('');
|
||||
const content = ref('');
|
||||
const loading = ref(false);
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
const { form, resetFields, assignFields } = useFormData<Task>({
|
||||
taskId: undefined,
|
||||
taskType: undefined,
|
||||
phone: info?.phone,
|
||||
name: undefined,
|
||||
status: undefined,
|
||||
promoter: undefined,
|
||||
comments: '',
|
||||
redirect: '',
|
||||
appId: undefined,
|
||||
appName: '',
|
||||
confidential: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
taskType: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择工单类型',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
content: [
|
||||
{
|
||||
required: true,
|
||||
type: "string",
|
||||
message: "请填写问题描述",
|
||||
trigger: "blur",
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (content.value == "") {
|
||||
return Promise.reject("请填写问题描述");
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入工单标题'
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入正确的手机号码',
|
||||
type: 'string',
|
||||
trigger: 'blur',
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (!isPhone(value)) {
|
||||
return Promise.reject("请输入正确的手机号码");
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
],
|
||||
sortNumber: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入排序号',
|
||||
type: 'number',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
// 文件上传事件
|
||||
const beforeUpload = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
}
|
||||
if (!file.type.startsWith("image")) {
|
||||
if (file.size / 1024 / 1024 > 100) {
|
||||
message.error("大小不能超过 100MB");
|
||||
return;
|
||||
}
|
||||
}
|
||||
onUpload(item);
|
||||
return false;
|
||||
};
|
||||
|
||||
const onUpload = (d: ItemType) => {
|
||||
uploadOss(<File>d.file)
|
||||
.then((result) => {
|
||||
files.value.push({
|
||||
uid: result.id,
|
||||
url: result.path,
|
||||
name: isImage(result.path) ? 'image' : result.name,
|
||||
status: "done"
|
||||
});
|
||||
message.success("上传成功");
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 粘贴图片上传服务器并插入编辑器 */
|
||||
const onPaste = (e) => {
|
||||
const items = (e.clipboardData || e.originalEvent.clipboardData).items;
|
||||
let hasFile = false;
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (items[i].type.indexOf('image') !== -1) {
|
||||
let file = items[i].getAsFile();
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).lastModified,
|
||||
name: file.name
|
||||
};
|
||||
uploadOss(<File>item.file)
|
||||
.then((result) => {
|
||||
const addPath = '\n\r';
|
||||
content.value = content.value + addPath
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
hasFile = true;
|
||||
}
|
||||
}
|
||||
if (hasFile) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择应用
|
||||
* @param item
|
||||
*/
|
||||
const chooseApp = (item: App) => {
|
||||
form.appId = item.appId;
|
||||
form.appName = item.appName;
|
||||
};
|
||||
|
||||
const {validate, validateInfos} = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
if (!isPhone(String(form.phone))) {
|
||||
message.error(form.phone)
|
||||
return false
|
||||
}
|
||||
const data = {
|
||||
...form,
|
||||
// 处理工单内容
|
||||
content: content.value,
|
||||
files: JSON.stringify(files.value)
|
||||
};
|
||||
// 加密信息处理
|
||||
if(form.confidential != ''){
|
||||
data.confidential = encrypt(form.confidential)
|
||||
}else {
|
||||
data.confidential = undefined
|
||||
}
|
||||
addTask(data)
|
||||
.then((res) => {
|
||||
loading.value = false;
|
||||
content.value = '';
|
||||
files.value = [];
|
||||
paramsStore.setBack('/system/my-task')
|
||||
paramsStore.setRedirect('/system/my-task/detail/' + res?.taskId);
|
||||
setTimeout(() => {
|
||||
openUrl('/result/success');
|
||||
},200)
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
watch(
|
||||
currentRoute,
|
||||
(route) => {
|
||||
const { query } = unref(route);
|
||||
const { appId,appName } = query;
|
||||
if (appId) {
|
||||
form.appId = Number(appId);
|
||||
form.appName = String(appName);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'TaskAdd'
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,154 @@
|
||||
<!-- 项目进度 -->
|
||||
<template>
|
||||
<a-card
|
||||
title="全部待处理"
|
||||
:bordered="false"
|
||||
:body-style="{ padding: '14px', height: '315px' }"
|
||||
>
|
||||
<template #extra>
|
||||
<more-icon @remove="onRemove" @edit="onEdit" />
|
||||
</template>
|
||||
<a-table
|
||||
row-key="taskId"
|
||||
size="middle"
|
||||
:pagination="false"
|
||||
:customRow="customRow"
|
||||
:data-source="taskList"
|
||||
:columns="taskColumns"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'content'">
|
||||
<a @click="openUrl('/oa/task/detail/' + record.taskId)">{{
|
||||
record.content
|
||||
}}</a>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-tag v-if="record.progress === TOBEARRANGED" color="red"
|
||||
>待安排</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === PENDING" color="orange"
|
||||
>待处理</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === PROCESSING" color="purple"
|
||||
>处理中</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === TOBECONFIRMED" color="cyan"
|
||||
>待评价</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === COMPLETED" color="green"
|
||||
>已完成</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === CLOSED">已关闭</a-tag>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'progress'">
|
||||
<a-progress :percent="record.progress * 2" :steps="5" />
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import type { ColumnsType } from 'ant-design-vue/es/table';
|
||||
import { pageTask } from '@/api/oa/task';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import type { Task } from '@/api/oa/task/model';
|
||||
import {
|
||||
CLOSED,
|
||||
COMPLETED,
|
||||
PENDING,
|
||||
PROCESSING,
|
||||
TOBEARRANGED,
|
||||
TOBECONFIRMED
|
||||
} from '@/api/oa/task/model/progress';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'remove'): void;
|
||||
(e: 'edit'): void;
|
||||
}>();
|
||||
|
||||
const taskColumns = ref<ColumnsType>([
|
||||
{
|
||||
key: 'index',
|
||||
align: 'center',
|
||||
width: 48,
|
||||
customRender: ({ index }) => index + 1,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
title: '工单类型',
|
||||
dataIndex: 'taskType',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '问题描述',
|
||||
dataIndex: 'content',
|
||||
key: 'content',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '问题描述',
|
||||
dataIndex: 'content',
|
||||
key: 'content',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
}
|
||||
]);
|
||||
|
||||
// 项目进度数据
|
||||
const taskList = ref<Task[]>([]);
|
||||
|
||||
/* 查询项目进度 */
|
||||
const queryTaskList = () => {
|
||||
pageTask({ limit: 5, status: 0 }).then((data) => {
|
||||
if (data) {
|
||||
taskList.value = data.list;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onRemove = () => {
|
||||
emit('remove');
|
||||
};
|
||||
|
||||
const onEdit = () => {
|
||||
emit('edit');
|
||||
};
|
||||
|
||||
queryTaskList();
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Task) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
window.open('/oa/task/detail/' + record.taskId);
|
||||
// openInfo(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,153 @@
|
||||
<!-- 项目进度 -->
|
||||
<template>
|
||||
<a-card
|
||||
title="待处理工单"
|
||||
:bordered="false"
|
||||
:body-style="{ padding: '14px', height: '315px' }"
|
||||
>
|
||||
<template #extra>
|
||||
<more-icon @remove="onRemove" @edit="onEdit" />
|
||||
</template>
|
||||
<a-table
|
||||
row-key="taskId"
|
||||
size="middle"
|
||||
:pagination="false"
|
||||
:customRow="customRow"
|
||||
:data-source="taskList"
|
||||
:columns="taskColumns"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'content'">
|
||||
<a @click="openUrl('/oa/task/detail/' + record.taskId)">{{
|
||||
record.content
|
||||
}}</a>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-tag v-if="record.progress === TOBEARRANGED" color="red"
|
||||
>待安排</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === PENDING" color="orange"
|
||||
>待处理</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === PROCESSING" color="purple"
|
||||
>处理中</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === TOBECONFIRMED" color="cyan"
|
||||
>待评价</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === COMPLETED" color="green"
|
||||
>已完成</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === CLOSED">已关闭</a-tag>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'progress'">
|
||||
<a-progress :percent="record.progress * 2" :steps="5" />
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import type { ColumnsType } from 'ant-design-vue/es/table';
|
||||
import { pageTask } from '@/api/oa/task';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import type { Task } from '@/api/oa/task/model';
|
||||
import {
|
||||
CLOSED,
|
||||
COMPLETED,
|
||||
PENDING,
|
||||
PROCESSING,
|
||||
TOBEARRANGED,
|
||||
TOBECONFIRMED
|
||||
} from '@/api/oa/task/model/progress';
|
||||
import { EleProTable, toDateString } from 'ele-admin-pro';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'remove'): void;
|
||||
(e: 'edit'): void;
|
||||
}>();
|
||||
|
||||
const taskColumns = ref<ColumnsType>([
|
||||
{
|
||||
key: 'index',
|
||||
align: 'center',
|
||||
width: 48,
|
||||
customRender: ({ index }) => index + 1,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
title: '工单类型',
|
||||
dataIndex: 'taskType',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '问题描述',
|
||||
dataIndex: 'content',
|
||||
key: 'content',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
}
|
||||
]);
|
||||
|
||||
// 项目进度数据
|
||||
const taskList = ref<Task[]>([]);
|
||||
|
||||
/* 查询项目进度 */
|
||||
const queryTaskList = () => {
|
||||
const userStore = useUserStore();
|
||||
const { info } = storeToRefs(userStore);
|
||||
const userId = info.value?.userId;
|
||||
pageTask({ limit: 5, status: 0, userId }).then((data) => {
|
||||
if (data) {
|
||||
taskList.value = data.list;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onRemove = () => {
|
||||
emit('remove');
|
||||
};
|
||||
|
||||
const onEdit = () => {
|
||||
emit('edit');
|
||||
};
|
||||
|
||||
queryTaskList();
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Task) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
window.open('/oa/task/detail/' + record.taskId);
|
||||
// openInfo(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<a-card :bordered="false" title="用户评价" :body-style="{ padding: '14px', height: '315px' }">
|
||||
<div class="ele-cell ele-cell-align-bottom">
|
||||
<div style="font-size: 51px; line-height: 1">4.5</div>
|
||||
<div class="ele-cell-content">
|
||||
<a-rate :value="userRate" disabled />
|
||||
<span style="color: #fadb14; margin-left: 8px">很棒</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell" style="margin: 18px 0">
|
||||
<div style="font-size: 28px; line-height: 1" class="ele-text-placeholder">
|
||||
-0%
|
||||
</div>
|
||||
<div class="ele-cell-content ele-text-small ele-text-secondary">
|
||||
当前没有评价波动
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<a-progress :percent="60" stroke-color="#52c41a" :show-info="false" />
|
||||
</div>
|
||||
<div class="monitor-evaluate-text">
|
||||
<star-filled />
|
||||
<span>5 : 368 人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<a-progress :percent="40" stroke-color="#1890ff" :show-info="false" />
|
||||
</div>
|
||||
<div class="monitor-evaluate-text">
|
||||
<star-filled />
|
||||
<span>4 : 256 人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<a-progress :percent="20" stroke-color="#faad14" :show-info="false" />
|
||||
</div>
|
||||
<div class="monitor-evaluate-text">
|
||||
<star-filled />
|
||||
<span>3 : 49 人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<a-progress :percent="10" stroke-color="#f5222d" :show-info="false" />
|
||||
</div>
|
||||
<div class="monitor-evaluate-text">
|
||||
<star-filled />
|
||||
<span>2 : 14 人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<a-progress :percent="0" :show-info="false" />
|
||||
</div>
|
||||
<div class="monitor-evaluate-text">
|
||||
<star-filled />
|
||||
<span>1 : 0 人</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { StarFilled } from '@ant-design/icons-vue';
|
||||
|
||||
// 用户评分
|
||||
const userRate = ref(4.5);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.monitor-evaluate-text {
|
||||
width: 90px;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
opacity: 0.8;
|
||||
|
||||
& > .anticon {
|
||||
font-size: 12px;
|
||||
margin: 0 6px 0 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<a-card :bordered="false" title="用户满意度" :body-style="{ padding: '14px', height: '315px' }">
|
||||
<div class="ele-cell ele-text-center">
|
||||
<div class="ele-cell-content" style="font-size: 24px">856</div>
|
||||
<div class="ele-cell-content">
|
||||
<div class="monitor-face-smile"><i></i></div>
|
||||
<div class="ele-text-secondary ele-elip" style="margin-top: 8px">
|
||||
正面评论
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="ele-cell-content ele-text-success">82%</h2>
|
||||
</div>
|
||||
<a-divider style="margin: 26px 0" />
|
||||
<div class="ele-cell ele-text-center">
|
||||
<div class="ele-cell-content" style="font-size: 24px">60</div>
|
||||
<div class="ele-cell-content">
|
||||
<div class="monitor-face-cry"><i></i></div>
|
||||
<div class="ele-text-secondary ele-elip" style="margin-top: 8px">
|
||||
负面评论
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="ele-cell-content ele-text-danger">9%</h2>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.monitor-face-smile,
|
||||
.monitor-face-cry {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
background: #fbd971;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.monitor-face-smile > i,
|
||||
.monitor-face-smile:before,
|
||||
.monitor-face-smile:after,
|
||||
.monitor-face-cry > i,
|
||||
.monitor-face-cry:before,
|
||||
.monitor-face-cry:after {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
transform: rotate(225deg);
|
||||
border: 3px solid #f0c419;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 11px;
|
||||
}
|
||||
|
||||
.monitor-face-smile:before,
|
||||
.monitor-face-smile:after,
|
||||
.monitor-face-cry:before,
|
||||
.monitor-face-cry:after {
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
left: 8px;
|
||||
top: 14px;
|
||||
border-color: #f29c1f;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.monitor-face-smile:after,
|
||||
.monitor-face-cry:after {
|
||||
left: auto;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.monitor-face-cry > i {
|
||||
transform: rotate(45deg);
|
||||
bottom: -6px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="400"
|
||||
:visible="visible"
|
||||
:title="`工单号：${taskId}`"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
:footer="null"
|
||||
@ok="save"
|
||||
>
|
||||
<div
|
||||
class="qrcode-list"
|
||||
style="display: flex; justify-content: space-around"
|
||||
>
|
||||
<div>
|
||||
<img :src="qrcode" width="240" height="240" />
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 26px;
|
||||
padding-top: 20px;
|
||||
"
|
||||
>微信扫一扫</div
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</ele-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', user: User): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const qrcode = ref('https://file.jimeigroup.cn/reg-code3/hgkghiji.png');
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<User>({
|
||||
userId: undefined,
|
||||
nickname: undefined
|
||||
});
|
||||
|
||||
const chooseUser = (item: User) => {
|
||||
form.userId = item.userId;
|
||||
form.nickname = item.nickname;
|
||||
};
|
||||
|
||||
const save = () => {
|
||||
emit('done', form);
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less"></style>
|
||||
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-row :gutter="16">
|
||||
<a-col v-bind="styleResponsive ? { md: 6, sm: 24, xs: 24 } : { span: 8 }">
|
||||
<a-card class="analysis-chart-card" :bordered="false">
|
||||
<div class="ele-text-secondary ele-cell">
|
||||
<div class="ele-cell-content">待处理</div>
|
||||
</div>
|
||||
<h1 class="ele-text-danger">
|
||||
{{ pendingCount }}
|
||||
</h1>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col v-bind="styleResponsive ? { md: 6, sm: 24, xs: 24 } : { span: 8 }">
|
||||
<a-card class="analysis-chart-card" :bordered="false">
|
||||
<div class="ele-text-secondary ele-cell">
|
||||
<div class="ele-cell-content">今日处理</div>
|
||||
<ele-tag color="red">日</ele-tag>
|
||||
</div>
|
||||
<h1 class="analysis-chart-card-num">{{ todayCount }}</h1>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col v-bind="styleResponsive ? { md: 6, sm: 24, xs: 24 } : { span: 8 }">
|
||||
<a-card class="analysis-chart-card" :bordered="false">
|
||||
<div class="ele-text-secondary ele-cell">
|
||||
<div class="ele-cell-content">本月处理</div>
|
||||
<ele-tag color="blue">月</ele-tag>
|
||||
</div>
|
||||
<h1 class="analysis-chart-card-num">{{ monthCount }}</h1>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col v-bind="styleResponsive ? { md: 6, sm: 24, xs: 24 } : { span: 8 }">
|
||||
<a-card class="analysis-chart-card" :bordered="false">
|
||||
<div class="ele-text-secondary ele-cell">
|
||||
<div class="ele-cell-content">今年处理</div>
|
||||
<ele-tag color="green">年</ele-tag>
|
||||
</div>
|
||||
<h1 class="analysis-chart-card-num">{{ yearCount }}</h1>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 12, lg: 12, md: 12, sm: 12, xs: 24 }
|
||||
: { span: 6 }
|
||||
"
|
||||
>
|
||||
<CountPendingAll />
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 6, lg: 24, md: 24, sm: 24, xs: 24 }
|
||||
: { span: 12 }
|
||||
"
|
||||
>
|
||||
<CountRate />
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 6, lg: 12, md: 12, sm: 12, xs: 24 }
|
||||
: { span: 6 }
|
||||
"
|
||||
>
|
||||
<CountSatisfaction />
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 6, lg: 12, md: 12, sm: 12, xs: 24 }
|
||||
: { span: 6 }
|
||||
"
|
||||
>
|
||||
<Qrcode />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import CountSatisfaction from './components/count-satisfaction.vue';
|
||||
import CountRate from './components/count-rate.vue';
|
||||
import CountPendingAll from './components/count-pending-all.vue';
|
||||
import Qrcode from './components/qrcode.vue';
|
||||
import { pageTask } from '@/api/oa/task';
|
||||
import { ref } from 'vue';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
// 当前登录用户
|
||||
const userStore = useUserStore();
|
||||
const { info } = storeToRefs(userStore);
|
||||
const pendingCount = ref(0);
|
||||
const pendingAllCount = ref(0);
|
||||
const todayCount = ref(0);
|
||||
const monthCount = ref(0);
|
||||
const yearCount = ref(0);
|
||||
|
||||
const queryTaskCount = () => {
|
||||
if (info.value?.roles) {
|
||||
|
||||
}
|
||||
const userId = info.value?.userId;
|
||||
pageTask({ status: 0, userId }).then((res) => {
|
||||
if (res) {
|
||||
pendingCount.value = res.count;
|
||||
}
|
||||
});
|
||||
pageTask({ status: 0 }).then((res) => {
|
||||
if (res) {
|
||||
pendingAllCount.value = res.count;
|
||||
}
|
||||
});
|
||||
pageTask({}).then((res) => {
|
||||
if (res) {
|
||||
todayCount.value = res.count;
|
||||
}
|
||||
});
|
||||
pageTask({}).then((res) => {
|
||||
if (res) {
|
||||
monthCount.value = res.count;
|
||||
}
|
||||
});
|
||||
pageTask({}).then((res) => {
|
||||
if (res) {
|
||||
yearCount.value = res.count;
|
||||
}
|
||||
});
|
||||
};
|
||||
queryTaskCount();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CountIndex'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.a-cursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<a-carousel autoplay>
|
||||
<img
|
||||
src="https://img.alicdn.com/imgextra/i4/O1CN013yxpDR1q9WcnF3YjX_!!6000000005453-2-tps-768-224.png"
|
||||
/>
|
||||
<img
|
||||
src="https://img.alicdn.com/imgextra/i3/O1CN01Wa5kxT1TIvandcSam_!!6000000002360-2-tps-768-224.png"
|
||||
/>
|
||||
</a-carousel>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<a-row :gutter="16">
|
||||
<a-col v-bind="styleResponsive ? { md: 6, sm: 12, xs: 12 } : { span: 8 }">
|
||||
<a-card
|
||||
class="analysis-chart-card"
|
||||
style="align-items: flex-start; justify-content: start"
|
||||
:bordered="false"
|
||||
>
|
||||
<div class="ele-text-secondary ele-cell">
|
||||
<div class="ele-cell-content"> 待处理 </div>
|
||||
<ele-tag
|
||||
color="orange"
|
||||
v-if="hasRole('superAdmin') || hasRole('admin')"
|
||||
>管理员</ele-tag
|
||||
>
|
||||
<ele-tag color="orange" v-else-if="hasRole('commander')"
|
||||
>受理人员</ele-tag
|
||||
>
|
||||
<ele-tag color="orange" v-else>我</ele-tag>
|
||||
</div>
|
||||
<h1 class="ele-text-danger">{{ form.pending }}</h1>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<!-- <a-col v-bind="styleResponsive ? { md: 6, sm: 12, xs: 12 } : { span: 8 }">-->
|
||||
<!-- <a-card class="analysis-chart-card" :bordered="false">-->
|
||||
<!-- <div class="ele-text-secondary ele-cell">-->
|
||||
<!-- <div class="ele-cell-content">待处理</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <h1 class="ele-text-danger">-->
|
||||
<!-- {{ form.pending }}-->
|
||||
<!-- </h1>-->
|
||||
<!-- </a-card>-->
|
||||
<!-- </a-col>-->
|
||||
<a-col v-bind="styleResponsive ? { md: 6, sm: 12, xs: 12 } : { span: 8 }">
|
||||
<a-card class="analysis-chart-card" :bordered="false">
|
||||
<div class="ele-text-secondary ele-cell">
|
||||
<div class="ele-cell-content">今日已处理</div>
|
||||
<ele-tag color="green">日</ele-tag>
|
||||
</div>
|
||||
<h1 class="analysis-chart-card-num">{{ form.today }}</h1>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col v-bind="styleResponsive ? { md: 6, sm: 12, xs: 12 } : { span: 8 }">
|
||||
<a-card class="analysis-chart-card" :bordered="false">
|
||||
<div class="ele-text-secondary ele-cell">
|
||||
<div class="ele-cell-content">本月已处理</div>
|
||||
<ele-tag color="blue">月</ele-tag>
|
||||
</div>
|
||||
<h1 class="analysis-chart-card-num">{{ form.month }}</h1>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col v-bind="styleResponsive ? { md: 6, sm: 12, xs: 12 } : { span: 8 }">
|
||||
<a-card class="analysis-chart-card" :bordered="false">
|
||||
<div class="ele-text-secondary ele-cell">
|
||||
<div class="ele-cell-content">今年已处理</div>
|
||||
<ele-tag color="green">年</ele-tag>
|
||||
</div>
|
||||
<h1 class="analysis-chart-card-num">{{ form.year }}</h1>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 是否开启响应式布局
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { TaskCount } from '@/api/oa/task-count/model';
|
||||
import { pageTaskCount } from '@/api/oa/task-count';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import useSearch from '@/utils/use-search';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
// 当前登录用户
|
||||
const userStore = useUserStore();
|
||||
// 用户信息
|
||||
const { form, assignFields } = useFormData<TaskCount>({
|
||||
pending: 0,
|
||||
unused: 0,
|
||||
today: 0,
|
||||
month: 0,
|
||||
year: 0,
|
||||
total: 0,
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
// 表单数据
|
||||
const { where } = useSearch<TaskCount>({
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
const queryTaskCount = () => {
|
||||
// 搜索条件
|
||||
where.userId = userStore.info?.userId;
|
||||
// 管理人员
|
||||
if (hasRole('superAdmin') || hasRole('admin')) {
|
||||
where.commander = undefined;
|
||||
}
|
||||
// 技术人员
|
||||
if (hasRole('commander')) {
|
||||
where.commander = userStore.info?.userId;
|
||||
}
|
||||
pageTaskCount(where).then((res) => {
|
||||
res?.list.map((d) => {
|
||||
assignFields(d);
|
||||
});
|
||||
});
|
||||
};
|
||||
queryTaskCount();
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.user-info {
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="taskId"
|
||||
:columns="columns"
|
||||
:customRow="customRow"
|
||||
:datasource="datasource"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search @search="reload" />
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'content'">
|
||||
<a @click="openUrl('/oa/task/detail/' + record.taskId)">{{
|
||||
record.content
|
||||
}}</a>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-tag v-if="record.progress === TOBEARRANGED" color="red"
|
||||
>待安排</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === PENDING" color="orange"
|
||||
>待处理</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === PROCESSING" color="purple"
|
||||
>处理中</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === TOBECONFIRMED" color="cyan"
|
||||
>待评价</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === COMPLETED" color="green"
|
||||
>已完成</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === CLOSED">已关闭</a-tag>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'progress'">
|
||||
<a-progress :percent="record.progress * 2" :steps="5" />
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import type { ColumnsType } from 'ant-design-vue/es/table';
|
||||
import { pageTask } from '@/api/oa/task';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import type { Task, TaskParam } from '@/api/oa/task/model';
|
||||
import Search from './search.vue';
|
||||
import {
|
||||
CLOSED,
|
||||
COMPLETED,
|
||||
PENDING,
|
||||
PROCESSING,
|
||||
TOBEARRANGED,
|
||||
TOBECONFIRMED
|
||||
} from '@/api/oa/task/model/progress';
|
||||
// import { ContainerOutlined, UserAddOutlined } from '@ant-design/icons-vue';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { EleProTable } from 'ele-admin-pro/es';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'remove'): void;
|
||||
(e: 'edit'): void;
|
||||
}>();
|
||||
|
||||
// 数据绑定
|
||||
const user = useUserStore();
|
||||
// 表格选中数据
|
||||
const selection = ref<Task[]>([]);
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
const columns = ref<ColumnsType>([
|
||||
{
|
||||
title: '工单号',
|
||||
dataIndex: 'taskId',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '工单类型',
|
||||
dataIndex: 'taskType',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '问题描述',
|
||||
dataIndex: 'content',
|
||||
key: 'content',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
// 搜索条件
|
||||
where = {};
|
||||
where.commander = user.info?.userId;
|
||||
if (where.status != 1) {
|
||||
where.status = 0;
|
||||
}
|
||||
// 工单发起人
|
||||
if (hasRole('promoter') || hasRole('user')) {
|
||||
where.commander = undefined;
|
||||
where.userId = user.info?.userId;
|
||||
}
|
||||
// 管理人员
|
||||
if (hasRole('superAdmin') || hasRole('admin')) {
|
||||
where.commander = undefined;
|
||||
}
|
||||
// 受理人员
|
||||
if (hasRole('commander')) {
|
||||
where.commander = user.info?.userId;
|
||||
}
|
||||
console.log(where);
|
||||
return pageTask({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
const reload = (where?: TaskParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
const onRemove = () => {
|
||||
emit('remove');
|
||||
};
|
||||
|
||||
const onEdit = () => {
|
||||
emit('edit');
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Task) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
window.open('/oa/task/detail/' + record.taskId);
|
||||
// openInfo(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
/deep/.ant-table-pagination-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<a-card :bordered="false" title="用户评价">
|
||||
<div class="ele-cell ele-cell-align-bottom">
|
||||
<div style="font-size: 51px; line-height: 1">4.5</div>
|
||||
<div class="ele-cell-content">
|
||||
<a-rate :value="userRate" disabled />
|
||||
<span style="color: #fadb14; margin-left: 8px">很棒</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell" style="margin: 18px 0">
|
||||
<div style="font-size: 28px; line-height: 1" class="ele-text-placeholder">
|
||||
-0%
|
||||
</div>
|
||||
<div class="ele-cell-content ele-text-small ele-text-secondary">
|
||||
当前没有评价波动
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<a-progress :percent="60" stroke-color="#52c41a" :show-info="false" />
|
||||
</div>
|
||||
<div class="monitor-evaluate-text">
|
||||
<star-filled />
|
||||
<span>5 : 368 人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<a-progress :percent="40" stroke-color="#1890ff" :show-info="false" />
|
||||
</div>
|
||||
<div class="monitor-evaluate-text">
|
||||
<star-filled />
|
||||
<span>4 : 256 人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<a-progress :percent="20" stroke-color="#faad14" :show-info="false" />
|
||||
</div>
|
||||
<div class="monitor-evaluate-text">
|
||||
<star-filled />
|
||||
<span>3 : 49 人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<a-progress :percent="10" stroke-color="#f5222d" :show-info="false" />
|
||||
</div>
|
||||
<div class="monitor-evaluate-text">
|
||||
<star-filled />
|
||||
<span>2 : 14 人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<a-progress :percent="0" :show-info="false" />
|
||||
</div>
|
||||
<div class="monitor-evaluate-text">
|
||||
<star-filled />
|
||||
<span>1 : 0 人</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { StarFilled } from '@ant-design/icons-vue';
|
||||
|
||||
// 用户评分
|
||||
const userRate = ref(4.5);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.monitor-evaluate-text {
|
||||
width: 90px;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
opacity: 0.8;
|
||||
|
||||
& > .anticon {
|
||||
font-size: 12px;
|
||||
margin: 0 6px 0 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<a-card :bordered="false" title="用户满意度">
|
||||
<div class="ele-cell ele-text-center">
|
||||
<div class="ele-cell-content" style="font-size: 24px">856</div>
|
||||
<div class="ele-cell-content">
|
||||
<div class="monitor-face-smile"><i></i></div>
|
||||
<div class="ele-text-secondary ele-elip" style="margin-top: 8px">
|
||||
正面评论
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="ele-cell-content ele-text-success">82%</h2>
|
||||
</div>
|
||||
<a-divider style="margin: 26px 0" />
|
||||
<div class="ele-cell ele-text-center">
|
||||
<div class="ele-cell-content" style="font-size: 24px">60</div>
|
||||
<div class="ele-cell-content">
|
||||
<div class="monitor-face-cry"><i></i></div>
|
||||
<div class="ele-text-secondary ele-elip" style="margin-top: 8px">
|
||||
负面评论
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="ele-cell-content ele-text-danger">9%</h2>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.monitor-face-smile,
|
||||
.monitor-face-cry {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
background: #fbd971;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.monitor-face-smile > i,
|
||||
.monitor-face-smile:before,
|
||||
.monitor-face-smile:after,
|
||||
.monitor-face-cry > i,
|
||||
.monitor-face-cry:before,
|
||||
.monitor-face-cry:after {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
transform: rotate(225deg);
|
||||
border: 3px solid #f0c419;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 11px;
|
||||
}
|
||||
|
||||
.monitor-face-smile:before,
|
||||
.monitor-face-smile:after,
|
||||
.monitor-face-cry:before,
|
||||
.monitor-face-cry:after {
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
left: 8px;
|
||||
top: 14px;
|
||||
border-color: #f29c1f;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.monitor-face-smile:after,
|
||||
.monitor-face-cry:after {
|
||||
left: auto;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.monitor-face-cry > i {
|
||||
transform: rotate(45deg);
|
||||
bottom: -6px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<a-card :bordered="false" title="常见问题">
|
||||
<a-list
|
||||
class="demo-loadmore-list"
|
||||
item-layout="horizontal"
|
||||
:data-source="list"
|
||||
>
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<template #actions>
|
||||
<a-popover>
|
||||
<template #content> 待处理 </template>
|
||||
<a class="ele-text-danger">{{ item.pending }}</a>
|
||||
</a-popover>
|
||||
<a-popover>
|
||||
<template #content> 本月已处理 </template>
|
||||
<a class="ele-text-secondary">{{ item.month }}</a>
|
||||
</a-popover>
|
||||
</template>
|
||||
<a-skeleton avatar :title="false" :loading="!!item.loading" active>
|
||||
<a-list-item-meta>
|
||||
<template #title>
|
||||
{{ item.nickname }}
|
||||
</template>
|
||||
<template #avatar>
|
||||
<a-avatar :src="item.avatar" />
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-skeleton>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
<!-- 工单二维码 -->
|
||||
<Qrcode v-model:visible="showQrcode" />
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { pageTaskCount } from '@/api/oa/task-count';
|
||||
import { TaskCount } from '@/api/oa/task-count/model';
|
||||
import { UserAddOutlined } from '@ant-design/icons-vue';
|
||||
import Qrcode from './qrcode.vue';
|
||||
|
||||
const showQrcode = ref(false);
|
||||
const list = ref<TaskCount[]>([]);
|
||||
|
||||
pageTaskCount({ limit: 10, roleCode: 'commander' }).then((res) => {
|
||||
if (res) {
|
||||
list.value = res?.list;
|
||||
}
|
||||
});
|
||||
|
||||
const onShowQrcode = () => {
|
||||
showQrcode.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.monitor-evaluate-text {
|
||||
width: 90px;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
opacity: 0.8;
|
||||
|
||||
& > .anticon {
|
||||
font-size: 12px;
|
||||
margin: 0 6px 0 8px;
|
||||
}
|
||||
}
|
||||
/deep/.ant-list-item {
|
||||
padding: 7px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<a-dropdown placement="bottomRight">
|
||||
<more-outlined class="ele-text-secondary" style="font-size: 18px" />
|
||||
<template #overlay>
|
||||
<a-menu :selectable="false" @click="onClick">
|
||||
<a-menu-item key="edit">
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">待处理</div>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="remove">
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">已完成</div>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
MoreOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'edit'): void;
|
||||
(e: 'remove'): void;
|
||||
}>();
|
||||
|
||||
const onClick = ({ key }) => {
|
||||
emit(key);
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import { openUrl } from "@/utils/common";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="400"
|
||||
:visible="visible"
|
||||
:title="`邀请新成员`"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
:footer="null"
|
||||
@ok="save"
|
||||
>
|
||||
<div
|
||||
class="qrcode-list"
|
||||
style="display: flex; justify-content: space-around"
|
||||
>
|
||||
<div>
|
||||
<img :src="qrcode" width="240" height="240" />
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 26px;
|
||||
padding-top: 20px;
|
||||
"
|
||||
>使用微信扫一扫</div
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</ele-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { reactive, ref } from 'vue';
|
||||
import { taskJoinQRCode } from '@/api/oa/task';
|
||||
|
||||
defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', user: User): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const qrcode = ref('');
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<User>({
|
||||
userId: undefined,
|
||||
nickname: undefined
|
||||
});
|
||||
|
||||
const save = () => {
|
||||
emit('done', form);
|
||||
};
|
||||
|
||||
taskJoinQRCode({}).then((text) => {
|
||||
qrcode.value = String(text);
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less"></style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<a-space :size="20" style="flex-wrap: wrap">
|
||||
<a-tabs
|
||||
type="card"
|
||||
tabPosition="top"
|
||||
v-model:activeKey="where.status"
|
||||
@change="search"
|
||||
>
|
||||
<a-tab-pane key="0" tab="待处理" />
|
||||
<a-tab-pane key="1" tab="已完成" />
|
||||
</a-tabs>
|
||||
</a-space>
|
||||
<a-space :size="10" style="flex-wrap: wrap; margin-right: 20px">
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入关键词"
|
||||
v-model:value="where.keywords"
|
||||
@pressEnter="search"
|
||||
@search="search"
|
||||
/>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { TaskParam } from '@/api/oa/task/model';
|
||||
import useSearch from '@/utils/use-search';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where: TaskParam): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<TaskParam>({
|
||||
keywords: '',
|
||||
commander: undefined
|
||||
});
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
search();
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<search @search="reload" :selection="selection" @remove="removeBatch" />
|
||||
</div>
|
||||
<template v-for="(record, index) in list" :key="index">
|
||||
<a-card :bordered="false" hoverable>
|
||||
<div class="task-list">
|
||||
<div class="item">
|
||||
<div class="user-box">
|
||||
<div class="user-info">
|
||||
<a-badge
|
||||
:dot="!record.isRead && record.userId != userStore.info?.userId"
|
||||
>
|
||||
<a-avatar :src="record.lastAvatar" size="large" />
|
||||
</a-badge>
|
||||
</div>
|
||||
<div class="content" style="display: flex; flex-direction: column">
|
||||
<div class="nickname">
|
||||
<a
|
||||
:href="'/oa/task/detail/' + record.taskId"
|
||||
class="ele-text-heading"
|
||||
>{{ record.lastNickname ? record.lastNickname : '未知' }}</a
|
||||
>
|
||||
</div>
|
||||
<span class="ele-text-heading">{{
|
||||
record.appName ? `工单编号：${record.taskId}` : ''
|
||||
}}</span>
|
||||
<span class="ele-text-heading">{{
|
||||
record.appName ? `项目名称：${record.appName}` : ''
|
||||
}}</span>
|
||||
<span class="ele-text-heading">{{
|
||||
record.content ? `最后回复：${record.content}` : ''
|
||||
}}</span>
|
||||
<span class="ele-text-heading">{{
|
||||
record.content ? `更新时间：${timeAgo(record.updateTime)}` : ''
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="last-time ele-text-info"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, reactive, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { timeAgo, toDateString } from 'ele-admin-pro';
|
||||
import Search from '../search/components/search.vue';
|
||||
import { pageTask, removeTask, removeBatchTask } from '@/api/oa/task';
|
||||
import type { Task, TaskParam } from '@/api/oa/task/model';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import {
|
||||
CLOSED,
|
||||
COMPLETED,
|
||||
PENDING,
|
||||
PROCESSING,
|
||||
TOBEARRANGED,
|
||||
TOBECONFIRMED
|
||||
} from '@/api/oa/task/model/progress';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { WhereType } from '@/components/UserChoose/types';
|
||||
|
||||
const userStore = useUserStore();
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
const selection = ref<any[]>();
|
||||
const status = ref<number>();
|
||||
const list = ref<Task[]>([]);
|
||||
|
||||
// 搜索表单
|
||||
const where = reactive<TaskParam>({
|
||||
keywords: '',
|
||||
nickname: '',
|
||||
commander: undefined,
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
// 表格数据源
|
||||
const reload = () => {
|
||||
// 搜索条件
|
||||
where.userId = undefined;
|
||||
where.commander = userStore.info?.userId;
|
||||
if (where.status != 1) {
|
||||
where.status = 0;
|
||||
}
|
||||
// 工单发起人
|
||||
if (hasRole('promoter') || hasRole('user')) {
|
||||
where.commander = undefined;
|
||||
where.userId = userStore.info?.userId;
|
||||
}
|
||||
// 管理人员
|
||||
if (hasRole('superAdmin') || hasRole('admin')) {
|
||||
where.commander = undefined;
|
||||
}
|
||||
// 工单受理人员
|
||||
if (hasRole('commander')) {
|
||||
where.commander = userStore.info?.userId;
|
||||
}
|
||||
pageTask(where).then((res) => {
|
||||
list.value = res?.list;
|
||||
});
|
||||
};
|
||||
|
||||
reload();
|
||||
|
||||
/* 搜索 */
|
||||
// const reload = (where?: TaskParam) => {
|
||||
// status.value = where?.status;
|
||||
// selection.value = [];
|
||||
// tableRef?.value?.reload({ where: where });
|
||||
// };
|
||||
|
||||
const onDetail = (record?: Task) => {
|
||||
window.location.href = 'detail?id=' + record?.taskId;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Task) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeTask(row.taskId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value?.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
if (selection.value?.length) {
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchTask(selection.value.map((d) => d.taskId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 是否展现多选按钮及批量删除按钮
|
||||
if (hasRole('superAdmin') || hasRole('admin')) {
|
||||
selection.value = [];
|
||||
}
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Task) => {
|
||||
return {
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
window.open('/oa/task/detail/' + record.taskId);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'TaskList'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.search {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.user-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.last-time {
|
||||
margin-left: 12px;
|
||||
}
|
||||
.content {
|
||||
.text {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nickname {
|
||||
.ele-text-heading {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<a-card :bordered="false" class="task-card" title="快捷入口">
|
||||
<a-row type="flex" justify="start" align="top">
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive ? { xl: 8, xs: 10, md: 12, sm: 4 } : { span: 4 }
|
||||
"
|
||||
>
|
||||
<a-button class="tools-btn" @click="openUrl('/oa/task')"
|
||||
>管理首页</a-button
|
||||
>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive ? { xl: 8, xs: 10, md: 12, sm: 4 } : { span: 4 }
|
||||
"
|
||||
>
|
||||
<a-button class="tools-btn" @click="openUrl('/oa/task/hall')"
|
||||
>任务大厅</a-button
|
||||
>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive ? { xl: 8, xs: 10, md: 12, sm: 4 } : { span: 6 }
|
||||
"
|
||||
>
|
||||
<a-button class="tools-btn" @click="openUrl('/oa/task/dict')"
|
||||
>分类设置</a-button
|
||||
>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive ? { xl: 8, xs: 10, md: 12, sm: 4 } : { span: 4 }
|
||||
"
|
||||
>
|
||||
<a-button class="tools-btn" @click="openUrl('/oa/task/add')"
|
||||
>提交工单</a-button
|
||||
>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive ? { xl: 8, xs: 10, md: 12, sm: 4 } : { span: 6 }
|
||||
"
|
||||
v-if="appId > 0"
|
||||
>
|
||||
<a-button class="tools-btn" @click="openUrl('/oa/app/detail/' + appId)"
|
||||
>项目信息</a-button
|
||||
>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive ? { xl: 8, xs: 10, md: 12, sm: 4 } : { span: 6 }
|
||||
"
|
||||
>
|
||||
<a-button
|
||||
class="tools-btn"
|
||||
@click="openUrl('https://modules.gxwebsoft.com/oa/task')"
|
||||
>小程序版</a-button
|
||||
>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { openUrl } from '@/utils/common';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useRouter } from 'vue-router';
|
||||
const { currentRoute } = useRouter();
|
||||
|
||||
defineProps<{
|
||||
appId: number | 0;
|
||||
}>();
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tools-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,346 @@
|
||||
<template>
|
||||
<ele-modal
|
||||
width="90%"
|
||||
:visible="visible"
|
||||
:title="`项目信息（${appId}）`"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
:footer="null"
|
||||
@ok="save"
|
||||
>
|
||||
<div style="background-color: #f3f3f3; padding: 8px">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
|
||||
>
|
||||
<a-card title="基本信息" :bordered="false">
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="租户ID" name="tenantId">
|
||||
<span>{{ form.tenantId }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="项目名称" name="appName">
|
||||
<span>{{ form.appName }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="项目描述" name="comments">
|
||||
<div v-html="form.comments"></div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="项目状态" name="appStatus">
|
||||
<a-tag v-if="form.appStatus == '开发中'" color="red">{{
|
||||
form.appStatus
|
||||
}}</a-tag>
|
||||
<a-tag v-if="form.appStatus == '已上架'" color="green">{{
|
||||
form.appStatus
|
||||
}}</a-tag>
|
||||
</a-form-item>
|
||||
<a-form-item label="项目类型" name="appTypeMultiple">
|
||||
<a-tag
|
||||
v-for="(item, index) in form.appTypeMultiple"
|
||||
:key="index"
|
||||
>{{ item }}</a-tag
|
||||
>
|
||||
</a-form-item>
|
||||
<a-form-item label="项目域名" name="appUrl">
|
||||
<span>{{ form.appUrl }}</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<div class="upload-image">
|
||||
<ele-image-upload
|
||||
v-model:value="logo"
|
||||
:item-style="{ width: '120px', height: '120px' }"
|
||||
:limit="3"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<a-divider style="height: 8px" />
|
||||
<a-card title="开发信息" :bordered="false">
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="应用标识" name="appCode">
|
||||
{{ form.appCode }}
|
||||
</a-form-item>
|
||||
<a-form-item label="应用包名" name="packageName">
|
||||
<span>{{ form.packageName }}</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="主节点" name="serverUrl">
|
||||
{{ form.serverUrl }}
|
||||
</a-form-item>
|
||||
<a-form-item label="模块节点" name="modulesUrl">
|
||||
{{ form.modulesUrl }}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="服务端仓库" name="gitUrl">
|
||||
{{ form.gitUrl }}
|
||||
</a-form-item>
|
||||
<a-form-item label="vue端仓库" name="gitUrl">
|
||||
{{ form.gitUrl }}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<a-divider style="height: 8px" />
|
||||
<a-card title="项目需求" :bordered="false">
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="原型图" name="prototypeUrl">
|
||||
{{ form.prototypeUrl }}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="项目需求" name="docsUrl">
|
||||
{{ form.docsUrl }}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="腾讯文档" name="docsUrl">
|
||||
{{ form.docsUrl }}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<a-divider style="height: 8px" />
|
||||
<a-card title="其他资料" :bordered="false">
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-viewer :value="requirement" :plugins="plugins" />
|
||||
</a-card>
|
||||
</a-form>
|
||||
</div>
|
||||
</ele-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { ref, watch } from 'vue';
|
||||
import { App } from '@/api/oa/app/model';
|
||||
import { getApp } from '@/api/oa/app';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import gfm from '@bytemd/plugin-gfm';
|
||||
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
|
||||
import highlight from '@bytemd/plugin-highlight';
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
appId: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', user: User): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
const logo = ref<any[]>([]);
|
||||
const requirement = ref('');
|
||||
const qrcode = ref('https://file.jimeigroup.cn/reg-code3/hgkghiji.png');
|
||||
|
||||
// 应用信息
|
||||
const { form, resetFields, assignFields } = useFormData<App>({
|
||||
// 应用id
|
||||
appId: undefined,
|
||||
// 应用秘钥
|
||||
appSecret: '',
|
||||
enName: '',
|
||||
// 应用名称
|
||||
appName: '',
|
||||
// 上级id, 0是顶级
|
||||
parentId: undefined,
|
||||
// 应用编号
|
||||
appCode: '',
|
||||
// 应用图标
|
||||
appIcon: '',
|
||||
appQrcode: '',
|
||||
// 应用截图
|
||||
images: '',
|
||||
// 应用类型
|
||||
appType: '',
|
||||
appTypeMultiple: undefined,
|
||||
// 菜单类型
|
||||
menuType: undefined,
|
||||
// 应用地址
|
||||
appUrl: '',
|
||||
// 后台管理地址
|
||||
adminUrl: undefined,
|
||||
// 下载地址
|
||||
downUrl: undefined,
|
||||
serverUrl: undefined,
|
||||
callbackUrl: undefined,
|
||||
gitUrl: undefined,
|
||||
docsUrl: undefined,
|
||||
prototypeUrl: undefined,
|
||||
ipAddress: undefined,
|
||||
fileUrl: undefined,
|
||||
// 应用包名
|
||||
packageName: '',
|
||||
// 点击次数
|
||||
clicks: '',
|
||||
// 安装次数
|
||||
installs: '',
|
||||
// 项目介绍
|
||||
content: '',
|
||||
// 开发者(个人)
|
||||
developer: '',
|
||||
director: '',
|
||||
projectDirector: '',
|
||||
salesman: '',
|
||||
// 软件定价
|
||||
price: '',
|
||||
// 评分
|
||||
score: '',
|
||||
// 星级
|
||||
star: '',
|
||||
// 菜单组件地址
|
||||
component: '',
|
||||
// 菜单路由地址
|
||||
path: '',
|
||||
// 权限标识
|
||||
authority: '',
|
||||
// 打开位置
|
||||
target: '',
|
||||
// 是否隐藏, 0否, 1是(仅注册路由不显示在左侧菜单)
|
||||
hide: undefined,
|
||||
// 菜单侧栏选中的path
|
||||
active: '',
|
||||
// 其它路由元信息
|
||||
meta: '',
|
||||
// 版本
|
||||
edition: '',
|
||||
// 版本号
|
||||
version: '',
|
||||
// 是否已安装
|
||||
isUse: undefined,
|
||||
// 排序
|
||||
sortNumber: undefined,
|
||||
// 备注
|
||||
comments: '',
|
||||
tenantName: '',
|
||||
companyName: '',
|
||||
// 租户编号
|
||||
tenantCode: '',
|
||||
// 租户id
|
||||
tenantId: undefined,
|
||||
// 创建时间
|
||||
createTime: '',
|
||||
appStatus: '开发中',
|
||||
// 状态
|
||||
status: undefined,
|
||||
// 发布者
|
||||
userId: '',
|
||||
// 发布者昵称
|
||||
nickname: '',
|
||||
// 子菜单
|
||||
children: [],
|
||||
// 权限树回显选中状态, 0未选中, 1选中
|
||||
checked: false,
|
||||
//
|
||||
key: undefined,
|
||||
//
|
||||
value: undefined,
|
||||
//
|
||||
parentIds: [],
|
||||
//
|
||||
openType: undefined,
|
||||
//
|
||||
search: undefined,
|
||||
// 成员管理
|
||||
users: [],
|
||||
// 项目需求
|
||||
requirement: '',
|
||||
file1: '[]',
|
||||
file2: '[]',
|
||||
file3: '[]'
|
||||
});
|
||||
|
||||
const chooseUser = (item: User) => {
|
||||
form.userId = item.userId;
|
||||
form.nickname = item.nickname;
|
||||
};
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
const save = () => {
|
||||
emit('done', form);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
// content.value = '';
|
||||
requirement.value = '';
|
||||
if (props.appId) {
|
||||
getApp(props.appId).then((appInfo) => {
|
||||
assignFields(appInfo);
|
||||
logo.value = [];
|
||||
// images.value = [];
|
||||
if (appInfo.appIcon) {
|
||||
logo.value.push({
|
||||
uid: 0,
|
||||
url: appInfo.appIcon,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
if (appInfo.appTypeMultiple) {
|
||||
form.appTypeMultiple = JSON.parse(appInfo.appTypeMultiple);
|
||||
}
|
||||
if (appInfo.requirement) {
|
||||
requirement.value = appInfo.requirement;
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.upload-image {
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="400"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:title="`指派人员`"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<SelectStaff
|
||||
:placeholder="`选择指派人员`"
|
||||
v-model:value="form.nickname"
|
||||
:type="`task`"
|
||||
@done="chooseUser"
|
||||
/>
|
||||
</ele-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { reactive } from 'vue';
|
||||
|
||||
defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', user: User): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<User>({
|
||||
userId: undefined,
|
||||
nickname: undefined,
|
||||
roles: undefined
|
||||
});
|
||||
|
||||
const chooseUser = (item: User) => {
|
||||
form.userId = item.userId;
|
||||
form.nickname = item.nickname;
|
||||
};
|
||||
|
||||
const save = () => {
|
||||
emit('done', form);
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less"></style>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<a-card
|
||||
title="通知公告"
|
||||
:bordered="false"
|
||||
class="task-card"
|
||||
:split="false"
|
||||
:body-style="{ padding: '5px' }"
|
||||
>
|
||||
<a-list
|
||||
:size="`small`"
|
||||
:bordered="false"
|
||||
:split="false"
|
||||
:data-source="articleList"
|
||||
>
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item @click="openNew('/cms/article/' + item.articleId)">
|
||||
<a class="ele-text-secondary">{{ item.title }}</a></a-list-item
|
||||
>
|
||||
</template>
|
||||
</a-list>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { openNew } from '@/utils/common';
|
||||
import { ref } from 'vue';
|
||||
import { Article } from '@/api/cms/article/model';
|
||||
import { pageArticle } from '@/api/cms/article';
|
||||
|
||||
const articleList = ref<Article[]>([]);
|
||||
|
||||
pageArticle({ categoryId: 92, limit: 4 }).then((res) => {
|
||||
articleList.value = res?.list || [];
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<a-card
|
||||
title="实用工具"
|
||||
:bordered="false"
|
||||
class="task-card"
|
||||
:split="false"
|
||||
:body-style="{ padding: '5px' }"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
class="gutter-row"
|
||||
:span="12"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
>
|
||||
<a-button
|
||||
:type="`link`"
|
||||
class="ele-text-secondary"
|
||||
@click="openNew(`${item.url}`)"
|
||||
>{{ item.name }}</a-button
|
||||
>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { openNew } from '@/utils/common';
|
||||
import { ref } from 'vue';
|
||||
import type { Link } from '@/api/oa/link/model';
|
||||
import { pageLink } from '@/api/oa/link';
|
||||
|
||||
const list = ref<Link[]>([]);
|
||||
|
||||
pageLink({ linkType: '实用工具' }).then((res) => {
|
||||
list.value = res?.list || [];
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="500"
|
||||
:visible="visible"
|
||||
:title="`编辑工单`"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:label-col="{ md: { span: 4 }, sm: { span: 4 }, xs: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 18 }, sm: { span: 18 }, xs: { span: 24 } }"
|
||||
>
|
||||
<a-form-item label="工单类型" name="taskType">
|
||||
<a-select
|
||||
optionFilterProp="label"
|
||||
placeholder="请选择工单类型"
|
||||
:options="taskType"
|
||||
allow-clear
|
||||
v-model:value="form.taskType"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="工单标题" name="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入工单标题"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="关联项目">
|
||||
<SelectApp v-model:value="form.appName" @done="chooseApp" />
|
||||
</a-form-item>
|
||||
<a-form-item label="联系方式" name="phone">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="11"
|
||||
placeholder="请输入手机号码"
|
||||
v-model:value="form.phone"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="逾期天数" name="overdueDays">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入逾期天数"
|
||||
v-model:value="form.overdueDays"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { watch } from 'vue';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { Task } from '@/api/oa/task/model';
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
import { App } from '@/api/oa/app/model';
|
||||
import { updateTask } from '@/api/oa/task';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
data: Task;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
const taskType = getDictionaryOptions('taskType');
|
||||
|
||||
// 应用信息
|
||||
const { form, resetFields, assignFields } = useFormData<Task>({
|
||||
taskId: undefined,
|
||||
taskType: '',
|
||||
phone: '',
|
||||
overdueDays: undefined,
|
||||
appId: undefined,
|
||||
appName: '',
|
||||
name: ''
|
||||
});
|
||||
|
||||
const chooseApp = (item: App) => {
|
||||
console.log(item);
|
||||
form.appId = item.appId;
|
||||
form.appName = item.appName;
|
||||
};
|
||||
|
||||
const save = () => {
|
||||
const { taskId, taskType, phone, appId, name, overdueDays } = form;
|
||||
updateTask({ taskId, taskType, phone, appId, name, overdueDays }).then(
|
||||
(msg) => {
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignFields(props.data);
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.upload-image {
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="400"
|
||||
:visible="visible"
|
||||
:title="`分享工单`"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
ok-text="复制链接"
|
||||
@ok="save"
|
||||
>
|
||||
<div
|
||||
class="qrcode-list"
|
||||
style="display: flex; justify-content: space-around"
|
||||
>
|
||||
<div>
|
||||
<ele-qr-code
|
||||
:value="
|
||||
domain + '/oa/task/detail/' + data.taskId + '&tid=' + data.tenantId
|
||||
"
|
||||
:size="300"
|
||||
level="M"
|
||||
:margin="1"
|
||||
:image-settings="logo"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 26px;
|
||||
padding-top: 20px;
|
||||
"
|
||||
>使用微信扫一扫</div
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</ele-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { reactive } from 'vue';
|
||||
import { copyText } from '@/utils/common';
|
||||
import { domain } from '@/config/setting';
|
||||
import { ImageSettings } from 'ele-admin-pro/es/ele-qr-code/types';
|
||||
import { Task } from '@/api/oa/task/model';
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
data: Task;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', user: User): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const logo = reactive<ImageSettings>({
|
||||
src: 'https://oss.wsdns.cn/20230722/5e7d3ea18c7f43acae8b7ea82bab7cbc.png',
|
||||
width: 36,
|
||||
height: 36,
|
||||
excavate: true
|
||||
});
|
||||
|
||||
const save = () => {
|
||||
copyText(
|
||||
domain +
|
||||
'/oa/task/detail?id=' +
|
||||
props.data.taskId +
|
||||
'&tid=' +
|
||||
props.data.tenantId
|
||||
);
|
||||
};
|
||||
|
||||
// taskQRCode({ taskId: props.data?.taskId }).then((text) => {
|
||||
// qrcode.value = String(text);
|
||||
// });
|
||||
</script>
|
||||
<style scoped lang="less"></style>
|
||||
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<ele-modal
|
||||
width="70%"
|
||||
:visible="visible"
|
||||
:title="`编辑记录`"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-editor
|
||||
v-model:value="form.content"
|
||||
placeholder="请输入您的回复内容，图片请直接粘贴"
|
||||
:locale="zh_Hans"
|
||||
:plugins="plugins"
|
||||
mode="tab"
|
||||
height="300px"
|
||||
maxLength="500"
|
||||
:editorConfig="{ lineNumbers: true }"
|
||||
contenteditable="true"
|
||||
@paste="onPaste"
|
||||
/>
|
||||
<a-space class="files">
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
class="upload-list-inline"
|
||||
list-type="picture"
|
||||
:before-upload="onBeforeUpload"
|
||||
>
|
||||
<a-button>
|
||||
<UploadOutlined />
|
||||
上传附件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</a-space>
|
||||
</ele-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { TaskRecord } from '@/api/oa/task-record/model';
|
||||
import zh_Hans from 'bytemd/locales/zh_Hans.json';
|
||||
import gfm from '@bytemd/plugin-gfm';
|
||||
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
|
||||
import highlight from '@bytemd/plugin-highlight-ssr';
|
||||
import { updateTaskRecord } from '@/api/oa/task-record';
|
||||
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
|
||||
import { uploadOss } from "@/api/system/file";
|
||||
import { getVersion, isImage } from "@/utils/common";
|
||||
import { useUserStore } from "@/store/modules/user";
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
data: TaskRecord;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const user = useUserStore();
|
||||
const content = ref('');
|
||||
const files = ref<any[]>([]);
|
||||
const fileList = ref<any[]>([]);
|
||||
const version = ref<number>(0);
|
||||
|
||||
// 应用信息
|
||||
const { form, resetFields, assignFields } = useFormData<TaskRecord>({
|
||||
appId: 0,
|
||||
avatar: '',
|
||||
children: [],
|
||||
comments: '',
|
||||
createTime: '',
|
||||
developerId: 0,
|
||||
nickname: '',
|
||||
parentId: 0,
|
||||
sortNumber: 0,
|
||||
status: '',
|
||||
taskRecordId: 0,
|
||||
toUser: null,
|
||||
userId: 0,
|
||||
taskId: undefined,
|
||||
content: '',
|
||||
files: ''
|
||||
});
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
/* 粘贴图片上传服务器并插入编辑器 */
|
||||
const onPaste = (e) => {
|
||||
const items = (e.clipboardData || e.originalEvent.clipboardData).items;
|
||||
let hasFile = false;
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (items[i].type.indexOf('image') !== -1) {
|
||||
let file = items[i].getAsFile();
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).lastModified,
|
||||
name: file.name
|
||||
};
|
||||
uploadOss(<File>item.file)
|
||||
.then((result) => {
|
||||
const addPath = '\n\r';
|
||||
content.value = content.value + addPath
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
hasFile = true;
|
||||
}
|
||||
}
|
||||
if (hasFile) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
// 文件上传事件
|
||||
const onBeforeUpload = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
}
|
||||
if (!file.type.startsWith("image")) {
|
||||
if (file.size / 1024 / 1024 > 100) {
|
||||
message.error("大小不能超过 100MB");
|
||||
return;
|
||||
}
|
||||
}
|
||||
onUpload(item);
|
||||
return false;
|
||||
};
|
||||
|
||||
const onUpload = (d: ItemType) => {
|
||||
uploadOss(<File>d.file)
|
||||
.then((result) => {
|
||||
files.value.push({
|
||||
uid: result.id,
|
||||
url: result.path,
|
||||
name: isImage(result.path) ? 'image' : result.name,
|
||||
status: "done"
|
||||
});
|
||||
fileList.value = files.value;
|
||||
message.success("上传成功");
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const save = () => {
|
||||
const { taskRecordId, content, files } = form;
|
||||
updateTaskRecord({ toUser: null, taskRecordId, content, files: JSON.stringify(fileList.value) }).then((msg) => {
|
||||
fileList.value = [];
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignFields(props.data);
|
||||
if (props.data?.files) {
|
||||
fileList.value = JSON.parse(props.data?.files);
|
||||
files.value = JSON.parse(props.data?.files);
|
||||
}
|
||||
version.value = <number>getVersion();
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.upload-image {
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.files{
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,706 @@
|
||||
<template>
|
||||
<a-page-header
|
||||
:title="title"
|
||||
:style="{ padding: screenWidth > 480 ? '16px 24px' : '0' }"
|
||||
@back="push('/system/my-task')"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<!-- 左侧区域-->
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 18, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 12 }
|
||||
"
|
||||
class="gutter-row"
|
||||
:span="6"
|
||||
>
|
||||
<a-card :bordered="false" style="width: 100%; margin-bottom: 16px;" v-if="screenWidth > 480">
|
||||
<a-steps
|
||||
:current="active"
|
||||
direction="horizontal"
|
||||
:responsive="styleResponsive"
|
||||
>
|
||||
<template v-for="item in taskProgressDict">
|
||||
<a-step :title="item.label" />
|
||||
</template>
|
||||
</a-steps>
|
||||
</a-card>
|
||||
<a-card :bordered="false" :class="screenWidth > 480 ? '' : 'transparent-bg'" style="width: 100%; margin-bottom: 16px" :body-style="{ padding: screenWidth > 480 ? '16px' : '0' }">
|
||||
<a-list item-layout="vertical" size="large" :data-source="taskRecord">
|
||||
<template #renderItem="{ item,index }">
|
||||
<a-list-item key="item.taskRecordId">
|
||||
<a-list-item-meta>
|
||||
<template #title>
|
||||
<a-space>
|
||||
<span class="ele-text-heading" style="font-weight: 500;" v-if="item.userId == loginUserId">{{ item.nickname }}</span>
|
||||
<span class="ele-text-heading" style="font-weight: 500;" v-else>{{ item.nickname }}</span>
|
||||
<div class="ele-text-placeholder" style="font-size: 14px" >{{ timeAgo(item.createTime) }}</div>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #avatar><a-avatar :src="item.avatar ? item.avatar : 'https://file.gxwebsoft.com/20230217/c8a5c699b3174866a36dd6d378a09bb9.jpg'" /></template>
|
||||
<template #description>
|
||||
<a-card class="user-content" v-if="loginUserId === item.userId" :style="{maxWidth: screenWidth > 480 ? '80%' : '100%'}" :body-style="{ padding: '12px' }">
|
||||
<byte-md-viewer :value="item.content" :plugins="plugins" />
|
||||
</a-card>
|
||||
<a-card class="admin-content" :style="{maxWidth: screenWidth > 480 ? '80%' : '100%'}" v-else :body-style="{ padding: '12px' }">
|
||||
<byte-md-viewer :value="item.content" :plugins="plugins" />
|
||||
</a-card>
|
||||
<a-space class="files" v-if="item.confidential">
|
||||
<a-alert
|
||||
:message="`${hasRole('commander') ? decrypt(item.confidential) : '机密信息：****'}`"
|
||||
type="warning"
|
||||
:showIcon = false
|
||||
banner
|
||||
>
|
||||
</a-alert>
|
||||
</a-space>
|
||||
<a-space class="files" v-if="item.files && item.files != '[]'">
|
||||
<template v-for="file in JSON.parse(item.files)">
|
||||
<a-button v-if="file.name && file.name != 'image'" :href="file.url">{{ file.name }}</a-button>
|
||||
<a-image v-else :width="80" :src="file.url" />
|
||||
</template>
|
||||
</a-space>
|
||||
<template v-if="hasRole('admin') || hasRole('superAdmin') || (hasRole('commander'))">
|
||||
<template v-if="active != COMPLETED && active != CLOSED">
|
||||
<!-- <div style="margin: 10px 0;">-->
|
||||
<!-- <a class="ele-text-placeholder" @click="openEditRecord(item)">编辑</a>-->
|
||||
<!-- <a-divider type="vertical" />-->
|
||||
<!-- <a-popconfirm-->
|
||||
<!-- title="确定要删除此记录吗？"-->
|
||||
<!-- @confirm="removeRecord(item)"-->
|
||||
<!-- >-->
|
||||
<!-- <a class="ele-text-placeholder">删除</a>-->
|
||||
<!-- </a-popconfirm>-->
|
||||
<!-- </div>-->
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</template>
|
||||
<template #loadMore>
|
||||
<div
|
||||
v-if="total > 100"
|
||||
:style="{
|
||||
textAlign: 'center',
|
||||
marginTop: '12px',
|
||||
height: '32px',
|
||||
lineHeight: '32px'
|
||||
}"
|
||||
>
|
||||
<a-pagination v-model:current="current" :total="total" @change="reload" />
|
||||
</div>
|
||||
</template>
|
||||
</a-list>
|
||||
</a-card>
|
||||
<!-- 回复表单 -->
|
||||
<div id="bottom" v-if="task">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 14 }, sm: { span: 24 }, xs: { span: 24 } }"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-card
|
||||
:title="currentRecord ? `正在回复${currentRecord.nickname}:` : `处理结果`"
|
||||
:class="screenWidth > 480 ? '' : 'transparent-bg'"
|
||||
:bordered="false"
|
||||
v-if="hasRole('superAdmin') || hasRole('admin') || task.status == 0"
|
||||
>
|
||||
<template #extra>
|
||||
<a-space>
|
||||
<template v-if="hasRole('admin') || hasRole('superAdmin')">
|
||||
<template v-if="active == CLOSED || active == COMPLETED">
|
||||
<a-button @click="onClose">重开</a-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-space>
|
||||
<!-- <a-button @click="openUser">派单</a-button>-->
|
||||
<a-button @click="onResolved">已解决</a-button>
|
||||
<!-- <a-button @click="onClose">关单</a-button>-->
|
||||
<!-- <a-button @click="openEdit">编辑</a-button>-->
|
||||
<!-- <a-button @click="remove">删除</a-button>-->
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="hasRole('commander')">
|
||||
<a-button @click="onResolved" :v-if="commander != loginUserId">已解决</a-button>
|
||||
<a-button @click="onClose">{{ taskStatus ? '关单' : '重开' }}</a-button>
|
||||
</template>
|
||||
<template v-if="hasRole('promoter') || hasRole('user')">
|
||||
<a-button @click="onConfirmCompleted" v-if="active != CLOSED && active != COMPLETED">确认完成</a-button>
|
||||
<a-button @click="onClose" v-if="active != CLOSED && active != COMPLETED">关闭</a-button>
|
||||
</template>
|
||||
<a-button @click="openAppInfo(appId)" v-if="appId > 0">相关信息</a-button>
|
||||
<a-button @click="openQrcode">分享</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<a-space direction="vertical" style="width: 100%">
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-editor
|
||||
v-model:value="content"
|
||||
placeholder="请输入您的回复内容，图片请直接粘贴"
|
||||
:locale="zh_Hans"
|
||||
:plugins="plugins"
|
||||
mode="tab"
|
||||
height="300px"
|
||||
maxLength="500"
|
||||
:editorConfig="{ lineNumbers: true }"
|
||||
contenteditable="true"
|
||||
@paste="onPaste"
|
||||
/>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 24, sm: 12, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="机密信息（选填）" name="confidential">
|
||||
<a-textarea :rows="3" v-model:value="confidential" placeholder="请在此处填写项目名、账号、密码等机密信息，提交后机密信息将做加密处理"></a-textarea>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 12, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="上传附件（选填）" name="files">
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
class="upload-list-inline"
|
||||
list-type="picture"
|
||||
:before-upload="onBeforeUpload"
|
||||
>
|
||||
<a-button>
|
||||
<UploadOutlined />
|
||||
上传附件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="submit-btn">
|
||||
<a-button type="primary" size="large" block @click="save"
|
||||
>提交</a-button
|
||||
>
|
||||
</div>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</a-form>
|
||||
</div>
|
||||
</a-col>
|
||||
<!-- 右侧区域-->
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
|
||||
: { span: 12 }
|
||||
"
|
||||
class="gutter-row"
|
||||
:span="6"
|
||||
v-if="screenWidth > 500"
|
||||
>
|
||||
<Tools :appId="appId" />
|
||||
<Help />
|
||||
<Links />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 指派人员 -->
|
||||
<Assign v-model:visible="showUser" @done="doneUser" />
|
||||
<!-- 工单二维码 -->
|
||||
<TaskQrcode v-model:visible="showQrcode" :data="task" @done="doneQrcode"/>
|
||||
<!-- 项目信息 -->
|
||||
<AppInfo v-model:visible="showAppInfo" :appId="appId" @done="doneQrcode"/>
|
||||
<!-- 编辑弹窗 -->
|
||||
<TaskEdit v-model:visible="showEdit" :data="task" @done="reload"/>
|
||||
<!-- 编辑弹窗 -->
|
||||
<TaskRecordEdit v-model:visible="showEditRecord" :data="currentRecord" @done="reload"/>
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref, unref, watch } from "vue";
|
||||
import {
|
||||
StarOutlined,
|
||||
LikeOutlined,
|
||||
MessageOutlined, ExclamationCircleOutlined
|
||||
} from "@ant-design/icons-vue";
|
||||
import 'bytemd/dist/index.min.css';
|
||||
import 'github-markdown-css/github-markdown-light.css';
|
||||
// // 链接、删除线、复选框、表格等的插件
|
||||
import gfm from '@bytemd/plugin-gfm';
|
||||
// // 插件的中文语言文件
|
||||
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
|
||||
// 中文语言文件
|
||||
import zh_Hans from 'bytemd/locales/zh_Hans.json';
|
||||
import 'bytemd/dist/index.min.css';
|
||||
import highlight from '@bytemd/plugin-highlight-ssr';
|
||||
import 'highlight.js/styles/default.css';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { getTask, removeTask, updateTask } from "@/api/oa/task";
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { decrypt, encrypt, getVersion, isImage, openUrl } from "@/utils/common";
|
||||
import { Article } from '@/api/cms/article/model';
|
||||
import { TaskRecord } from '@/api/oa/task-record/model';
|
||||
import { addTaskRecord, pageTaskRecord, removeTaskRecord } from "@/api/oa/task-record";
|
||||
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
|
||||
import { uploadOss } from "@/api/system/file";
|
||||
import { message, Modal } from "ant-design-vue";
|
||||
import { timeAgo } from "ele-admin-pro";
|
||||
import { toTreeData } from "ele-admin-pro/es";
|
||||
import { useParamsStore } from "@/store/modules/params";
|
||||
import Assign from './components/assign.vue'
|
||||
import AppInfo from './components/app-info.vue';
|
||||
import TaskEdit from './components/task-edit.vue';
|
||||
import TaskRecordEdit from './components/task-record-edit.vue';
|
||||
import TaskQrcode from './components/task-qrcode.vue'
|
||||
import Links from './components/links.vue'
|
||||
import Help from './components/Help.vue'
|
||||
import { Task } from "@/api/oa/task/model";
|
||||
import { CLOSED, COMPLETED, PENDING, PROCESSING, TOBEARRANGED, TOBECONFIRMED } from "@/api/oa/task/model/progress";
|
||||
import { useUserStore } from "@/store/modules/user";
|
||||
import Tools from "@/views/oa/task/components/tools.vue";
|
||||
import { ACTION_1, ACTION_2, ACTION_3, TASK_STATUS_1 } from "@/api/oa/task/model/task";
|
||||
import { hasRole } from "@/utils/permission";
|
||||
import {setPageTabTitle} from "@/utils/page-tab-util";
|
||||
import {User} from "@/api/system/user/model";
|
||||
const ROUTE_PATH = '/oa/task/detail';
|
||||
|
||||
const { currentRoute } = useRouter();
|
||||
// 选中步骤
|
||||
const active = ref(0);
|
||||
const { push } = useRouter();
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const param = useParamsStore();
|
||||
const user = useUserStore();
|
||||
const { styleResponsive, screenWidth } = storeToRefs(themeStore);
|
||||
const title = ref('');
|
||||
const version = ref<number>(0);
|
||||
const taskProgressDict = [{ label: "待分派", value: TOBEARRANGED },{ label: "待处理", value: PENDING },{ label: "处理中", value: PROCESSING },{ label: "待评价", value: TOBECONFIRMED },{ label: "已完成", value: COMPLETED },{ label: "已关闭", value: CLOSED }];
|
||||
const articleList = ref<Article[]>([]);
|
||||
const taskId = ref<Number>(0);
|
||||
const appId = ref<Number>(0);
|
||||
const loginUserId = ref(0);
|
||||
const commander = ref(0);
|
||||
const taskRecord = ref<TaskRecord[]>([]);
|
||||
const current = ref(1);
|
||||
const total = ref();
|
||||
const content = ref('');
|
||||
const confidential = ref<string>('');
|
||||
const currentRecord = ref<TaskRecord | any>();
|
||||
const taskStatus = ref(true);
|
||||
const loading = ref(false);
|
||||
const showUser = ref(false);
|
||||
const showQrcode = ref(false);
|
||||
const showAppInfo = ref(false);
|
||||
const showEdit = ref(false);
|
||||
const showEditRecord = ref(false);
|
||||
const fileList = ref<any[]>([]);
|
||||
const files = ref<any[]>([]);
|
||||
const task = ref<Task | any>();
|
||||
|
||||
// 用户信息
|
||||
const { form, assignFields, resetFields } = useFormData<TaskRecord>({
|
||||
children: [],
|
||||
content: "",
|
||||
developerId: 0,
|
||||
files: "",
|
||||
parentId: 0,
|
||||
sortNumber: 0,
|
||||
status: "",
|
||||
toUser: {},
|
||||
userId: 0,
|
||||
taskRecordId: 0,
|
||||
taskId: 0,
|
||||
appId: 0,
|
||||
nickname: undefined,
|
||||
avatar: '',
|
||||
comments: ''
|
||||
});
|
||||
|
||||
const actions: Record<string, any>[] = [
|
||||
{ icon: StarOutlined, text: '156' },
|
||||
{ icon: LikeOutlined, text: '156' },
|
||||
{ icon: MessageOutlined, text: '回复' }
|
||||
];
|
||||
|
||||
const onReply = (item: TaskRecord) => {
|
||||
currentRecord.value = item;
|
||||
form.parentId = item.userId;
|
||||
}
|
||||
|
||||
const openUser = () => {
|
||||
showUser.value = true;
|
||||
}
|
||||
|
||||
const openAppInfo = (id:number) => {
|
||||
openUrl('/oa/app/detail/' + id)
|
||||
// showAppInfo.value = true;
|
||||
}
|
||||
|
||||
const openQrcode = () => {
|
||||
showQrcode.value = true;
|
||||
}
|
||||
|
||||
const openEdit = () => {
|
||||
showEdit.value = true;
|
||||
}
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEditRecord = (row?: TaskRecord) => {
|
||||
currentRecord.value = row ?? null;
|
||||
showEditRecord.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = () => {
|
||||
Modal.confirm({
|
||||
title: '操作提示',
|
||||
content: '确定要删除吗？',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeTask(form.taskId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
push('/system/my-task')
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const removeRecord = (item) => {
|
||||
removeTaskRecord(item.taskRecordId)
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 指派人员
|
||||
* 状态变为：待处理
|
||||
* @param item
|
||||
*/
|
||||
const doneUser = async (item: User) => {
|
||||
form.toUser = item
|
||||
const msg = await updateTask({ taskId: form.taskId, progress: PENDING, commander: item.userId, action: ACTION_1 })
|
||||
if(msg){
|
||||
active.value = PENDING
|
||||
const data: any = {
|
||||
taskId: form.taskId,
|
||||
content: `已指派给${item.nickname}(工号：${item.userId})`
|
||||
}
|
||||
await addTaskRecord(data)
|
||||
showUser.value = false;
|
||||
reload();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 工单二维码
|
||||
* @param item
|
||||
*/
|
||||
const doneQrcode = async (item: Task) => {
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 技术人员已处理完
|
||||
* 状态变为：待评价
|
||||
*/
|
||||
const onResolved = async () => {
|
||||
Modal.confirm({
|
||||
title: '操作提示',
|
||||
content: '请回复处理结果！确定要变更状态为已处理吗？',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
const msg = updateTask({ taskId: form.taskId, progress: TOBECONFIRMED, status: TASK_STATUS_1, action: ACTION_2 }).then(async res => {
|
||||
const data: any = {
|
||||
taskId: form.taskId,
|
||||
content: '问题已处理,请查看并确认'
|
||||
}
|
||||
await addTaskRecord(data)
|
||||
setTimeout(() => {
|
||||
hide();
|
||||
active.value = TOBECONFIRMED;
|
||||
message.success("问题已处理，请查看并确认");
|
||||
push('/system/my-task')
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 确认已完成
|
||||
*/
|
||||
const onConfirmCompleted = () => {
|
||||
Modal.confirm({
|
||||
title: '操作提示',
|
||||
content: '感谢您的支持！请给技术人员评价！',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
updateTask({taskId: form.taskId,status: TASK_STATUS_1, progress: COMPLETED}).then(() => {
|
||||
message.success("操作成功");
|
||||
push('/system/my-task')
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭工单
|
||||
*/
|
||||
const onClose = () => {
|
||||
Modal.confirm({
|
||||
title: '操作提示',
|
||||
content: '确定要操作吗？',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
const taskId = form.taskId
|
||||
const action = ACTION_3;
|
||||
// 关闭
|
||||
let status = 1;
|
||||
let progress = CLOSED;
|
||||
active.value = CLOSED;
|
||||
// 重开
|
||||
if(!taskStatus.value){
|
||||
status = 0;
|
||||
progress = PROCESSING;
|
||||
active.value = TOBECONFIRMED;
|
||||
}
|
||||
const msg = updateTask({ taskId, progress, status, action }).then(res => {
|
||||
setTimeout(() => {
|
||||
hide();
|
||||
message.success("操作成功");
|
||||
if (taskStatus.value) {
|
||||
push('/system/my-task')
|
||||
}else {
|
||||
reload();
|
||||
}
|
||||
},300)
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
// 文件上传事件
|
||||
const onBeforeUpload = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
}
|
||||
if (!file.type.startsWith("image")) {
|
||||
if (file.size / 1024 / 1024 > 100) {
|
||||
message.error("大小不能超过 100MB");
|
||||
return;
|
||||
}
|
||||
}
|
||||
onUpload(item);
|
||||
return false;
|
||||
};
|
||||
|
||||
const onUpload = (d: ItemType) => {
|
||||
uploadOss(<File>d.file)
|
||||
.then((result) => {
|
||||
files.value.push({
|
||||
uid: result.id,
|
||||
url: result.path,
|
||||
name: isImage(result.path) ? 'image' : result.name,
|
||||
status: "done"
|
||||
});
|
||||
message.success("上传成功");
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 粘贴图片上传服务器并插入编辑器 */
|
||||
const onPaste = (e) => {
|
||||
const items = (e.clipboardData || e.originalEvent.clipboardData).items;
|
||||
let hasFile = false;
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (items[i].type.indexOf('image') !== -1) {
|
||||
let file = items[i].getAsFile();
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).lastModified,
|
||||
name: file.name
|
||||
};
|
||||
uploadOss(<File>item.file)
|
||||
.then((result) => {
|
||||
const addPath = '\n\r';
|
||||
content.value = content.value + addPath
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
hasFile = true;
|
||||
}
|
||||
}
|
||||
if (hasFile) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
// 检查是否填写内容
|
||||
if (content.value == '') {
|
||||
message.error('请填写内容')
|
||||
return false;
|
||||
}
|
||||
loading.value = true;
|
||||
const data = {
|
||||
...form,
|
||||
content: content.value,
|
||||
taskId: form.taskId,
|
||||
parentId: currentRecord.value?.taskRecordId,
|
||||
files: JSON.stringify(files.value),
|
||||
confidential: encrypt(confidential.value)
|
||||
};
|
||||
// 加密信息处理
|
||||
if(confidential.value != ''){
|
||||
data.confidential = encrypt(confidential.value)
|
||||
}else {
|
||||
data.confidential = undefined
|
||||
}
|
||||
addTaskRecord(data)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
content.value = '';
|
||||
fileList.value = [];
|
||||
files.value = [];
|
||||
confidential.value = '';
|
||||
message.success('回复成功')
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 加载数据
|
||||
*/
|
||||
const reload = () => {
|
||||
version.value = <number>getVersion();
|
||||
if (form.taskId) {
|
||||
const taskId = form.taskId;
|
||||
getTask(taskId).then((data) => {
|
||||
task.value = data;
|
||||
commander.value = Number(data.commander);
|
||||
active.value = Number(data.progress);
|
||||
appId.value = Number(data.appId);
|
||||
form.appId = Number(data.appId);
|
||||
title.value = `【${taskId}】${data.name}`
|
||||
setPageTabTitle(`${data.name}`)
|
||||
// 兼容小屏幕
|
||||
if (screenWidth.value < 480) {
|
||||
title.value = `工单号：${taskId}`
|
||||
}
|
||||
if(data.progress == CLOSED){
|
||||
taskStatus.value = false;
|
||||
}else{
|
||||
taskStatus.value = true;
|
||||
}
|
||||
});
|
||||
pageTaskRecord({ taskId ,page: current.value, limit: 100}).then((res) => {
|
||||
taskRecord.value = toTreeData({
|
||||
data: res?.list.map((d) => {
|
||||
return { ...d, key: d.taskRecordId, value: d.taskRecordId };
|
||||
}),
|
||||
idField: 'taskRecordId',
|
||||
parentIdField: 'parentId'
|
||||
});
|
||||
total.value = res?.count;
|
||||
});
|
||||
}
|
||||
if(user.info){
|
||||
const { userId } = user?.info
|
||||
loginUserId.value = Number(userId);
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
currentRoute,
|
||||
(route) => {
|
||||
const { params } = unref(route);
|
||||
const { id } = params;
|
||||
if (id) {
|
||||
form.taskId = Number(id);
|
||||
reload();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'TaskDetail'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.task-card {
|
||||
padding: 2px !important;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.user-content {
|
||||
max-width: 100%;
|
||||
border-radius: 8px !important;
|
||||
background-color: #a2ec71;
|
||||
border: none;
|
||||
}
|
||||
.admin-content {
|
||||
border-radius: 8px !important;
|
||||
border: 3px solid #f1f1f1;
|
||||
}
|
||||
/deep/.markdown-body{
|
||||
background-color: transparent; /* 设置背景透明 */
|
||||
}
|
||||
/deep/.markdown-body img {
|
||||
max-width: 360px;
|
||||
}
|
||||
.files{
|
||||
margin-top: 10px;
|
||||
}
|
||||
#bottom{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.transparent-bg{
|
||||
background-color: transparent; /* 设置背景透明 */
|
||||
}
|
||||
.submit-btn{
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,178 @@
|
||||
<!-- 分类编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="460"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate ? '修改分类' : '添加分类'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="分类标识" name="dictCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
disabled
|
||||
placeholder="请输入分类标识"
|
||||
v-model:value="form.dictCode"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="分类名称" name="dictDataName">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入分类名称"
|
||||
v-model:value="form.dictDataName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sortNumber">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="99999"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入排序号"
|
||||
v-model:value="form.sortNumber"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入备注"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { addDictData, updateDictData } from '@/api/system/dict-data';
|
||||
import { DictData } from '@/api/system/dict-data/model';
|
||||
import {removeSiteInfoCache} from "@/api/cms/website";
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: DictData | null;
|
||||
// 字典ID
|
||||
dictId?: number | 0;
|
||||
}>();
|
||||
|
||||
//
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<DictData>({
|
||||
dictId: undefined,
|
||||
dictDataId: undefined,
|
||||
dictDataName: '',
|
||||
dictCode: 'taskType',
|
||||
dictDataCode: '',
|
||||
sortNumber: 100,
|
||||
comments: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
dictDataCode: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入分类名称',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
dictCode: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入分类标识',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const saveOrUpdate = isUpdate.value ? updateDictData : addDictData;
|
||||
form.dictDataCode = form.dictDataName;
|
||||
form.dictId = props.dictId;
|
||||
saveOrUpdate(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
// 清除字典缓存
|
||||
removeSiteInfoCache(form.dictCode + ':' + form.tenantId);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignFields(props.data);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="dictDataId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
v-model:selection="selection"
|
||||
:scroll="{ x: 800 }"
|
||||
cache-key="proSystemRoleTable"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button type="primary" class="ele-btn-icon" @click="openEdit()">
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="removeBatch"
|
||||
>
|
||||
<template #icon>
|
||||
<delete-outlined />
|
||||
</template>
|
||||
<span>删除</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="openEdit(record)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
placement="topRight"
|
||||
title="确定要删除此分类吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<dict-edit
|
||||
v-model:visible="showEdit"
|
||||
:dictId="dictId"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue/es';
|
||||
import {
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { messageLoading } from 'ele-admin-pro/es';
|
||||
import DictEdit from './components/dict-edit.vue';
|
||||
import {
|
||||
pageDictData,
|
||||
removeDictData,
|
||||
removeDictDataBatch
|
||||
} from '@/api/system/dict-data';
|
||||
import { DictParam } from '@/api/system/dict/model';
|
||||
import { DictData } from '@/api/system/dict-data/model';
|
||||
import { addDict, listDictionaries } from '@/api/system/dict';
|
||||
import { Dictionary } from '@/api/system/dictionary/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
const dictId = ref(0);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'dictDataId',
|
||||
width: 80,
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: '分类名称',
|
||||
dataIndex: 'dictDataName',
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '排序号',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'sortNumber'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
align: 'center'
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<DictData[]>([]);
|
||||
|
||||
// 当前编辑数据
|
||||
const current = ref<Dictionary | null>(null);
|
||||
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
where.dictCode = 'taskType';
|
||||
return pageDictData({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: DictParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: DictData) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: DictData) => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeDictData(row.dictDataId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的分类吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeDictDataBatch(selection.value.map((d) => d.dictDataId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化字典
|
||||
const loadDict = () => {
|
||||
listDictionaries({ dictCode: 'taskType' }).then(async (data) => {
|
||||
if (data?.length == 0) {
|
||||
await addDict({ dictCode: 'taskType', dictName: '工单分类' });
|
||||
}
|
||||
await listDictionaries({ dictCode: 'taskType' }).then((list) => {
|
||||
list?.map((d) => {
|
||||
dictId.value = Number(d.dictId);
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
loadDict();
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: DictData) => {
|
||||
return {
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'TaskDictData'
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<a-card :bordered="false" title="工单分类">
|
||||
<a-list
|
||||
class="demo-loadmore-list"
|
||||
item-layout="horizontal"
|
||||
:data-source="list"
|
||||
>
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<template #actions>
|
||||
<a-popover>
|
||||
<template #content> 待处理 </template>
|
||||
<a class="ele-text-danger">{{ item.pending }}</a>
|
||||
</a-popover>
|
||||
<a-popover>
|
||||
<template #content> 本月处理数 </template>
|
||||
<a class="ele-text-secondary">{{ item.month }}</a>
|
||||
</a-popover>
|
||||
</template>
|
||||
<a-skeleton avatar :title="false" :loading="!!item.loading" active>
|
||||
<a-list-item-meta>
|
||||
<template #title>
|
||||
{{ item.nickname }}
|
||||
</template>
|
||||
<template #avatar>
|
||||
<a-avatar :src="item.avatar" />
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-skeleton>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { pageTaskCount } from '@/api/oa/task-count';
|
||||
import { TaskCount } from '@/api/oa/task-count/model';
|
||||
import { UserAddOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
const showQrcode = ref(false);
|
||||
const list = ref<TaskCount[]>([]);
|
||||
|
||||
pageTaskCount({ limit: 10, roleCode: 'commander' }).then((res) => {
|
||||
if (res) {
|
||||
list.value = res?.list;
|
||||
}
|
||||
});
|
||||
|
||||
const onShowQrcode = () => {
|
||||
showQrcode.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.monitor-evaluate-text {
|
||||
width: 90px;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
opacity: 0.8;
|
||||
|
||||
& > .anticon {
|
||||
font-size: 12px;
|
||||
margin: 0 6px 0 8px;
|
||||
}
|
||||
}
|
||||
/deep/.ant-list-item {
|
||||
padding: 7px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="taskId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search @search="reload" :selection="selection" />
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'content'">
|
||||
<div class="user-box">
|
||||
<div class="user-info">
|
||||
<a-badge
|
||||
:dot="!record.isRead && record.userId != userStore.info?.userId"
|
||||
>
|
||||
<a-avatar :src="record.lastAvatar" size="large" />
|
||||
</a-badge>
|
||||
</div>
|
||||
<div class="content" style="display: flex; flex-direction: column">
|
||||
<div class="nickname">
|
||||
<span class="ele-text-secondary">{{
|
||||
record.lastNickname ? record.lastNickname : '未知'
|
||||
}}</span>
|
||||
<span class="ele-text-placeholder" style="padding-left: 10px">{{
|
||||
timeAgo(record.updateTime)
|
||||
}}</span>
|
||||
</div>
|
||||
<a
|
||||
class="ele-text-heading"
|
||||
:href="'/oa/task/detail/' + record.taskId"
|
||||
>{{ record.content }}</a
|
||||
>
|
||||
</div>
|
||||
<div class="last-time ele-text-info"> </div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a
|
||||
v-if="record.commander === userStore.info?.userId"
|
||||
@click="openUrl('/oa/task/detail/' + record.taskId)"
|
||||
>立即处理</a
|
||||
>
|
||||
<a v-else @click="getTask(record)">领取任务</a>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'progress'">
|
||||
<a-progress :percent="record.progress * 2" :steps="5" />
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="onDetail(record)">查看</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
title="确定要删除此记录吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { timeAgo, toDateString } from 'ele-admin-pro';
|
||||
import Search from './search.vue';
|
||||
import { pageTask, removeTask, updateTask } from '@/api/oa/task';
|
||||
import type { Task, TaskParam } from '@/api/oa/task/model';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
|
||||
const userStore = useUserStore();
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
const selection = ref<any[]>();
|
||||
const status = ref<number>();
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
// 搜索条件
|
||||
where.userId = undefined;
|
||||
where.progress = 0;
|
||||
return pageTask({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<any[]>([
|
||||
{
|
||||
title: '工单号',
|
||||
dataIndex: 'taskId',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '工单类型',
|
||||
dataIndex: 'taskType',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '工单标题',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
customRender: ({ text }) => toDateString(text, 'MM月dd日 HH:mm')
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: TaskParam) => {
|
||||
status.value = where?.status;
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
const onDetail = (record?: Task) => {
|
||||
window.location.href = 'detail?id=' + record?.taskId;
|
||||
};
|
||||
|
||||
const getTask = (item: Task) => {
|
||||
item.commander = userStore.info?.userId;
|
||||
updateTask(item).then(() => {
|
||||
message.success('领取成功');
|
||||
reload();
|
||||
});
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Task) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeTask(row.taskId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 是否展现多选按钮及批量删除按钮
|
||||
if (hasRole('superAdmin') || hasRole('admin')) {
|
||||
selection.value = [];
|
||||
}
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Task) => {
|
||||
return {
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
window.open('/oa/task/detail/' + record.taskId);
|
||||
}
|
||||
};
|
||||
};
|
||||
//
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'TaskIndex'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.user-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.last-time {
|
||||
margin-left: 12px;
|
||||
}
|
||||
.content {
|
||||
.text {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<a-space :size="20" style="flex-wrap: wrap">
|
||||
<a-tabs tabPosition="top" v-model:activeKey="active" @change="onTabs">
|
||||
<a-tab-pane :key="0" tab="任务大厅" />
|
||||
<a-tab-pane :key="1" tab="已领取" />
|
||||
</a-tabs>
|
||||
</a-space>
|
||||
<a-space :size="10" style="flex-wrap: wrap; margin-right: 20px">
|
||||
<DictSelect
|
||||
dict-code="taskType"
|
||||
v-model:value="where.taskType"
|
||||
:placeholder="`选择分类`"
|
||||
style="width: 200px"
|
||||
@change="search"
|
||||
/>
|
||||
<SelectCompany
|
||||
:placeholder="`按客户筛选`"
|
||||
v-model:value="where.companyName"
|
||||
@done="chooseCompanyName"
|
||||
/>
|
||||
<!-- <SelectApp-->
|
||||
<!-- :placeholder="`按应用筛选`"-->
|
||||
<!-- v-model:value="where.appName"-->
|
||||
<!-- @done="chooseApp"-->
|
||||
<!-- />-->
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { TaskParam } from '@/api/oa/task/model';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { Company } from '@/api/system/company/model';
|
||||
import SelectCompany from '@/components/SelectCompany/index.vue';
|
||||
// import SelectApp from '@/components/SelectApp/index.vue';
|
||||
import DictSelect from '@/components/DictSelect/index.vue';
|
||||
import { App } from '@/api/oa/app/model';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where: TaskParam): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<TaskParam>({
|
||||
keywords: '',
|
||||
commander: undefined,
|
||||
companyId: undefined,
|
||||
companyName: '',
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
const userStore = useUserStore();
|
||||
const active = ref<number>(0);
|
||||
|
||||
const chooseCompanyName = (item: Company) => {
|
||||
where.companyId = item.companyId;
|
||||
where.companyName = item.companyName;
|
||||
search();
|
||||
};
|
||||
|
||||
const chooseApp = (item: App) => {
|
||||
where.appId = item.appId;
|
||||
where.appName = item.appName;
|
||||
search();
|
||||
};
|
||||
|
||||
const onTabs = () => {
|
||||
if (active.value == 1) {
|
||||
where.commander = userStore.info?.userId;
|
||||
} else {
|
||||
where.commander = undefined;
|
||||
where.progress = undefined;
|
||||
}
|
||||
search();
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
search();
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
console.log(where);
|
||||
emit('search', where);
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 18, lg: 18, md: 16, sm: 24, xs: 24 }
|
||||
: { span: 6 }
|
||||
"
|
||||
>
|
||||
<PendingAll />
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 6, lg: 6, md: 8, sm: 24, xs: 24 }
|
||||
: { span: 12 }
|
||||
"
|
||||
>
|
||||
<Tools />
|
||||
<CountUser />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import Tools from '@/views/oa/task/components/tools.vue';
|
||||
import PendingAll from './components/pending-all.vue';
|
||||
import CountUser from '@/views/oa/task/components/count-user.vue';
|
||||
// import { notification } from 'ant-design-vue';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
/**
|
||||
* 测试账号
|
||||
*/
|
||||
// const openNotification = () => {
|
||||
// notification['warning']({
|
||||
// message: '管理人员',
|
||||
// description: '分派专员/123456'
|
||||
// });
|
||||
// notification['warning']({
|
||||
// message: '技术人员1',
|
||||
// description: '张工/123456'
|
||||
// });
|
||||
// notification['warning']({
|
||||
// message: '客户1',
|
||||
// description: '客户1/123456'
|
||||
// });
|
||||
// };
|
||||
// openNotification();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CountIndex'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.a-cursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 18, lg: 18, md: 16, sm: 24, xs: 24 }
|
||||
: { span: 6 }
|
||||
"
|
||||
>
|
||||
<CountPending />
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 6, lg: 6, md: 8, sm: 24, xs: 24 }
|
||||
: { span: 12 }
|
||||
"
|
||||
>
|
||||
<Carousel />
|
||||
<CountUser
|
||||
v-if="
|
||||
hasRole('commander') || hasRole('admin') || hasRole('superAdmin')
|
||||
"
|
||||
style="margin-top: 17px"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import CountNum from './components/count-num.vue';
|
||||
import Carousel from './components/carousel.vue';
|
||||
import Tools from './components/tools.vue';
|
||||
import CountUser from './components/count-user.vue';
|
||||
import CountPending from './search/index.vue';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
// import { notification } from 'ant-design-vue';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
/**
|
||||
* 测试账号
|
||||
*/
|
||||
// const openNotification = () => {
|
||||
// notification['warning']({
|
||||
// message: '管理人员',
|
||||
// description: '分派专员/123456'
|
||||
// });
|
||||
// notification['warning']({
|
||||
// message: '技术人员1',
|
||||
// description: '张工/123456'
|
||||
// });
|
||||
// notification['warning']({
|
||||
// message: '客户1',
|
||||
// description: '客户1/123456'
|
||||
// });
|
||||
// };
|
||||
// openNotification();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CountIndex'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.a-cursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<a-space style="flex-wrap: wrap">
|
||||
<a-button type="primary" class="ele-btn-icon" @click="openUrl('/system/my-task/add')">
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
<span>提交工单</span>
|
||||
</a-button>
|
||||
<a-radio-group v-model:value="where.status" @change="search">
|
||||
<a-radio-button value="0">待处理</a-radio-button>
|
||||
<a-radio-button value="1">已完成</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-button
|
||||
danger
|
||||
v-if="selection?.length"
|
||||
class="ele-btn-icon"
|
||||
@click="removeBatch"
|
||||
>
|
||||
<template #icon>
|
||||
<DeleteOutlined />
|
||||
</template>
|
||||
<span>批量删除</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
<a-space :size="10" style="flex-wrap: wrap; margin-right: 20px">
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="工单号|关键词"
|
||||
v-model:value="where.keywords"
|
||||
@pressEnter="search"
|
||||
@search="search"
|
||||
/>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { TaskParam } from '@/api/oa/task/model';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import { App } from '@/api/oa/app/model';
|
||||
import DictSelect from '@/components/DictSelect/index.vue';
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { openUrl } from "@/utils/common";
|
||||
|
||||
const props = defineProps<{
|
||||
// 勾选的项目
|
||||
selection?: [];
|
||||
status?: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where: TaskParam): void;
|
||||
(e: 'remove'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<TaskParam>({
|
||||
keywords: '',
|
||||
status: undefined,
|
||||
commander: undefined
|
||||
});
|
||||
|
||||
const removeBatch = () => {
|
||||
emit('remove');
|
||||
};
|
||||
|
||||
const chooseApp = (data: App) => {
|
||||
where.appName = data.appName;
|
||||
where.appId = data.appId;
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
const chooseCommander = (data: User) => {
|
||||
console.log(data);
|
||||
where.nickname = data.nickname;
|
||||
where.commander = data.userId;
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
search();
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
if (props.status == undefined) {
|
||||
where.status = '0';
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="taskId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search @search="reload" :selection="selection" @remove="removeBatch" />
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'content'">
|
||||
<div class="user-box">
|
||||
<div class="user-info">
|
||||
<a-badge
|
||||
:dot="!record.isRead && record.userId != userStore.info?.userId"
|
||||
>
|
||||
<a-avatar :src="record.avatar" size="large" />
|
||||
</a-badge>
|
||||
</div>
|
||||
<div class="content" style="display: flex; flex-direction: column">
|
||||
<div class="nickname">
|
||||
<span class="ele-text-secondary">
|
||||
{{ `${record.nickname}` }}
|
||||
</span>
|
||||
<span class="ele-text-placeholder" style="padding-left: 10px">{{
|
||||
timeAgo(record.createTime)
|
||||
}}</span>
|
||||
</div>
|
||||
<a
|
||||
class="ele-text-heading"
|
||||
@click="openUrl('/oa/task/detail/' + record.taskId)"
|
||||
>
|
||||
{{ `工单标题：${record.name}` }}
|
||||
</a>
|
||||
<div class="ele-text-placeholder">{{
|
||||
record.appId > 0 ? `项目名称：【${record.appName}】` : ''
|
||||
}}</div>
|
||||
<div
|
||||
class="ele-text-secondary"
|
||||
style="display: flex; align-items: center"
|
||||
>
|
||||
<a-avatar :size="18" :src="record.lastAvatar" />
|
||||
<div class="content" style="padding-left: 8px">
|
||||
{{ record.content }}
|
||||
</div>
|
||||
<span class="ele-text-placeholder" style="padding-left: 10px">{{
|
||||
timeAgo(record.updateTime)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="last-time ele-text-info"> </div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-tag v-if="record.progress === TOBEARRANGED" color="red"
|
||||
>待安排</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === PENDING" color="orange"
|
||||
>待处理</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === PROCESSING" color="purple"
|
||||
>处理中</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === TOBECONFIRMED" color="cyan"
|
||||
>待评价</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === COMPLETED" color="green"
|
||||
>已完成</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === CLOSED">已关闭</a-tag>
|
||||
<div class="ele-text-danger" v-if="record.overdueDays">
|
||||
已逾期{{ record.overdueDays }}天
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'progress'">
|
||||
<a-progress :percent="record.progress * 2" :steps="5" />
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="onDetail(record)">查看</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
title="确定要删除此记录吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { timeAgo } from 'ele-admin-pro';
|
||||
import Search from './components/search.vue';
|
||||
import { pageTask, removeTask, removeBatchTask } from '@/api/oa/task';
|
||||
import type { Task, TaskParam } from '@/api/oa/task/model';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import {
|
||||
CLOSED,
|
||||
COMPLETED,
|
||||
PENDING,
|
||||
PROCESSING,
|
||||
TOBEARRANGED,
|
||||
TOBECONFIRMED
|
||||
} from '@/api/oa/task/model/progress';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { openUrl } from '@/utils/common';
|
||||
|
||||
const userStore = useUserStore();
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
const selection = ref<any[]>([]);
|
||||
const status = ref<number>();
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
// 搜索条件
|
||||
where.userId = undefined;
|
||||
where.commander = userStore.info?.userId;
|
||||
if (where.status != 1) {
|
||||
where.status = 0;
|
||||
}
|
||||
// 工单发起人
|
||||
if (hasRole('promoter') || hasRole('user')) {
|
||||
where.commander = undefined;
|
||||
where.userId = userStore.info?.userId;
|
||||
}
|
||||
// 管理人员
|
||||
if (hasRole('superAdmin') || hasRole('admin')) {
|
||||
where.commander = undefined;
|
||||
}
|
||||
// 工单受理人员
|
||||
if (hasRole('commander')) {
|
||||
where.commander = userStore.info?.userId;
|
||||
}
|
||||
return pageTask({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<any[]>([
|
||||
{
|
||||
title: '工单号',
|
||||
dataIndex: 'taskId',
|
||||
align: 'center',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '工单类型',
|
||||
dataIndex: 'taskType',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '工单信息',
|
||||
dataIndex: 'content',
|
||||
key: 'content',
|
||||
ellipsis: true
|
||||
},
|
||||
// {
|
||||
// title: '所属项目',
|
||||
// dataIndex: 'appName',
|
||||
// width: 120,
|
||||
// ellipsis: true,
|
||||
// key: 'appName'
|
||||
// },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
width: 120
|
||||
}
|
||||
// {
|
||||
// title: '创建时间',
|
||||
// dataIndex: 'createTime',
|
||||
// key: 'createTime',
|
||||
// align: 'center',
|
||||
// showSorterTooltip: true,
|
||||
// hideInSetting: true,
|
||||
// ellipsis: true,
|
||||
// width: 150,
|
||||
// customRender: ({ text }) => toDateString(text, 'MM月dd日 HH:mm')
|
||||
// }
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: TaskParam) => {
|
||||
status.value = where?.status;
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
const onDetail = (record?: Task) => {
|
||||
window.location.href = 'detail?id=' + record?.taskId;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Task) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeTask(row.taskId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value?.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
if (selection.value?.length) {
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchTask(selection.value.map((d) => d.taskId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 是否展现多选按钮及批量删除按钮
|
||||
if (hasRole('superAdmin') || hasRole('admin')) {
|
||||
selection.value = [];
|
||||
}
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Task) => {
|
||||
return {
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openUrl('/oa/task/detail/' + record.taskId);
|
||||
}
|
||||
};
|
||||
};
|
||||
//
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'TaskIndex'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.user-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.last-time {
|
||||
margin-left: 12px;
|
||||
}
|
||||
.content {
|
||||
.text {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nickname {
|
||||
.ele-text-heading {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user