Initial commit
This commit is contained in:
南宁网宿科技
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="750"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:title="title"
|
||||
:footer="null"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
>
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="userId"
|
||||
:datasource="datasource"
|
||||
:columns="columns"
|
||||
:customRow="customRow"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
v-model:value="searchText"
|
||||
placeholder="请输入搜索关键词"
|
||||
style="width: 200px"
|
||||
@search="reload"
|
||||
@pressEnter="reload"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button type="link">选择</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import {
|
||||
ColumnItem,
|
||||
DatasourceFunction
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { pageUsers } from '@/api/system/user';
|
||||
import { User, UserParam } from '@/api/system/user/model';
|
||||
import { EleProTable } from 'ele-admin-pro';
|
||||
|
||||
defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
title?: string;
|
||||
// 修改回显的数据
|
||||
data?: User | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', data: User): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 搜索内容
|
||||
const searchText = ref(null);
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'nickname'
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone'
|
||||
},
|
||||
{
|
||||
title: '所属部门',
|
||||
dataIndex: 'organizationName'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
where = {};
|
||||
// 搜索条件
|
||||
if (searchText.value) {
|
||||
where.keywords = searchText.value;
|
||||
}
|
||||
where.isStaff = true;
|
||||
return pageUsers({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: UserParam) => {
|
||||
// selection.value = [];
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: User) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
updateVisible(false);
|
||||
emit('done', record);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="less"></style>
|
||||
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="750"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:title="title"
|
||||
:footer="null"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
>
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="userId"
|
||||
:datasource="datasource"
|
||||
:columns="columns"
|
||||
:customRow="customRow"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
v-model:value="searchText"
|
||||
placeholder="请输入搜索关键词"
|
||||
style="width: 200px"
|
||||
@search="reload"
|
||||
@pressEnter="reload"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button type="link">选择</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import {
|
||||
ColumnItem,
|
||||
DatasourceFunction
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { pageUsers } from '@/api/system/user';
|
||||
import { User, UserParam } from '@/api/system/user/model';
|
||||
import { EleProTable } from 'ele-admin-pro';
|
||||
|
||||
defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
title?: string;
|
||||
// 修改回显的数据
|
||||
data?: User | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', data: User): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 搜索内容
|
||||
const searchText = ref(null);
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'nickname'
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone'
|
||||
},
|
||||
{
|
||||
title: '所属部门',
|
||||
dataIndex: 'organizationName'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
where = {};
|
||||
// 搜索条件
|
||||
if (searchText.value) {
|
||||
where.keywords = searchText.value;
|
||||
}
|
||||
where.isStaff = true;
|
||||
return pageUsers({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: UserParam) => {
|
||||
// selection.value = [];
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: User) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
updateVisible(false);
|
||||
emit('done', record);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="less"></style>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-input-group compact>
|
||||
<a-input
|
||||
disabled
|
||||
style="width: calc(100% - 32px)"
|
||||
v-model:value="value"
|
||||
:placeholder="placeholder"
|
||||
/>
|
||||
<a-button @click="openEdit">
|
||||
<template #icon><BulbOutlined class="ele-text-warning" /></template>
|
||||
</a-button>
|
||||
</a-input-group>
|
||||
<!-- 选择弹窗 -->
|
||||
<select-data
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
:title="placeholder"
|
||||
@done="onChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { BulbOutlined } from '@ant-design/icons-vue';
|
||||
import { ref } from 'vue';
|
||||
import SelectData from './components/select-data.vue';
|
||||
import { User } from '@/api/system/user/model';
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: any;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择数据'
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', User): void;
|
||||
(e: 'clear'): void;
|
||||
}>();
|
||||
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 当前编辑数据
|
||||
const current = ref<User | null>(null);
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: User) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
const onChange = (row) => {
|
||||
emit('done', row);
|
||||
};
|
||||
// 查询租户列表
|
||||
// const appList = ref<App[] | undefined>([]);
|
||||
</script>
|
||||
@@ -0,0 +1,129 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<a-button type="primary" class="ele-btn-icon" @click="add">
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
<span>添加应用</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
:disabled="selection.length === 0"
|
||||
@click="removeBatch"
|
||||
>
|
||||
<template #icon>
|
||||
<DeleteOutlined />
|
||||
</template>
|
||||
<span>批量删除</span>
|
||||
</a-button>
|
||||
<a-radio-group v-model:value="where.appStatus" @change="handleSearch">
|
||||
<a-radio-button value="开发中">开发中</a-radio-button>
|
||||
<a-radio-button value="运行中">运行中</a-radio-button>
|
||||
<a-radio-button value="维护中">维护中</a-radio-button>
|
||||
<a-radio-button value="已下架">已下架</a-radio-button>
|
||||
</a-radio-group>
|
||||
<SelectCompany
|
||||
:placeholder="`请选择业主单位`"
|
||||
v-model:value="where.companyName"
|
||||
@done="chooseCompanyName"
|
||||
/>
|
||||
<SelectCompany
|
||||
:placeholder="`请选择开发商`"
|
||||
v-model:value="where.developer"
|
||||
@done="chooseDeveloper"
|
||||
/>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入关键词"
|
||||
v-model:value="where.keywords"
|
||||
@pressEnter="search"
|
||||
@search="search"
|
||||
/>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { ref, watch } from 'vue';
|
||||
import { AppParam } from '@/api/oa/app/model';
|
||||
import { Company } from "@/api/system/company/model";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: AppParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'advanced'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<AppParam>({
|
||||
appId: undefined,
|
||||
userId: undefined,
|
||||
appStatus: '',
|
||||
companyId: undefined,
|
||||
companyName: '',
|
||||
keywords: ''
|
||||
});
|
||||
// 下来选项
|
||||
// 日期范围选择
|
||||
const dateRange = ref<[string, string]>(['', '']);
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
const [d1, d2] = dateRange.value ?? [];
|
||||
emit('search', {
|
||||
...where,
|
||||
createTimeStart: d1 ? d1 + ' 00:00:00' : '',
|
||||
createTimeEnd: d2 ? d2 + ' 23:59:59' : ''
|
||||
});
|
||||
};
|
||||
|
||||
// 发布应用
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
// 批量删除
|
||||
const removeBatch = () => {
|
||||
emit('remove');
|
||||
};
|
||||
|
||||
const chooseCompanyName = (data: Company) => {
|
||||
where.companyName = data.companyName;
|
||||
where.companyId = data.companyId;
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
const chooseDeveloper = (data: Company) => {
|
||||
where.developer = data.companyName;
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
search();
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="appId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
:scroll="{ x: 1200 }"
|
||||
class="sys-org-table"
|
||||
:striped="true"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@advanced="openAdvanced"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'appName'">
|
||||
<div class="app-box">
|
||||
<a-image
|
||||
:height="45"
|
||||
:width="45"
|
||||
:preview="false"
|
||||
:src="FILE_THUMBNAIL + record.appIcon"
|
||||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
|
||||
/>
|
||||
<div class="app-info">
|
||||
<a class="ele-text-heading" @click="openEdit(record)">
|
||||
{{ record.appName }}
|
||||
</a>
|
||||
<span class="ele-text-placeholder">
|
||||
{{ record.companyName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'appCode'">
|
||||
<span class="ele-text-placeholder">{{ record.appCode }}</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'appStatus'">
|
||||
<a-tag v-if="record.appStatus === '开发中'" color="red">{{
|
||||
record.appStatus
|
||||
}}</a-tag>
|
||||
<a-tag v-if="record.appStatus === '运行中'" color="success">{{
|
||||
record.appStatus
|
||||
}}</a-tag>
|
||||
<a-tag v-if="record.appStatus === '维护中'" color="orange">{{
|
||||
record.appStatus
|
||||
}}</a-tag>
|
||||
<a-tag v-if="record.appStatus === '已下架'">{{
|
||||
record.appStatus
|
||||
}}</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'appUrl'">
|
||||
<a-tooltip v-if="record.appUrl" :title="record.appUrl">
|
||||
<a @click="openUrl(record.appUrl)">前往</a>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'appTypeMultiple'">
|
||||
<a-space
|
||||
:size="2"
|
||||
direction="vertical"
|
||||
v-if="record.appTypeMultiple"
|
||||
>
|
||||
<a-tag
|
||||
v-for="(item, index) in JSON.parse(record.appTypeMultiple)"
|
||||
:key="index"
|
||||
class="ele-text-placeholder"
|
||||
>{{ item }}</a-tag
|
||||
>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-if="column.key === 'appQrcode'">
|
||||
<a-image
|
||||
v-if="record.appQrcode"
|
||||
:height="45"
|
||||
:width="45"
|
||||
:src="record.appQrcode"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="column.key === 'createTime'">
|
||||
{{ record.createTime }}
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button @click="openEdit(record)">管理</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
<AppEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
</div>
|
||||
</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 { openUrl } from '@/utils/common';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import AppEdit from './components/app-edit.vue';
|
||||
import { FILE_THUMBNAIL } from '@/config/setting';
|
||||
import { pageApp, removeBatchApp, removeApp } from '@/api/oa/app';
|
||||
import { App, AppParam } from '@/api/oa/app/model';
|
||||
|
||||
defineProps<{
|
||||
activeKey?: boolean;
|
||||
data?: any;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '应用ID',
|
||||
dataIndex: 'appId',
|
||||
width: 100,
|
||||
key: 'appId'
|
||||
},
|
||||
{
|
||||
title: '应用名称',
|
||||
dataIndex: 'appName',
|
||||
width: 360,
|
||||
key: 'appName'
|
||||
},
|
||||
{
|
||||
title: '应用标识',
|
||||
dataIndex: 'appCode',
|
||||
key: 'appCode'
|
||||
},
|
||||
{
|
||||
title: '应用类型',
|
||||
dataIndex: 'appTypeMultiple',
|
||||
key: 'appTypeMultiple'
|
||||
},
|
||||
{
|
||||
title: '应用状态',
|
||||
dataIndex: 'appStatus',
|
||||
key: 'appStatus'
|
||||
},
|
||||
{
|
||||
title: '应用地址',
|
||||
dataIndex: 'appUrl',
|
||||
key: 'appUrl'
|
||||
},
|
||||
{
|
||||
title: '二维码',
|
||||
dataIndex: 'appQrcode',
|
||||
key: 'appQrcode'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<App[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<App | null>(null);
|
||||
// 是否显示资产详情
|
||||
const showInfo = ref(false);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示高级搜索
|
||||
const showAdvancedSearch = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
// 搜索条件
|
||||
return pageApp({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: AppParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: App) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开用户详情弹窗 */
|
||||
const openInfo = (row?: App) => {
|
||||
current.value = row ?? null;
|
||||
showInfo.value = true;
|
||||
};
|
||||
|
||||
/* 打开高级搜索 */
|
||||
const openAdvanced = () => {
|
||||
showAdvancedSearch.value = !showAdvancedSearch.value;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: App) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeApp(row.appId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
console.log(selection.value);
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchApp(selection.value.map((d) => d.appId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: App) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
reload();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'AppIndex'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
p {
|
||||
line-height: 0.8;
|
||||
}
|
||||
.sys-org-table :deep(.ant-table-body) {
|
||||
overflow: auto !important;
|
||||
overflow: overlay !important;
|
||||
}
|
||||
|
||||
.sys-org-table :deep(.ant-table-pagination.ant-pagination) {
|
||||
padding: 0 4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.price-edit {
|
||||
padding-right: 5px;
|
||||
}
|
||||
.comments {
|
||||
max-width: 200px;
|
||||
}
|
||||
.app-box {
|
||||
display: flex;
|
||||
.app-info {
|
||||
display: flex;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,466 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="75%"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:maxable="maxAble"
|
||||
:title="isUpdate ? '编辑服务器' : '添加服务器'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
:maskClosable="false"
|
||||
@ok="save"
|
||||
>
|
||||
<a-tabs v-model:activeKey="activeKey" type="card">
|
||||
<a-tab-pane key="1" tab="基本信息">
|
||||
<a-form
|
||||
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-item label="服务器名称" v-bind="validateInfos.name">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入服务器名称"
|
||||
v-model:value="form.name"
|
||||
@blur="validate('name', { trigger: 'blur' }).catch(() => {})"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="服务器IP" v-bind="validateInfos.code">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入合法的公网IP，如：0.0.0.0"
|
||||
v-model:value="form.code"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="品牌厂商" v-bind="validateInfos.brand">
|
||||
<brand-select
|
||||
v-model:value="form.brand"
|
||||
@blur="validate('brand', { trigger: 'blur' }).catch(() => {})"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="所属客户" v-bind="validateInfos.companyId">
|
||||
<SelectCompany
|
||||
:placeholder="`请选择客户`"
|
||||
v-model:value="form.customerName"
|
||||
@done="onSelect"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注" v-bind="validateInfos.comments">
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-editor
|
||||
v-model:value="form.comments"
|
||||
:locale="zh_Hans"
|
||||
:plugins="plugins"
|
||||
height="300px"
|
||||
:editorConfig="{ lineNumbers: true }"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="账号密码">
|
||||
<a-form
|
||||
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-item label="宝塔面板" v-bind="validateInfos.panel">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="http://ip:8888"
|
||||
v-model:value="form.panel"
|
||||
@blur="validate('panel', { trigger: 'blur' }).catch(() => {})"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="宝塔面板账号" v-bind="validateInfos.panelAccount">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="宝塔面板账号"
|
||||
v-model:value="form.panelAccount"
|
||||
@blur="
|
||||
validate('panelAccount', { trigger: 'blur' }).catch(() => {})
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="宝塔面板密码"
|
||||
v-bind="validateInfos.panelPassword"
|
||||
>
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="宝塔面板密码"
|
||||
v-model:value="form.panelPassword"
|
||||
@blur="
|
||||
validate('panelPassword', { trigger: 'blur' }).catch(() => {})
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="宝塔API接口秘钥" v-bind="validateInfos.btSign">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="50"
|
||||
placeholder="宝塔API接口秘钥"
|
||||
v-model:value="form.btSign"
|
||||
@blur="validate('btSign', { trigger: 'blur' }).catch(() => {})"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="服务器账号" v-bind="validateInfos.account">
|
||||
<a-input v-model:value="form.account" placeholder="root" />
|
||||
</a-form-item>
|
||||
<a-form-item label="服务器密码" v-bind="validateInfos.password">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="服务器密码"
|
||||
v-model:value="form.password"
|
||||
@blur="validate('password', { trigger: 'blur' }).catch(() => {})"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="厂商登录账号" v-bind="validateInfos.brandAccount">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入阿里云/腾讯登录账号"
|
||||
v-model:value="form.brandAccount"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="登录密码" v-bind="validateInfos.brandPassword">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="登录密码"
|
||||
v-model:value="form.brandPassword"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="其他配置">
|
||||
<a-form
|
||||
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-item label="服务器配置" v-bind="validateInfos.configuration">
|
||||
<configuration-select
|
||||
v-model:value="form.configuration"
|
||||
@blur="
|
||||
validate('configuration', { trigger: 'blur' }).catch(() => {})
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="购买日期">
|
||||
<a-date-picker
|
||||
class="ele-fluid"
|
||||
placeholder="请选择购买日期"
|
||||
v-model:value="startTime"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="结束日期">
|
||||
<a-date-picker
|
||||
class="ele-fluid"
|
||||
placeholder="请选择结束日期"
|
||||
v-model:value="endTime"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="开放端口" v-bind="validateInfos.openPort">
|
||||
<port-select
|
||||
v-model:value="form.openPort"
|
||||
@blur="validate('openPort', { trigger: 'blur' }).catch(() => {})"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" v-bind="validateInfos.status">
|
||||
<a-select
|
||||
optionFilterProp="label"
|
||||
placeholder="请选择状态"
|
||||
:options="serverStatus"
|
||||
allow-clear
|
||||
v-model:value="form.status"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" v-bind="validateInfos.sortNumber">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="排序"
|
||||
v-model:value="form.sortNumber"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject, ipReg } from 'ele-admin-pro';
|
||||
import type { Assets } from '@/api/oa/assets/model';
|
||||
import BrandSelect from './brand-select.vue';
|
||||
import SelectUser from '@/components/SelectUser/index.vue';
|
||||
import ConfigurationSelect from './configuration-select.vue';
|
||||
import PortSelect from './port-select.vue';
|
||||
import { addAssets, updateAssets } from '@/api/oa/assets';
|
||||
import dayjs from 'dayjs';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
import { UserVisibility } from '@/api/user/visibility/model';
|
||||
// 中文语言文件
|
||||
import zh_Hans from 'bytemd/locales/zh_Hans.json';
|
||||
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 'bytemd/dist/index.min.css';
|
||||
import highlight from '@bytemd/plugin-highlight-ssr';
|
||||
import 'highlight.js/styles/default.css';
|
||||
import { Company } from "@/api/system/company/model";
|
||||
|
||||
const useForm = Form.useForm;
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxAble = ref(true);
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Assets | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
const serverStatus = getDictionaryOptions('serverStatus');
|
||||
const users = ref<UserVisibility[]>([]);
|
||||
// 用户信息
|
||||
const form = reactive<Assets>({
|
||||
code: '',
|
||||
createTime: '',
|
||||
endTime: '',
|
||||
name: '',
|
||||
brand: undefined,
|
||||
account: '',
|
||||
password: '',
|
||||
configuration: '不详',
|
||||
panelAccount: '',
|
||||
panelPassword: '',
|
||||
panel: '',
|
||||
financeAmount: 0,
|
||||
financeYears: 0,
|
||||
financeRenew: 0,
|
||||
customerId: undefined,
|
||||
customerName: '',
|
||||
financeCustomerName: '',
|
||||
financeCustomerContact: '',
|
||||
financeCustomerPhone: '',
|
||||
brandAccount: '',
|
||||
brandPassword: '',
|
||||
btSign: '',
|
||||
openPort: '80',
|
||||
comments: '',
|
||||
root: 'root',
|
||||
sortNumber: 100,
|
||||
status: '0',
|
||||
type: '',
|
||||
assetsId: 0,
|
||||
visibility: 'private',
|
||||
userList: [],
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
// 选项卡位置
|
||||
const activeKey = ref('1');
|
||||
// 购买日期
|
||||
const startTime = ref<Dayjs>();
|
||||
// 结束日期
|
||||
const endTime = ref<Dayjs>();
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入服务器名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
userId: [
|
||||
{
|
||||
required: true,
|
||||
type: 'number',
|
||||
message: '请选择客户'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入IP地址',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
pattern: ipReg,
|
||||
message: 'IP地址不合法',
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
brand: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请选项服务器厂商',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
configuration: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请选择服务器配置',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
openPort: [
|
||||
{
|
||||
required: true,
|
||||
type: 'any',
|
||||
message: '请选择服务器已开放端',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
panel: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写面板地址',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
panelAccount: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写面板登录账号',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
panelPassword: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写面板登录密码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
status: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '服务器状态',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
visibility: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请设置可见性'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(form, rules);
|
||||
|
||||
const onSelect = (data: Company) => {
|
||||
form.customerId = data.companyId;
|
||||
form.customerName = data.companyName;
|
||||
};
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const data = {
|
||||
...form,
|
||||
startTime: startTime.value?.format('YYYY-MM-DD HH:mm:ss'),
|
||||
endTime: endTime.value?.format('YYYY-MM-DD HH:mm:ss')
|
||||
};
|
||||
// 转字符串
|
||||
data.openPort = data.openPort.toString();
|
||||
const saveOrUpdate = isUpdate.value ? updateAssets : addAssets;
|
||||
console.log(data);
|
||||
saveOrUpdate(data)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
assignObject(form, props.data);
|
||||
if (props.data.startTime) {
|
||||
startTime.value = dayjs(props.data.startTime, 'YYYY-MM-DD');
|
||||
endTime.value = dayjs(props.data.endTime, 'YYYY-MM-DD');
|
||||
} else {
|
||||
startTime.value = undefined;
|
||||
endTime.value = undefined;
|
||||
}
|
||||
if (props.data.openPort) {
|
||||
form.openPort = props.data.openPort.split(',');
|
||||
}
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
startTime.value = undefined;
|
||||
endTime.value = undefined;
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 300px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,251 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="75%"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:maxable="maxAble"
|
||||
:title="'服务器详情'"
|
||||
:body-style="{ paddingBottom: '36px' }"
|
||||
@update:visible="updateVisible"
|
||||
:footer="null"
|
||||
>
|
||||
<a-form
|
||||
:label-col="{ md: { span: 4 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 19 }, sm: { span: 24 } }"
|
||||
>
|
||||
<div class="base-form" style="margin-bottom: 20px">
|
||||
<a-descriptions :title="assets.name" bordered>
|
||||
<a-descriptions-item label="客户名称">
|
||||
{{ assets.companyName }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="服务器名称">
|
||||
{{ assets.name }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="状态">
|
||||
<a-tag v-if="assets.status === '0'" color="green">正常</a-tag>
|
||||
<a-tag v-if="assets.status === '1'" color="red">过期</a-tag>
|
||||
<a-tag v-if="assets.status === '2'" color="purple">不再续</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="服务器IP">
|
||||
{{ assets.code }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="宝塔面板">
|
||||
<a href="#" @click="openUrl(assets)">{{ assets.panel }}</a>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="宝塔账号">
|
||||
{{ assets.panelAccount }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="宝塔密码">
|
||||
<span v-role="['admin']">{{ assets.panelPassword }}</span>
|
||||
<span v-any-role="['user', 'guest', 'superAdmin', 'developer']"
|
||||
>****</span
|
||||
>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="品牌厂商">
|
||||
{{ assets.brand }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="服务器配置">
|
||||
{{ assets.configuration }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="开发端口">
|
||||
{{ assets.openPort }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="有效期">
|
||||
<div v-if="assets.startTime && assets.endTime">
|
||||
<div class="ele-text-info">{{ assets.startTime }}</div>
|
||||
<div v-html="getEndTime(assets.endTime)"></div>
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="服务器账号">
|
||||
<span class="ele-text-danger">root</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="服务器密码">
|
||||
<span class="ele-text-danger" v-role="['admin']">{{
|
||||
assets.password
|
||||
}}</span>
|
||||
<span v-any-role="['user', 'guest', 'superAdmin', 'developer']"
|
||||
>****</span
|
||||
>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="创建时间">
|
||||
{{ timeAgo(assets.createTime) }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="排序">
|
||||
{{ assets.sortNumber }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
<div class="base-form" style="margin-bottom: 20px">
|
||||
<a-descriptions title="服务器状态" bordered v-if="assets.systemTotal">
|
||||
<a-descriptions-item label="操作系统信息">
|
||||
{{ assets.systemTotal.system }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="面板版本">
|
||||
{{ assets.systemTotal.version }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="已不间断运行">
|
||||
{{ assets.systemTotal.time }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="CPU 核心数">
|
||||
{{ assets.systemTotal.cpuNum }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="负载状态">
|
||||
{{ assets.systemTotal.cpuRealUsed }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="物理内存容量(MB)">
|
||||
{{ assets.systemTotal.memTotal }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="已使用的物理内存(MB)">
|
||||
{{ assets.systemTotal.memRealUsed }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="可用的物理内存(MB)">
|
||||
{{ assets.systemTotal.memFree }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="缓存化的内存(MB)">
|
||||
{{ assets.systemTotal.memCached }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="系统缓冲 (MB)">
|
||||
{{ assets.systemTotal.memBuffers }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
<!-- <a-space v-if="assets.systemTotal">-->
|
||||
<!-- <div class="base-form" style="margin-bottom: 20px">-->
|
||||
<!-- <a-tabs v-model:activeKey="activeKey">-->
|
||||
<!-- <a-tab-pane key="1" tab="系统信息" force-render>-->
|
||||
<!-- <!– <byte-md-viewer :value="assets.comments" :plugins="plugins" />–>-->
|
||||
|
||||
<!-- </a-tab-pane>-->
|
||||
<!-- </a-tabs>-->
|
||||
<!-- </div>-->
|
||||
<!-- </a-space>-->
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getEndTime } from '@/utils/common';
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { assignObject, timeAgo } from 'ele-admin-pro';
|
||||
import type { Assets } from '@/api/oa/assets/model';
|
||||
import { getAssets } from '@/api/oa/assets';
|
||||
|
||||
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 'bytemd/dist/index.min.css';
|
||||
import highlight from '@bytemd/plugin-highlight-ssr';
|
||||
import 'highlight.js/styles/default.css';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Assets | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
// 用户信息
|
||||
const assets = reactive<Assets>({
|
||||
code: '',
|
||||
createTime: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
name: '',
|
||||
brand: undefined,
|
||||
account: '',
|
||||
password: '',
|
||||
configuration: '',
|
||||
panelAccount: '',
|
||||
panelPassword: '',
|
||||
panel: '',
|
||||
financeAmount: 0,
|
||||
financeYears: 0,
|
||||
financeRenew: 0,
|
||||
financeCustomerName: '',
|
||||
financeCustomerContact: '',
|
||||
financeCustomerPhone: '',
|
||||
brandAccount: '',
|
||||
brandPassword: '',
|
||||
openPort: '',
|
||||
comments: '',
|
||||
root: 'root',
|
||||
userId: 0,
|
||||
companyName: '',
|
||||
nickname: '',
|
||||
sortNumber: undefined,
|
||||
status: undefined,
|
||||
type: '',
|
||||
assetsId: 0
|
||||
});
|
||||
|
||||
// 请求状态
|
||||
const loading = ref(true);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxAble = ref(true);
|
||||
// 选项卡位置
|
||||
const activeKey = ref('1');
|
||||
const { resetFields } = useForm(assets);
|
||||
const users = ref<[]>([]);
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
/* 打开外部链接 */
|
||||
const openUrl = (record) => {
|
||||
window.open(record.panel);
|
||||
};
|
||||
|
||||
const query = () => {
|
||||
const assetsId = Number(props.data?.assetsId);
|
||||
getAssets(assetsId).then((res) => {
|
||||
console.log(res);
|
||||
assets.systemTotal = JSON.parse(res.systemTotal);
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
assignObject(assets, props.data);
|
||||
query();
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 100px;
|
||||
}
|
||||
.important {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-form
|
||||
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
|
||||
>
|
||||
<a-row>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="服务器名称">
|
||||
<a-input
|
||||
v-model:value.trim="where.name"
|
||||
placeholder="请输入服务器名称"
|
||||
allow-clear
|
||||
@pressEnter="search"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="IP地址">
|
||||
<a-input
|
||||
v-model:value.trim="where.code"
|
||||
placeholder="请输入服务器IP"
|
||||
allow-clear
|
||||
@pressEnter="search"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="search">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useSearch from '@/utils/use-search';
|
||||
import type { AssetsParam } from '@/api/oa/assets/model';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: AssetsParam): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<AssetsParam>({
|
||||
name: '',
|
||||
code: '',
|
||||
isExpire: ''
|
||||
});
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
search();
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!-- 选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择服务器厂商'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('serverBrand');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- 选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择服务器配置'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('serverConfiguration');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,70 @@
|
||||
<!-- 选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
@search="onSearch"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { pageCustomer } from '@/api/oa/customer';
|
||||
import type { SelectProps } from 'ant-design-vue';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: number;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择所属客户'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = ref<SelectProps['options']>([]);
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 获取客户列表数据 */
|
||||
pageCustomer({ progress: '4' })
|
||||
.then((result) => {
|
||||
data.value = result?.list.map((d) => {
|
||||
return {
|
||||
value: d.customerId,
|
||||
label: d.customerName
|
||||
};
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
|
||||
// 联动搜索
|
||||
const onSearch = (customerName) => {
|
||||
pageCustomer({ customerName }).then((res) => {
|
||||
console.log(res);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,46 @@
|
||||
<!-- 选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
mode="multiple"
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择已开发的端口'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('serverOpenPort');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,128 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
v-permission="'oa:assets:save'"
|
||||
@click="add"
|
||||
>
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
:v-role="`dev`"
|
||||
@click="removeBatch"
|
||||
v-if="props.selection.length > 0"
|
||||
>
|
||||
<template #icon>
|
||||
<DeleteOutlined />
|
||||
</template>
|
||||
<span>批量删除</span>
|
||||
</a-button>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
v-model:value="searchText"
|
||||
placeholder="请输入搜索关键词"
|
||||
@search="search"
|
||||
@pressEnter="search"
|
||||
>
|
||||
<template #addonBefore>
|
||||
<a-select v-model:value="type" style="width: 120px; margin: -5px -12px">
|
||||
<a-select-option value="name">服务器名称</a-select-option>
|
||||
<a-select-option value="code">服务器IP</a-select-option>
|
||||
<a-select-option value="userId">用户ID</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input-search>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import type { AssetsParam } from '@/api/oa/assets/model';
|
||||
// import SelectUser from '@/components/SelectUser/index.vue';
|
||||
import { ref, watch } from 'vue';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: AssetsParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 勾选的项目
|
||||
selection?: [];
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where } = useSearch<AssetsParam>({
|
||||
name: '',
|
||||
code: '',
|
||||
isExpire: '',
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
// 下来选项
|
||||
const type = ref('name');
|
||||
// 搜索内容
|
||||
const searchText = ref('');
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
assignObject(where, {});
|
||||
if (type.value == 'name') {
|
||||
where.name = searchText.value;
|
||||
}
|
||||
if (type.value == 'code') {
|
||||
where.code = searchText.value;
|
||||
}
|
||||
if (type.value == 'userId') {
|
||||
const number = Number(searchText.value);
|
||||
if (number > 0) {
|
||||
where.userId = Number(searchText.value);
|
||||
}
|
||||
}
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
// const onSelect = (userId) => {
|
||||
// console.log(userId);
|
||||
// where.userId = userId;
|
||||
// console.log(where);
|
||||
// search();
|
||||
// };
|
||||
// const onClear = () => {
|
||||
// where.userId = undefined;
|
||||
// search();
|
||||
// };
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
// 批量删除
|
||||
const removeBatch = () => {
|
||||
emit('remove');
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
// const reset = () => {
|
||||
// resetFields();
|
||||
// search();
|
||||
// };
|
||||
|
||||
// 监听字典id变化
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择年限'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('serverYears');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="assetsId"
|
||||
:columns="columns"
|
||||
:height="tableHeight"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
:customRow="customRow"
|
||||
:scroll="{ x: 800 }"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
:selection="selection"
|
||||
@search="reload"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'customer'">
|
||||
{{ record.nickname }}
|
||||
<!-- <div class="user-box">-->
|
||||
<!-- <a-avatar-->
|
||||
<!-- :size="30"-->
|
||||
<!-- :src="`${record.avatar}`"-->
|
||||
<!-- style="margin-right: 4px"-->
|
||||
<!-- >-->
|
||||
<!-- <template #icon>-->
|
||||
<!-- <UserOutlined />-->
|
||||
<!-- </template>-->
|
||||
<!-- </a-avatar>-->
|
||||
<!-- <div class="user-info">-->
|
||||
<!-- <span>{{ record.companyName }}</span>-->
|
||||
<!-- <span class="ele-text-placeholder">{{-->
|
||||
<!-- record.nickname-->
|
||||
<!-- }}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</template>
|
||||
<template v-if="column.key === 'name'">
|
||||
<a-tooltip title="查看详情">
|
||||
<a href="#" @click="openInfo(record)">{{ record.name }}</a>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'code'">
|
||||
<a-tooltip title="服务器公网IP">
|
||||
{{ record.code }}
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === '0'" color="green">正常</a-tag>
|
||||
<a-tag v-if="record.status === '1'" color="red">停机</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'comments'">
|
||||
<a-tooltip :title="record.comments" placement="topLeft">
|
||||
{{ record.comments }}
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'endTime'">
|
||||
<div class="ele-text-info">{{
|
||||
toDateString(record.startTime, 'yyyy-MM-dd')
|
||||
}}</div>
|
||||
<div v-html="getEndTime(record.endTime)"></div>
|
||||
</template>
|
||||
<template v-if="column.key === 'createTime'">
|
||||
<a-tooltip :title="`${toDateString(record.createTime)}`">
|
||||
{{ timeAgo(record.createTime) }}
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="openInfo(record)">详情</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click="openEdit(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>
|
||||
<!-- 编辑弹窗 -->
|
||||
<assets-edit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
<!-- 用户详情 -->
|
||||
<assets-info v-model:visible="showInfo" :data="current" @done="reload" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!--suppress TypeScriptValidateTypes -->
|
||||
<script lang="ts" setup>
|
||||
import { timeAgo } from 'ele-admin-pro';
|
||||
import { createVNode, computed, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import {
|
||||
UserOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import Search from './components/search.vue';
|
||||
import AssetsEdit from './components/assets-edit.vue';
|
||||
import AssetsInfo from './components/assets-info.vue';
|
||||
import { pageAssets, removeAssets, removeBatchAssets } from '@/api/oa/assets';
|
||||
import type { Assets, AssetsParam } from '@/api/oa/assets/model';
|
||||
import { getDictionaryOptions, getEndTime } from '@/utils/common';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 是否显示资产详情
|
||||
const showInfo = ref(false);
|
||||
// 当前用户信息
|
||||
const brand = getDictionaryOptions('serverBrand');
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '服务器名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '服务器IP',
|
||||
dataIndex: 'code',
|
||||
key: 'code'
|
||||
},
|
||||
{
|
||||
title: '品牌',
|
||||
dataIndex: 'brand',
|
||||
filters: brand
|
||||
},
|
||||
// {
|
||||
// title: '备注',
|
||||
// dataIndex: 'comments',
|
||||
// key: 'comments',
|
||||
// ellipsis: true
|
||||
// },
|
||||
{
|
||||
title: '有效期',
|
||||
dataIndex: 'endTime',
|
||||
key: 'endTime',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '所属客户',
|
||||
dataIndex: 'customer',
|
||||
key: 'customer'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
sorter: true,
|
||||
key: 'status'
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortNumber',
|
||||
sorter: true,
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
hideInTable: true,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<Assets[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<Assets | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
if (filters) {
|
||||
where.brand = filters.brand;
|
||||
}
|
||||
return pageAssets({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: AssetsParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
// 搜索是否展开
|
||||
const searchExpand = ref(false);
|
||||
|
||||
// 表格固定高度
|
||||
const fixedHeight = ref(false);
|
||||
|
||||
// 表格高度
|
||||
const tableHeight = computed(() => {
|
||||
return fixedHeight.value
|
||||
? searchExpand.value
|
||||
? 'calc(100vh - 618px)'
|
||||
: 'calc(100vh - 562px)'
|
||||
: void 0;
|
||||
});
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: Assets) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开用户详情弹窗 */
|
||||
const openInfo = (row?: Assets) => {
|
||||
current.value = row ?? null;
|
||||
showInfo.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Assets) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeAssets(row.assetsId)
|
||||
.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 = message.loading('请求中..', 0);
|
||||
removeBatchAssets(selection.value.map((d) => d.assetsId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Assets) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openInfo(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Assets'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.user-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,231 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body" style="padding-bottom: 60px;">
|
||||
<!-- 表格 -->
|
||||
<a-spin :spinning="loading">
|
||||
<table class="ele-table ele-table-stripe ele-table-medium">
|
||||
<tbody>
|
||||
<tr v-for="(item,index) in notice" :key="index">
|
||||
<td style="text-align: right; width: 360px; vertical-align: top;">
|
||||
<div class="user-avatar">
|
||||
<a-avatar v-if="item.channel === 0" :src="item.avatar" />
|
||||
<a-avatar v-else class="openai" />
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="content"><byte-md-viewer :value="item.content" ref="md-content" :plugins="plugins" /></div>
|
||||
</td>
|
||||
<td>
|
||||
<a-button v-if="item.channel === 1" @click="copyText(item.content)">复制</a-button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</a-spin>
|
||||
<a-space class="action">
|
||||
<a-popconfirm
|
||||
title="确定要删除当前会话吗？"
|
||||
@confirm="remove(item)"
|
||||
>
|
||||
<a-button class="ele-text-danger">清空当前会话</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-card class="foot">
|
||||
<div class="send-box">
|
||||
<a-space>
|
||||
<a-input
|
||||
v-model:value="content"
|
||||
placeholder="我是AI机器人，你想和我聊点什么?"
|
||||
size="large"
|
||||
:disabled="loading"
|
||||
style="width: 770px"
|
||||
@pressEnter="onSend"
|
||||
>
|
||||
<template #suffix>
|
||||
<send-outlined @click="onSend" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-back-top />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import "bytemd/dist/index.min.css";
|
||||
import { ref } from "vue";
|
||||
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 "bytemd/dist/index.min.css";
|
||||
import highlight from "@bytemd/plugin-highlight-ssr";
|
||||
import "highlight.js/styles/default.css";
|
||||
import { message} from "ant-design-vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useThemeStore } from "@/store/modules/theme";
|
||||
import { uploadFile } from "@/api/system/file";
|
||||
import type { Notice } from "@/api/oa/notice/model";
|
||||
import { FILE_SERVER } from "@/config/setting";
|
||||
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
|
||||
import { listNotice, removeNotice } from "@/api/oa/notice";
|
||||
import { chat, send } from "@/api/oa/chatgpt";
|
||||
import {
|
||||
SendOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { Message } from "@/api/user/message/model";
|
||||
import { EquipmentFault } from "@/api/apps/equipment/fault/model";
|
||||
import { removeEquipmentFault } from "@/api/apps/equipment/fault";
|
||||
import { EleTableSelect } from "ele-admin-pro";
|
||||
import { FormInstance } from "ant-design-vue/es/form";
|
||||
import { copyText, isImage } from "@/utils/common";
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
// 请求状态
|
||||
const loading = ref(false);
|
||||
const noticeId = ref(0);
|
||||
const content = ref('');
|
||||
const files = ref<ItemType[]>([]);
|
||||
const notice = ref<Notice[]>([]);
|
||||
|
||||
/* 上传事件 */
|
||||
const uploadHandler = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
};
|
||||
if (!file.type.startsWith("image")) {
|
||||
message.error("只能选择图片");
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
message.error("大小不能超过 2MB");
|
||||
return;
|
||||
}
|
||||
onUpload(item);
|
||||
};
|
||||
|
||||
const onUpload = (d: ItemType) => {
|
||||
uploadFile(<File>d.file)
|
||||
.then((result) => {
|
||||
files.value.push({
|
||||
uid: result.id,
|
||||
url: FILE_SERVER + result.path,
|
||||
name: isImage(result.path) ? 'image' : result.name,
|
||||
status: "done"
|
||||
});
|
||||
message.success("上传成功");
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 向chatGPT提问 */
|
||||
const onSend = () => {
|
||||
send({
|
||||
tenantId: Number(localStorage.getItem('tenantId')),
|
||||
content: content.value
|
||||
}).then((noticeId) => {
|
||||
query();
|
||||
onChat(noticeId);
|
||||
})
|
||||
}
|
||||
|
||||
const onChat = (noticeId) => {
|
||||
chat({
|
||||
tenantId: Number(localStorage.getItem('tenantId')),
|
||||
content: content.value,
|
||||
noticeId
|
||||
}).then(() => {
|
||||
query();
|
||||
content.value = '';
|
||||
})
|
||||
}
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Notice) => {
|
||||
console.log(row);
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeNotice(row.noticeId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
query();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const query = () => {
|
||||
listNotice({limit: 2})
|
||||
.then((response) => {
|
||||
notice.value = response
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
query();
|
||||
</script>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "ChatGPT"
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.content {
|
||||
max-width: 1000px;
|
||||
padding: 20px 0;
|
||||
.edit-md {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
.foot{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
background-color: #f3f9ff;
|
||||
bottom: 0;
|
||||
height: 100px;
|
||||
//display: flex;
|
||||
//justify-content: center;
|
||||
.send-box{
|
||||
margin-left: 360px;
|
||||
}
|
||||
}
|
||||
.user-avatar{
|
||||
padding: 20px 0;
|
||||
}
|
||||
.openai{
|
||||
background-image: url("@/assets/icon/openai-avatar.jpeg");
|
||||
background-size: 100%;
|
||||
}
|
||||
.markdown-body{
|
||||
background: none;
|
||||
}
|
||||
.action{
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.copy-btn{display: flex; justify-content: flex-end;}
|
||||
</style>
|
||||
@@ -0,0 +1,298 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<div class="page">
|
||||
<a-list
|
||||
class="comment-list"
|
||||
item-layout="horizontal"
|
||||
:data-source="notice"
|
||||
>
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item :class="`ele-body bg-${item.channel}`">
|
||||
<a-comment v-if="item.channel === 0" :avatar="item.avatar">
|
||||
<template #content>
|
||||
<div class="content"><byte-md-viewer :value="item.content" :plugins="plugins" /></div>
|
||||
</template>
|
||||
<template #datetime>
|
||||
<a-tooltip :title="item.createTime">
|
||||
<span>{{ timeAgo(item.createTime) }}</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template #actions>
|
||||
<a-space>
|
||||
<a-button type="dashed" :size="'small'" class="ele-text-placeholder" @click="copyText(item.content)">复制</a-button>
|
||||
<a-button type="dashed" :size="'small'" class="ele-text-placeholder" @click="remove(item)">删除</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-comment>
|
||||
<a-comment v-if="item.channel === 1" :avatar="'https://file.wsdns.cn/20230325/2ce2f25fd6054309bed811213bd00a09.jpg'">
|
||||
<template #content>
|
||||
<div class="content" @touchstart="onTouch(item.content)"><byte-md-viewer :value="item.content" :plugins="plugins" /></div>
|
||||
</template>
|
||||
<template #datetime>
|
||||
<a-tooltip :title="item.createTime">
|
||||
<span>{{ timeAgo(item.createTime) }}</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template #actions>
|
||||
<a-space>
|
||||
<a-button type="dashed" :size="'small'" class="ele-text-placeholder" @click="copyText(item.content)">复制</a-button>
|
||||
<a-button type="dashed" :size="'small'" class="ele-text-placeholder" @click="remove(item)">删除</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-comment>
|
||||
</a-list-item>
|
||||
</template>
|
||||
<a-pagination v-model:current="page" :total="total" style="display: flex; justify-content: center; padding:30px 0;" @change="onPage" />
|
||||
</a-list>
|
||||
<a-empty class="empty" v-if="notice.length === 0" />
|
||||
<a-card class="foot">
|
||||
<div class="send-box">
|
||||
<div class="left"></div>
|
||||
<a-space>
|
||||
<a-input
|
||||
v-model:value="content"
|
||||
placeholder="我是AI机器人，你想和我聊点什么?"
|
||||
size="large"
|
||||
:disabled="loading"
|
||||
class="chat-input"
|
||||
@pressEnter="onSend"
|
||||
>
|
||||
<template #suffix>
|
||||
<send-outlined @click="onSend" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-back-top />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import "bytemd/dist/index.min.css";
|
||||
import { ref } from "vue";
|
||||
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 "bytemd/dist/index.min.css";
|
||||
import highlight from "@bytemd/plugin-highlight-ssr";
|
||||
import "highlight.js/styles/default.css";
|
||||
import { message} from "ant-design-vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { timeAgo } from 'ele-admin-pro';
|
||||
import { useThemeStore } from "@/store/modules/theme";
|
||||
import { uploadFile } from "@/api/system/file";
|
||||
import type { Notice } from "@/api/oa/notice/model";
|
||||
import { FILE_SERVER } from "@/config/setting";
|
||||
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
|
||||
import { listNotice, pageNotice, removeNotice } from "@/api/oa/notice";
|
||||
import { chat, send } from "@/api/oa/chatgpt";
|
||||
import { copyText, isImage } from "@/utils/common";
|
||||
import {
|
||||
SendOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
// 请求状态
|
||||
const loading = ref(false);
|
||||
const noticeId = ref(0);
|
||||
const content = ref('');
|
||||
const files = ref<ItemType[]>([]);
|
||||
const notice = ref<any>([]);
|
||||
const total = ref<any>(0);
|
||||
const page = ref<any>(1);
|
||||
|
||||
/* 上传事件 */
|
||||
const uploadHandler = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
};
|
||||
if (!file.type.startsWith("image")) {
|
||||
message.error("只能选择图片");
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
message.error("大小不能超过 2MB");
|
||||
return;
|
||||
}
|
||||
onUpload(item);
|
||||
};
|
||||
|
||||
const onUpload = (d: ItemType) => {
|
||||
uploadFile(<File>d.file)
|
||||
.then((result) => {
|
||||
files.value.push({
|
||||
uid: result.id,
|
||||
url: FILE_SERVER + result.path,
|
||||
name: isImage(result.path) ? 'image' : result.name,
|
||||
status: "done"
|
||||
});
|
||||
message.success("上传成功");
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 向chatGPT提问 */
|
||||
const onSend = () => {
|
||||
send({
|
||||
tenantId: Number(localStorage.getItem('tenantId')),
|
||||
content: content.value
|
||||
}).then((noticeId) => {
|
||||
query();
|
||||
onChat(noticeId);
|
||||
})
|
||||
}
|
||||
|
||||
const onChat = (noticeId) => {
|
||||
chat({
|
||||
tenantId: Number(localStorage.getItem('tenantId')),
|
||||
content: content.value,
|
||||
noticeId
|
||||
}).then(() => {
|
||||
query();
|
||||
content.value = '';
|
||||
})
|
||||
}
|
||||
|
||||
const onTouch =(content) => {
|
||||
setTimeout(function () {
|
||||
copyText(content)
|
||||
}, 500);
|
||||
}
|
||||
|
||||
const onPage = (e) => {
|
||||
page.value = e;
|
||||
query();
|
||||
}
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Notice) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeNotice(row.noticeId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
query();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const query = () => {
|
||||
listNotice({limit: 1})
|
||||
.then((response) => {
|
||||
notice.value = response
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
query();
|
||||
</script>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "ChatGPT"
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
*{
|
||||
max-width: 100% !important;
|
||||
}
|
||||
.page{
|
||||
background-color: #ffffff;
|
||||
.comment-list{
|
||||
.bg-0{
|
||||
}
|
||||
.bg-1{
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
width: 1000px !important;
|
||||
margin: 0 auto 40px auto;
|
||||
}
|
||||
.chat-item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.content {
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
.edit-md {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
.foot{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
background-color: #f3f9ff;
|
||||
bottom: 0;
|
||||
height: 100px;
|
||||
//display: flex;
|
||||
//justify-content: center;
|
||||
.send-box{
|
||||
display: flex;
|
||||
margin-left: 0;
|
||||
.chat-input{
|
||||
width: 340px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-avatar{
|
||||
padding: 20px 0;
|
||||
}
|
||||
.openai{
|
||||
background-image: url("@/assets/icon/openai-avatar.jpeg");
|
||||
background-size: 100%;
|
||||
}
|
||||
.markdown-body{
|
||||
background: none;
|
||||
}
|
||||
.empty{
|
||||
height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.action{
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.copy-btn{display: flex; justify-content: flex-end;}
|
||||
}
|
||||
@media screen and (min-width:1200px) {
|
||||
.send-box{
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
.left{
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:768px) {
|
||||
.send-box{
|
||||
display: flex;
|
||||
justify-content: center !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,912 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="80%"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑企业' : '添加企业'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<div style="background-color: #f3f3f3; padding: 8px">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
: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 }"
|
||||
>
|
||||
<div class="upload-image">
|
||||
<ele-image-upload
|
||||
v-model:value="images"
|
||||
:item-style="{ width: '120px', height: '120px' }"
|
||||
:limit="1"
|
||||
@upload="onUpload"
|
||||
/>
|
||||
</div>
|
||||
<a-form-item label="企业ID" name="companyId">
|
||||
{{ form.companyId }}
|
||||
</a-form-item>
|
||||
<a-form-item label="企业名称">
|
||||
{{ form.companyName }}
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="企业名称" name="companyName">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入企业名称"
|
||||
v-model:value="form.companyName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="客户标识" name="companyCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入社会统一信用代码"
|
||||
v-model:value="form.companyCode"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="所属区域" name="region">
|
||||
<regions-select
|
||||
v-model:value="city"
|
||||
valueField="label"
|
||||
placeholder="请选择省市区"
|
||||
class="ele-fluid"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="企业域名" name="domain">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请填写企业域名"
|
||||
v-model:value="form.domain"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="联系电话" name="phone">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请填写联系电话"
|
||||
v-model:value="form.phone"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="企业简称" name="shortName">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入企业简称"
|
||||
v-model:value="form.shortName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="企业类型" name="companyType">
|
||||
<DictSelect
|
||||
dict-code="CompanyType"
|
||||
placeholder="请选择企业类型"
|
||||
v-model:value="form.companyType"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="所属区域" name="region">
|
||||
<a-input-group compact>
|
||||
<a-input
|
||||
disabled
|
||||
style="width: calc(100% - 32px)"
|
||||
v-model:value="form.region"
|
||||
placeholder="所属区域"
|
||||
@search="onSearch"
|
||||
/>
|
||||
<a-tooltip title="选择位置">
|
||||
<a-button @click="openMapPicker">
|
||||
<template #icon><EnvironmentOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="企业描述" name="comments">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入企业描述"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</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="appCode">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入企业标识(英文字母)"-->
|
||||
<!-- v-model:value="form.appCode"-->
|
||||
<!-- @change="changeAppCode"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="企业包名" name="packageName">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入企业包名"-->
|
||||
<!-- v-model:value="form.packageName"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="IP白名单" name="ipAddress">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入IP白名单"-->
|
||||
<!-- v-model:value="form.ipAddress"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- </a-col>-->
|
||||
<!-- <a-col-->
|
||||
<!-- v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"-->
|
||||
<!-- >-->
|
||||
<!-- <a-form-item label="接口地址" name="serverUrl">-->
|
||||
<!-- <DictSelect-->
|
||||
<!-- dict-code="ServerApi"-->
|
||||
<!-- placeholder="请选择管理地址"-->
|
||||
<!-- v-model:value="form.serverUrl"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="文件服务器" name="fileUrl">-->
|
||||
<!-- <DictSelect-->
|
||||
<!-- dict-code="FileUrl"-->
|
||||
<!-- placeholder="请选择文件服务器地址"-->
|
||||
<!-- v-model:value="form.fileUrl"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="授权回调地址" name="callbackUrl">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入授权回调地址"-->
|
||||
<!-- v-model:value="form.callbackUrl"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- </a-col>-->
|
||||
<!-- <a-col-->
|
||||
<!-- v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"-->
|
||||
<!-- >-->
|
||||
<!-- <a-form-item label="代码仓库" name="gitUrl">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入git仓库地址"-->
|
||||
<!-- v-model:value="form.gitUrl"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="允许被搜索" name="gitUrl">-->
|
||||
<!-- <a-switch v-model:checked="form.search" />-->
|
||||
<!-- </a-form-item>-->
|
||||
|
||||
<!-- </a-col>-->
|
||||
<!-- </a-row>-->
|
||||
<!-- </a-card>-->
|
||||
<!-- <a-divider style="height: 8px" />-->
|
||||
<!-- <a-card title="成员管理" :bordered="false">-->
|
||||
<!-- <div class="content">-->
|
||||
<!-- <a-space-->
|
||||
<!-- style="margin-bottom: 15px"-->
|
||||
<!-- >-->
|
||||
<!-- <SelectUser-->
|
||||
<!-- :placeholder="`添加开发成员`"-->
|
||||
<!-- @done="addAppDevUser"-->
|
||||
<!-- />-->
|
||||
<!-- <SelectUser-->
|
||||
<!-- :placeholder="`添加体验成员`"-->
|
||||
<!-- @done="addAppExpUser"-->
|
||||
<!-- />-->
|
||||
<!-- </a-space>-->
|
||||
<!-- <table-->
|
||||
<!-- class="ele-table ele-table-border ele-table-stripe ele-table-medium"-->
|
||||
<!-- >-->
|
||||
<!-- <thead>-->
|
||||
<!-- <tr>-->
|
||||
<!-- <th>角色</th>-->
|
||||
<!-- <th>用户</th>-->
|
||||
<!-- <th>邮箱</th>-->
|
||||
<!-- <th>手机号码</th>-->
|
||||
<!-- <th>加入时间</th>-->
|
||||
<!-- <th>操作</th>-->
|
||||
<!-- </tr>-->
|
||||
<!-- </thead>-->
|
||||
<!-- <tbody>-->
|
||||
<!-- <tr v-for="user in appUsers">-->
|
||||
<!-- <td>-->
|
||||
<!-- <a-tag color="green" v-if="user.role === 10">体验成员</a-tag>-->
|
||||
<!-- <a-tag color="orange" v-if="user.role === 20">开发成员</a-tag>-->
|
||||
<!-- <a-tag color="red" v-if="user.role === 30">管理员</a-tag>-->
|
||||
<!-- </td>-->
|
||||
<!-- <td>-->
|
||||
<!-- <a-avatar :src="user.avatar">-->
|
||||
<!-- <template #icon>-->
|
||||
<!-- <user-outlined />-->
|
||||
<!-- </template>-->
|
||||
<!-- </a-avatar>-->
|
||||
<!-- <span style="padding-left: 5px">{{ user.nickname }}</span>-->
|
||||
<!-- </td>-->
|
||||
<!-- <td>{{ user.email }}</td>-->
|
||||
<!-- <td>{{ user.phone }}</td>-->
|
||||
<!-- <td>{{ user.createTime }}</td>-->
|
||||
<!-- <td>-->
|
||||
<!-- <div v-if="user.role !== 30">-->
|
||||
<!-- <a-->
|
||||
<!-- @click="removeUser(user)"-->
|
||||
<!-- v-if="user.status === 0"-->
|
||||
<!-- >-->
|
||||
<!-- 移除-->
|
||||
<!-- </a>-->
|
||||
<!-- <a v-else>待确认</a>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div v-else>-->
|
||||
<!-- <a>转让</a>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- </td>-->
|
||||
<!-- </tr>-->
|
||||
<!-- </tbody>-->
|
||||
<!-- </table>-->
|
||||
<!-- </div>-->
|
||||
<!-- </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">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入原型图地址"-->
|
||||
<!-- v-model:value="form.prototypeUrl"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="合同文件" name="parentId">-->
|
||||
<!-- <a-upload-->
|
||||
<!-- v-model:file-list="file1"-->
|
||||
<!-- name="file"-->
|
||||
<!-- action="https://file.wsdns.cn/api/file/image"-->
|
||||
<!-- :headers="{ Authorization: token }"-->
|
||||
<!-- @change="onFile1"-->
|
||||
<!-- >-->
|
||||
<!-- <a-button>-->
|
||||
<!-- <upload-outlined />-->
|
||||
<!-- 上传-->
|
||||
<!-- </a-button>-->
|
||||
<!-- </a-upload>-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- </a-col>-->
|
||||
<!-- <a-col-->
|
||||
<!-- v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"-->
|
||||
<!-- >-->
|
||||
<!-- <a-form-item label="项目需求文档" name="docsUrl">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入腾讯文档地址"-->
|
||||
<!-- v-model:value="form.docsUrl"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="报价单" name="parentId">-->
|
||||
<!-- <a-upload-->
|
||||
<!-- v-model:file-list="file2"-->
|
||||
<!-- name="file"-->
|
||||
<!-- action="https://file.wsdns.cn/api/file/image"-->
|
||||
<!-- :headers="{ Authorization: token }"-->
|
||||
<!-- @change="onFile2"-->
|
||||
<!-- >-->
|
||||
<!-- <a-button>-->
|
||||
<!-- <upload-outlined />-->
|
||||
<!-- 上传-->
|
||||
<!-- </a-button>-->
|
||||
<!-- </a-upload>-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- </a-col>-->
|
||||
<!-- <a-col-->
|
||||
<!-- v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"-->
|
||||
<!-- >-->
|
||||
<!-- <a-form-item label="维护文档" name="docsUrl">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入腾讯文档地址"-->
|
||||
<!-- v-model:value="form.docsUrl"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="其他" name="parentId">-->
|
||||
<!-- <a-upload-->
|
||||
<!-- v-model:file-list="file3"-->
|
||||
<!-- name="file"-->
|
||||
<!-- action="https://file.wsdns.cn/api/file/image"-->
|
||||
<!-- :headers="{ Authorization: token }"-->
|
||||
<!-- @change="onFile3"-->
|
||||
<!-- >-->
|
||||
<!-- <a-button>-->
|
||||
<!-- <upload-outlined />-->
|
||||
<!-- 上传-->
|
||||
<!-- </a-button>-->
|
||||
<!-- </a-upload>-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- </a-col>-->
|
||||
<!-- </a-row>-->
|
||||
<!-- </a-card>-->
|
||||
<!-- <a-divider style="height: 8px" />-->
|
||||
<!-- <a-card title="开发资料" :bordered="false">-->
|
||||
<!-- <template #extra><a-button type="link" @click="handleEditStatus">编辑</a-button></template>-->
|
||||
<!-- <!– 编辑器 –>-->
|
||||
<!-- <byte-md-editor-->
|
||||
<!-- v-if="editStatus"-->
|
||||
<!-- v-model:value="requirement"-->
|
||||
<!-- placeholder="请输入您的内容，图片请直接粘贴"-->
|
||||
<!-- :locale="zh_Hans"-->
|
||||
<!-- mode="split"-->
|
||||
<!-- :plugins="plugins"-->
|
||||
<!-- height="500px"-->
|
||||
<!-- :editorConfig="{ lineNumbers: true }"-->
|
||||
<!-- @paste="onPaste"-->
|
||||
<!-- />-->
|
||||
<!-- <!– 编辑器 –>-->
|
||||
<!-- <byte-md-viewer v-else :value="requirement" :plugins="plugins" />-->
|
||||
<!-- </a-card>-->
|
||||
<!-- <a-divider style="height: 8px" />-->
|
||||
<!-- <a-card title="企业介绍" :bordered="false">-->
|
||||
<!-- <template #extra><a-button type="link" @click="handleEditStatus">编辑</a-button></template>-->
|
||||
<!-- <!– 编辑器 –>-->
|
||||
<!-- <byte-md-editor-->
|
||||
<!-- v-if="editStatus"-->
|
||||
<!-- v-model:value="content"-->
|
||||
<!-- placeholder="请输入您的内容，图片请直接粘贴"-->
|
||||
<!-- :locale="zh_Hans"-->
|
||||
<!-- mode="split"-->
|
||||
<!-- :plugins="plugins"-->
|
||||
<!-- height="500px"-->
|
||||
<!-- :editorConfig="{ lineNumbers: true }"-->
|
||||
<!-- @paste="onPaste"-->
|
||||
<!-- />-->
|
||||
<!-- <!– 编辑器 –>-->
|
||||
<!-- <byte-md-viewer v-else :value="content" :plugins="plugins" />-->
|
||||
<!-- </a-card>-->
|
||||
<!-- <a-divider style="height: 8px" />-->
|
||||
<!-- <a-card title="企业截图" :bordered="false">-->
|
||||
<!-- <template #extra><a-button type="link" @click="handleEditStatus">上传</a-button></template>-->
|
||||
<!-- </a-card>-->
|
||||
</a-form>
|
||||
<!-- 地图位置选择弹窗 -->
|
||||
<ele-map-picker
|
||||
:need-city="true"
|
||||
:dark-mode="darkMode"
|
||||
v-model:visible="showMap"
|
||||
:center="[108.374959, 22.767024]"
|
||||
:search-type="1"
|
||||
:zoom="12"
|
||||
@done="onDone"
|
||||
/>
|
||||
</div>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch, createVNode, computed } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject, ipReg, toDateString } from "ele-admin-pro";
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
// 中文语言文件
|
||||
import zh_Hans from 'bytemd/locales/zh_Hans.json';
|
||||
// 链接、删除线、复选框、表格等的插件
|
||||
// 插件的中文语言文件
|
||||
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
|
||||
import 'bytemd/dist/index.min.css';
|
||||
import 'github-markdown-css/github-markdown-light.css';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
// import TinymceEditor from '@/components/TinymceEditor/index.vue';
|
||||
import highlight from '@bytemd/plugin-highlight';
|
||||
// 中文语言文件
|
||||
import gfm from '@bytemd/plugin-gfm';
|
||||
// // 预览界面的样式，这里用的 github 的 markdown 主题
|
||||
import 'github-markdown-css/github-markdown-light.css';
|
||||
import {
|
||||
EyeOutlined,
|
||||
EyeInvisibleOutlined,
|
||||
EnvironmentOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { UploadOutlined } from '@/layout/menu-icons';
|
||||
import { FormInstance } from 'ant-design-vue/es/form';
|
||||
import { Company } from '@/api/system/company/model';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import DictSelect from '@/views/search/components/dict-select.vue';
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { uploadFile } from "@/api/system/file";
|
||||
import { FILE_SERVER, FILE_THUMBNAIL, TOKEN_STORE_NAME } from "@/config/setting";
|
||||
import { listAppUser, addAppUser, removeAppUser } from "@/api/oa/app/user";
|
||||
import { AppUser } from '@/api/oa/app/user/model'
|
||||
import { updateCompany, addCompany } from "@/api/system/company";
|
||||
import { CenterPoint } from "ele-admin-pro/es/ele-map-picker/types";
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
const { darkMode } = storeToRefs(themeStore);
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Company | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
// 当期时间
|
||||
const dayTime = toDateString(new Date());
|
||||
// 已上传数据
|
||||
const images = ref<ItemType[]>([]);
|
||||
const appUsers = ref<AppUser[]>([]);
|
||||
const selectUser = ref<string>();
|
||||
const editStatus = ref(false);
|
||||
// 类型 single|multiple
|
||||
// const type = ref<string>('single');
|
||||
// 日期范围选择
|
||||
const dateRange = ref<[string, string]>(['', '']);
|
||||
const content = ref('');
|
||||
const requirement = ref('');
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
// 穿梭框数据
|
||||
const breakfast = ref<any[]>();
|
||||
const targetKeys1 = ref<any[]>([]);
|
||||
const selectedKeys1 = ref<any[]>();
|
||||
const lunch = ref<any[]>();
|
||||
const targetKeys2 = ref<any[]>([]);
|
||||
const selectedKeys2 = ref<any[]>();
|
||||
const dinner = ref<any[]>();
|
||||
const targetKeys3 = ref<any[]>([]);
|
||||
const selectedKeys3 = ref<any[]>();
|
||||
const selectedGoodsIds = ref<any[]>([]);
|
||||
const showAddUserForm = ref(false);
|
||||
// 是否显示地图选择弹窗
|
||||
const showMap = ref(false);
|
||||
// 省市区
|
||||
const city = ref<string[]>([]);
|
||||
const token = localStorage.getItem(TOKEN_STORE_NAME);
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 文件模型
|
||||
interface FileItem {
|
||||
uid: string;
|
||||
name?: string;
|
||||
status?: string;
|
||||
response?: Response;
|
||||
thumbUrl?: string;
|
||||
downloadUrl?: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
interface FileInfo {
|
||||
file: FileItem;
|
||||
fileList: FileItem[];
|
||||
}
|
||||
// 文件上传
|
||||
const file1 = ref<FileItem[]>();
|
||||
const file2 = ref<FileItem[]>();
|
||||
const file3 = ref<FileItem[]>();
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<Company>({
|
||||
companyId: undefined,
|
||||
companyName: '',
|
||||
companyCode: '',
|
||||
shortName: '',
|
||||
phone: '',
|
||||
companyLogo: undefined,
|
||||
domain: '',
|
||||
sortNumber: undefined,
|
||||
comments: '',
|
||||
tenantName: '',
|
||||
tenantId: undefined,
|
||||
createTime: '',
|
||||
status: undefined,
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
companyName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入企业名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
// appCode: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'string',
|
||||
// message: '请输入企业标识(英文字母)',
|
||||
// trigger: 'blur'
|
||||
// }
|
||||
// ],
|
||||
// progress: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'string',
|
||||
// message: '请选择跟进状态',
|
||||
// trigger: 'blur'
|
||||
// }
|
||||
// ],
|
||||
// securityStatus: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'string',
|
||||
// message: '请选择安全状态',
|
||||
// trigger: 'blur'
|
||||
// }
|
||||
// ],
|
||||
// companyName: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'string',
|
||||
// message: '请选择租赁单位',
|
||||
// trigger: 'blur'
|
||||
// }
|
||||
// ],
|
||||
// appRegion: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'string',
|
||||
// message: '请输入企业地址',
|
||||
// trigger: 'blur'
|
||||
// }
|
||||
// ]
|
||||
});
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(form, rules);
|
||||
|
||||
const addUser = () => {
|
||||
showAddUserForm.value = true;
|
||||
};
|
||||
|
||||
const chooseCompanyName = (data: Company) => {
|
||||
form.companyName = data.companyName;
|
||||
form.companyId = data.companyId;
|
||||
};
|
||||
|
||||
// 添加开发成员
|
||||
const addAppDevUser = (data: User) => {
|
||||
addAppUser({
|
||||
userId: data.userId,
|
||||
appId: props.data?.appId,
|
||||
role: 20
|
||||
}).then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
|
||||
// 添加体验成员
|
||||
const addAppExpUser = (data: User) => {
|
||||
addAppUser({
|
||||
userId: data.userId,
|
||||
appId: props.data?.appId,
|
||||
role: 10
|
||||
}).then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
|
||||
// 移除成员
|
||||
const removeUser = (data: AppUser) => {
|
||||
removeAppUser(data.appUserId)
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 选择地区
|
||||
const onChangeRegion = (value) => {
|
||||
form.province = value[0];
|
||||
form.city = value[1];
|
||||
form.region = value[2];
|
||||
};
|
||||
|
||||
/* 地图选择后回调 */
|
||||
const onDone = (location: CenterPoint) => {
|
||||
console.log(location);
|
||||
city.value = [
|
||||
`${location.city?.province}`,
|
||||
`${location.city?.city}`,
|
||||
`${location.city?.district}`
|
||||
];
|
||||
form.province = `${location.city?.province}`;
|
||||
form.city = `${location.city?.city}`;
|
||||
form.region = `${location.city?.district}`;
|
||||
form.address = `${location.address}`;
|
||||
form.latitude = `${location.lat}`;
|
||||
form.longitude = `${location.lng}`;
|
||||
showMap.value = false;
|
||||
};
|
||||
|
||||
const handleEditStatus = () => {
|
||||
editStatus.value = !editStatus.value;
|
||||
}
|
||||
|
||||
// const chooseCompanyName = (data: Company) => {
|
||||
// form.companyName = data.companyName;
|
||||
// };
|
||||
|
||||
const chooseDismantlingCompany = (data: Company) => {
|
||||
form.dismantlingCompany = data.companyName;
|
||||
};
|
||||
|
||||
const chooseDirector = (data: User) => {
|
||||
form.director = data.nickname;
|
||||
};
|
||||
|
||||
const chooseDeveloper = (data: Company) => {
|
||||
form.developer = data.companyName;
|
||||
};
|
||||
|
||||
const chooseSalesman = (data: User) => {
|
||||
form.salesman = data.nickname;
|
||||
};
|
||||
|
||||
const changeAppCode = (e) => {
|
||||
form.packageName = `com.gxwebsoft.${form.appCode}`;
|
||||
form.appUrl = `https://apps.gxwebsoft.com/${form.appCode}`;
|
||||
}
|
||||
|
||||
/* 打开位置选择 */
|
||||
const openMapPicker = () => {
|
||||
showMap.value = true;
|
||||
};
|
||||
|
||||
const onFile1 = (info: FileInfo) => {
|
||||
let resFileList = [...info.fileList];
|
||||
file1.value = resFileList.map((file) => {
|
||||
if (file.response) {
|
||||
file.url = file.response.url;
|
||||
}
|
||||
return file;
|
||||
});
|
||||
form.file1 = JSON.stringify(file1.value);
|
||||
};
|
||||
const onFile2 = (info: FileInfo) => {
|
||||
let resFileList = [...info.fileList];
|
||||
file2.value = resFileList.map((file) => {
|
||||
if (file.response) {
|
||||
file.url = file.response.url;
|
||||
}
|
||||
return file;
|
||||
});
|
||||
form.file2 = JSON.stringify(file2.value);
|
||||
};
|
||||
const onFile3 = (info: FileInfo) => {
|
||||
let resFileList = [...info.fileList];
|
||||
file3.value = resFileList.map((file) => {
|
||||
if (file.response) {
|
||||
file.url = file.response.url;
|
||||
}
|
||||
return file;
|
||||
});
|
||||
form.file3 = JSON.stringify(file3.value);
|
||||
};
|
||||
|
||||
const config = ref({
|
||||
height: 500,
|
||||
images_upload_handler: (blobInfo, success, error) => {
|
||||
const file = blobInfo.blob();
|
||||
// 使用 axios 上传，实际开发这段建议写在 api 中再调用 api
|
||||
const formData = new FormData();
|
||||
formData.append('file', file, file.name);
|
||||
uploadFile(<File>file)
|
||||
.then((result) => {
|
||||
if (result.length) {
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
error('图片大小不能超过 2MB');
|
||||
}
|
||||
success(FILE_SERVER + result.path);
|
||||
} else {
|
||||
error('上传失败');
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 上传文件
|
||||
const onUpload = (item) => {
|
||||
const { file } = item;
|
||||
images.value = [];
|
||||
uploadFile(file)
|
||||
.then((data) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: FILE_THUMBNAIL + data.path,
|
||||
status: 'done'
|
||||
});
|
||||
form.companyLogo = data.path;
|
||||
message.success('上传成功');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 粘贴图片上传服务器并插入编辑器 */
|
||||
const onPaste = (e) => {
|
||||
console.log(e);
|
||||
const items = (e.clipboardData || e.originalEvent.clipboardData).items;
|
||||
console.log(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
|
||||
};
|
||||
uploadFile(<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 (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form,
|
||||
content: content.value
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateCompany : addCompany;
|
||||
saveOrUpdate(formData)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
loading.value = true;
|
||||
listAppUser({appId:props.data?.appId}).then(data => {
|
||||
appUsers.value = data
|
||||
})
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
content.value = '';
|
||||
requirement.value = '';
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
images.value = [];
|
||||
if(props.data.companyLogo){
|
||||
images.value.push({
|
||||
uid: 0,
|
||||
url: FILE_THUMBNAIL + props.data.companyLogo,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
|
||||
if (props.data.content) {
|
||||
content.value = props.data.content;
|
||||
}
|
||||
if (props.data.requirement){
|
||||
requirement.value = props.data.requirement;
|
||||
}
|
||||
if (props.data.file1) {
|
||||
file1.value = JSON.parse(props.data.file1);
|
||||
}
|
||||
if (props.data.file2) {
|
||||
file2.value = JSON.parse(props.data.file2);
|
||||
}
|
||||
if (props.data.file3) {
|
||||
file3.value = JSON.parse(props.data.file3);
|
||||
}
|
||||
isUpdate.value = true;
|
||||
reload();
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less"></style>
|
||||
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.ml-10 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
margin-right: 70px;
|
||||
}
|
||||
|
||||
.upload-image {
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,298 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<a-drawer
|
||||
width="60%"
|
||||
:visible="visible"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '企业详情' : '添加企业'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<div style="background-color: #f3f3f3; padding: 8px">
|
||||
<a-card title="基本信息">
|
||||
<a-form
|
||||
:label-col="
|
||||
styleResponsive
|
||||
? { lg: 2, md: 6, sm: 4, xs: 24 }
|
||||
: { flex: '100px' }
|
||||
"
|
||||
:wrapper-col="styleResponsive ? { offset: 1 } : { offset: 1 }"
|
||||
style="margin-top: 20px"
|
||||
>
|
||||
<a-form-item labelAlign="right" label="企业logo">
|
||||
<ele-image-upload
|
||||
v-model:value="logo"
|
||||
disabled
|
||||
:accept="'image/*'"
|
||||
:item-style="{ width: '50px', height: '50px' }"
|
||||
:limit="1"
|
||||
@upload="onUpload"
|
||||
@remove="onClose"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="企业简称">
|
||||
<a-space size="middle">
|
||||
<span>{{ form.shortName }}</span>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item label="企业全称">
|
||||
<a-space size="middle">
|
||||
<span>{{ form.companyName }}</span>
|
||||
<a-tag color="green" v-if="form.authentication">已认证</a-tag>
|
||||
<a-tag color="orange" v-else>未认证</a-tag>
|
||||
</a-space>
|
||||
<!-- <div class="position-right">-->
|
||||
<!-- <a-button>前往认证</a-button>-->
|
||||
<!-- </div>-->
|
||||
</a-form-item>
|
||||
<a-form-item label="主体类型">
|
||||
<a-tag v-if="form.companyType === 0">个人</a-tag>
|
||||
<a-tag v-if="form.companyType === 10" color="">企业</a-tag>
|
||||
</a-form-item>
|
||||
<a-divider style="padding-bottom: 20px" />
|
||||
<a-form-item label="所属地区">
|
||||
<a-space size="middle">
|
||||
<span>{{ form.province }} {{ form.city }} {{ form.region }}</span>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item label="企业地址">
|
||||
<a-space size="middle">
|
||||
<span>{{ form.address }}</span>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item label="联系电话">
|
||||
<a-space size="middle">
|
||||
<span>{{ form.phone }}</span>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item label="企业域名">
|
||||
<a-space size="middle">
|
||||
<span>{{ form.domain }}</span>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-divider style="padding-bottom: 20px" />
|
||||
<a-form-item label="企业成员">
|
||||
<span>{{ form.users }}个成员</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="企业部门">
|
||||
<span>{{ form.departments }}</span>
|
||||
<span>个部门</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="人数上限">
|
||||
<span>{{ form.users }}/{{ form.members }}</span>
|
||||
<!-- <a-button type="link" v-if="form.authentication === false">-->
|
||||
<!-- 去认证扩容-->
|
||||
<!-- </a-button>-->
|
||||
</a-form-item>
|
||||
<a-form-item label="存储空间">
|
||||
{{ getFileSize(form.storage) }}/{{ getFileSize(form.storageMax) }}
|
||||
</a-form-item>
|
||||
<a-divider style="padding-bottom: 20px" />
|
||||
<a-form-item label="行业类型">
|
||||
<a-space size="middle">
|
||||
<span>{{ form.industryParent }} {{ form.industryChild }}</span>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item label="应用版本">
|
||||
<span v-if="form.version === 10">体验版（试用期1个月）</span>
|
||||
<span v-if="form.version === 20">正式版</span>
|
||||
<!-- <div class="position-right">-->
|
||||
<!-- <a-button>前往升级</a-button>-->
|
||||
<!-- </div>-->
|
||||
</a-form-item>
|
||||
<a-form-item label="到期时间">
|
||||
<span>{{ form.expirationTime }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="创建时间">
|
||||
<span>{{ form.createTime }}</span>
|
||||
</a-form-item>
|
||||
<a-divider style="padding-bottom: 20px" />
|
||||
<a-form-item label="企业ID">
|
||||
<span>{{ form.tenantId }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="企业号">
|
||||
<span>{{ form.tenantCode }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="企业注销"
|
||||
extra="注销后，企业在当前应用的数据将会删除,且不可恢复，请谨慎操作"
|
||||
>
|
||||
<a-button>注销</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import { addCompany, updateCompany } from '@/api/system/company';
|
||||
import { Company } from '@/api/system/company/model';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { getFileSize } from '@/utils/common';
|
||||
import { FormInstance } from 'ant-design-vue/es/form';
|
||||
import { FILE_SERVER } from '@/config/setting';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Company | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
const logo = ref<any>([]);
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 表单信息
|
||||
const form = reactive<Company>({
|
||||
companyId: undefined,
|
||||
companyName: '',
|
||||
shortName: '',
|
||||
companyType: undefined,
|
||||
companyLogo: '',
|
||||
domain: '',
|
||||
phone: '',
|
||||
invoiceHeader: '',
|
||||
startTime: '',
|
||||
expirationTime: '',
|
||||
version: '',
|
||||
members: undefined,
|
||||
storage: '',
|
||||
storageMax: '',
|
||||
industryParent: '',
|
||||
industryChild: '',
|
||||
departments: undefined,
|
||||
country: '',
|
||||
province: '',
|
||||
city: '',
|
||||
region: '',
|
||||
address: '',
|
||||
longitude: '',
|
||||
latitude: '',
|
||||
comments: '',
|
||||
authentication: '',
|
||||
status: '',
|
||||
userId: '',
|
||||
users: '',
|
||||
tenantId: undefined,
|
||||
tenantCode: '',
|
||||
createTime: ''
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入企业名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
model: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入企业型号',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
factoryNo: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入出厂编号',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateCompany : addCompany;
|
||||
saveOrUpdate(formData)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
if (props.data.companyLogo) {
|
||||
logo.value = [];
|
||||
logo.value.push({
|
||||
uid: 1,
|
||||
url: FILE_SERVER + props.data.companyLogo,
|
||||
status: ''
|
||||
});
|
||||
}
|
||||
assignObject(form, props.data);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less"></style>
|
||||
|
||||
<style lang="less">
|
||||
.position-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,111 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="600"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:title="`导入设备`"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
:footer="null"
|
||||
>
|
||||
<a-upload-dragger
|
||||
name="file"
|
||||
:show-upload-list="false"
|
||||
accept=".xls,.xlsx"
|
||||
:before-upload="handleImport"
|
||||
>
|
||||
<p class="ant-upload-drag-icon">
|
||||
<InboxOutlined />
|
||||
</p>
|
||||
<p class="ant-upload-text">单击或拖动文件到此区域进行上传</p>
|
||||
<p class="ant-upload-hint" style="max-width: 550px">
|
||||
提示：附件上传中，请不要做任何操作！ 支持的文件类型为*.xls, *.xlsx!
|
||||
</p>
|
||||
</a-upload-dragger>
|
||||
<div style="margin: 20px auto; display: flex; justify-content: center">
|
||||
<a
|
||||
href="https://file.wsdns.cn/download/20230523/2f5ffa06b0684e138184c6786f6fbb68.xlsx"
|
||||
target="_blank"
|
||||
>下载设备导入模板</a
|
||||
>
|
||||
</div>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { InboxOutlined } from '@ant-design/icons-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { addBatchTowerEquipment } from '@/api/tower/equipment';
|
||||
import { TowerEquipment } from '@/api/tower/equipment/model';
|
||||
import { read, utils } from 'xlsx';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 导入的数据
|
||||
const importData = ref<TowerEquipment[]>([]);
|
||||
const handleImport = (file: File) => {
|
||||
if (
|
||||
![
|
||||
'application/vnd.ms-excel',
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
].includes(file.type)
|
||||
) {
|
||||
message.error('只能选择 excel 文件');
|
||||
return false;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 20) {
|
||||
message.error('大小不能超过 20MB');
|
||||
return false;
|
||||
}
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const data = new Uint8Array(e.target?.result as any);
|
||||
const workbook = read(data, { type: 'array' });
|
||||
const sheetNames = workbook.SheetNames;
|
||||
const worksheet = workbook.Sheets[sheetNames[0]];
|
||||
// 解析成二维数组
|
||||
const aoa = utils.sheet_to_json<string[]>(worksheet, { header: 1 });
|
||||
console.log(aoa);
|
||||
aoa.slice(1).map((d) => {
|
||||
const array = ['闲置', '报废', '注销', '转卖'];
|
||||
importData.value.push({
|
||||
status: array.indexOf(d[0]),
|
||||
name: d[1],
|
||||
factoryNo: d[2],
|
||||
model: d[3],
|
||||
manufactor: d[4],
|
||||
buyDate: d[5],
|
||||
filingNo: d[6],
|
||||
factoryDate: d[7],
|
||||
company: d[8],
|
||||
source: d[9],
|
||||
warehouse: d[10],
|
||||
users: d[11],
|
||||
equipmentNo: d[12],
|
||||
ratedLoad: d[13],
|
||||
maxLiftingHeight: d[14],
|
||||
armLength: d[15],
|
||||
currentLocation: d[16],
|
||||
machineNo: d[17]
|
||||
});
|
||||
});
|
||||
addBatchTowerEquipment(importData.value).then(() => {
|
||||
message.success('导入成功');
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
});
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
return false;
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,248 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<a-button type="primary" class="ele-btn-icon" @click="add">
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
<span>添加企业</span>
|
||||
</a-button>
|
||||
<a-button v-if="tenantId !== 5" class="ele-btn-icon" @click="openImport">
|
||||
<template #icon>
|
||||
<UploadOutlined />
|
||||
</template>
|
||||
<span>导入</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
:disabled="selection.length === 0"
|
||||
@click="removeBatch"
|
||||
>
|
||||
<template #icon>
|
||||
<DeleteOutlined />
|
||||
</template>
|
||||
<span>批量删除</span>
|
||||
</a-button>
|
||||
<a-radio-group v-model:value="where.authentication" @change="handleSearch">
|
||||
<a-radio-button :value="0">未认证</a-radio-button>
|
||||
<a-radio-button :value="1">已认证</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-radio-group v-model:value="where.version" @change="handleSearch">
|
||||
<a-radio-button :value="10">体验版</a-radio-button>
|
||||
<a-radio-button :value="20">授权版</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-button
|
||||
class="ele-btn-icon"
|
||||
:disabled="selection.length === 0"
|
||||
@click="handleExport"
|
||||
>
|
||||
<span>导出</span>
|
||||
</a-button>
|
||||
<regions-select
|
||||
v-model:value="city"
|
||||
type="provinceCity"
|
||||
valueField="label"
|
||||
placeholder="请选择省市区"
|
||||
class="ele-fluid"
|
||||
@change="handleCity"
|
||||
/>
|
||||
<a-range-picker
|
||||
v-model:value="dateRange"
|
||||
@change="search"
|
||||
value-format="YYYY-MM-DD"
|
||||
class="ele-fluid"
|
||||
/>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入关键词"
|
||||
v-model:value="searchText"
|
||||
@pressEnter="search"
|
||||
@search="search"
|
||||
/>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
<!-- 导入弹窗 -->
|
||||
<Import v-model:visible="showImport" @done="search" />
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
PlusOutlined,
|
||||
UploadOutlined,
|
||||
DownloadOutlined,
|
||||
DeleteOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { ref, watch } from 'vue';
|
||||
import { utils, writeFile } from 'xlsx';
|
||||
import { Company } from '@/api/system/company/model';
|
||||
import { CompanyParam } from '@/api/system/company/model';
|
||||
import Import from './import.vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: CompanyParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'update', status?: number): void;
|
||||
(e: 'import'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<CompanyParam>({
|
||||
companyId: undefined,
|
||||
companyName: undefined,
|
||||
keywords: '',
|
||||
authentication: undefined,
|
||||
version: undefined,
|
||||
province: '',
|
||||
city: '',
|
||||
region: ''
|
||||
});
|
||||
const tenantId = ref<number>();
|
||||
if (localStorage.getItem('tenantId')) {
|
||||
tenantId.value = Number(localStorage.getItem('tenantId'));
|
||||
}
|
||||
// 下来选项
|
||||
const type = ref('keywords');
|
||||
// 搜索内容
|
||||
const searchText = ref('');
|
||||
// 状态
|
||||
const status = ref<number>();
|
||||
// 所在城市
|
||||
const city = ref<string[]>(['广西壮族自治区']);
|
||||
// 日期范围选择
|
||||
const dateRange = ref<[string, string]>(['', '']);
|
||||
// 是否显示导入弹窗
|
||||
const showImport = ref(false);
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
console.log(where);
|
||||
resetFields();
|
||||
const [d1, d2] = dateRange.value ?? [];
|
||||
if (type.value == 'keywords') {
|
||||
where.keywords = searchText.value;
|
||||
}
|
||||
emit('search', {
|
||||
...where,
|
||||
createTimeStart: d1 ? d1 + ' 00:00:00' : '',
|
||||
createTimeEnd: d2 ? d2 + ' 23:59:59' : ''
|
||||
});
|
||||
};
|
||||
|
||||
// 导出
|
||||
const handleExport = () => {
|
||||
if (!props.selection?.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
const array: (string | number)[][] = [
|
||||
[
|
||||
'ID',
|
||||
'企业名称',
|
||||
'企业简称',
|
||||
'所在城市',
|
||||
'详细地址',
|
||||
'联系电话',
|
||||
'企业域名',
|
||||
'实名认证',
|
||||
'版本',
|
||||
'注册时间',
|
||||
'到期时间',
|
||||
'备注'
|
||||
]
|
||||
];
|
||||
|
||||
props.selection?.forEach((d: Company) => {
|
||||
let version = '';
|
||||
if (d.version === 10) {
|
||||
version = '体验版';
|
||||
}
|
||||
if (d.version === 20) {
|
||||
version = '授权版';
|
||||
}
|
||||
array.push([
|
||||
`${d.companyId}`,
|
||||
`${d.companyName}`,
|
||||
`${d.shortName}`,
|
||||
`${d.city}`,
|
||||
`${d.address}`,
|
||||
`${d.phone}`,
|
||||
`${d.domain}`,
|
||||
`${d.authentication == 1 ? '已认证' : ''}`,
|
||||
`${version}`,
|
||||
`${d.createTime}`,
|
||||
`${d.expirationTime}`,
|
||||
`${d.users}`,
|
||||
`${d.comments}`
|
||||
]);
|
||||
});
|
||||
const sheetName = '企业导出列表';
|
||||
const workbook = {
|
||||
SheetNames: [sheetName],
|
||||
Sheets: {}
|
||||
};
|
||||
const sheet = utils.aoa_to_sheet(array);
|
||||
workbook.Sheets[sheetName] = sheet;
|
||||
// 设置列宽
|
||||
sheet['!cols'] = [
|
||||
{ wch: 10 },
|
||||
{ wch: 10 },
|
||||
{ wch: 10 },
|
||||
{ wch: 10 },
|
||||
{ wch: 20 },
|
||||
{ wch: 40 },
|
||||
{ wch: 10 }
|
||||
];
|
||||
writeFile(workbook, '导出企业管理表.xlsx');
|
||||
};
|
||||
|
||||
// 添加企业
|
||||
const add = () => {
|
||||
if (tenantId.value == 5) {
|
||||
return window.open('https://www.gxwebsoft.com/register');
|
||||
}
|
||||
emit('add');
|
||||
};
|
||||
|
||||
// 导入
|
||||
const openImport = () => {
|
||||
showImport.value = true;
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
search();
|
||||
};
|
||||
|
||||
const handleCity = (text) => {
|
||||
where.city = text[1];
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
// 批量删除
|
||||
const removeBatch = () => {
|
||||
emit('remove');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,325 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card title="客户管理" :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="companyId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
:scroll="{ x: 1200 }"
|
||||
class="sys-org-table"
|
||||
:striped="true"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'companyName'">
|
||||
<div class="company-box">
|
||||
<a-avatar
|
||||
v-if="record.companyLogo"
|
||||
:src="FILE_THUMBNAIL + record.companyLogo"
|
||||
/>
|
||||
<div class="company-name">
|
||||
<span>{{ record.shortName }}</span>
|
||||
<span class="ele-text-placeholder">{{
|
||||
record.companyName
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'members'">
|
||||
<span>{{ record.users }}/{{ record.members }}</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'storage'">
|
||||
{{ getFileSize(record.storage) }}/{{
|
||||
getFileSize(record.storageMax)
|
||||
}}
|
||||
</template>
|
||||
<template v-if="column.key === 'version'">
|
||||
<a-tag v-if="record.version === 20" color="green">授权版</a-tag>
|
||||
<a-tag v-if="record.version === 10">体验版</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'departments'">
|
||||
<span>{{ record.departments }}个部门</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'createTime'">
|
||||
<div class="create-time">
|
||||
<span class="ele-text-placeholder">{{
|
||||
record.createTime
|
||||
}}</span>
|
||||
<span class="ele-text-placeholder">{{
|
||||
record.expirationTime
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'authentication'">
|
||||
<a-tag v-if="record.authentication === 1" color="green"
|
||||
>已认证</a-tag
|
||||
>
|
||||
<a-tag v-if="record.authentication === 0">未认证</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">正常</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">报废</a-tag>
|
||||
<a-tag v-if="record.status === 2" color="purple">注销</a-tag>
|
||||
<a-tag v-if="record.status === 3" color="orange">转卖</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<!-- <a @click="openEdit(record)">编辑</a>-->
|
||||
<!-- <a-divider type="vertical" />-->
|
||||
<a @click="openInfo(record)">详情</a>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
<CompanyEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
<!-- 企业详情 -->
|
||||
<CompanyInfo v-model:visible="showInfo" :data="current" @done="reload" />
|
||||
</div>
|
||||
</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,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import Search from './components/search.vue';
|
||||
import CompanyEdit from './components/company-edit.vue';
|
||||
import CompanyInfo from './components/company-info.vue';
|
||||
import { pageCompany, removeBatchCompany } from '@/api/system/company';
|
||||
import { FILE_THUMBNAIL } from '@/config/setting';
|
||||
import { getFileSize } from '@/utils/common';
|
||||
import { Company, CompanyParam } from '@/api/system/company/model';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
defineProps<{
|
||||
activeKey?: boolean;
|
||||
data?: any;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '企业名称',
|
||||
dataIndex: 'companyName',
|
||||
key: 'companyName',
|
||||
width: 280
|
||||
},
|
||||
// {
|
||||
// title: '企业简称',
|
||||
// dataIndex: 'shortName',
|
||||
// key: 'shortName'
|
||||
// },
|
||||
{
|
||||
title: '所在城市',
|
||||
dataIndex: 'city',
|
||||
key: 'city'
|
||||
},
|
||||
{
|
||||
title: '企业域名',
|
||||
dataIndex: 'domain',
|
||||
key: 'domain'
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: '企业成员',
|
||||
dataIndex: 'members',
|
||||
key: 'members'
|
||||
},
|
||||
{
|
||||
title: '企业部门',
|
||||
dataIndex: 'departments',
|
||||
key: 'departments',
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: '存储空间',
|
||||
dataIndex: 'storage',
|
||||
key: 'storage',
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: '实名认证',
|
||||
dataIndex: 'authentication',
|
||||
key: 'authentication'
|
||||
},
|
||||
{
|
||||
title: '版本',
|
||||
dataIndex: 'version',
|
||||
key: 'version'
|
||||
},
|
||||
{
|
||||
title: '注册时间 / 到期时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<Company[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<Company | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示详情弹窗
|
||||
const showInfo = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
// 搜索条件
|
||||
return pageCompany({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CompanyParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: Company) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开详情弹窗 */
|
||||
const openInfo = (row?: Company) => {
|
||||
current.value = row ?? null;
|
||||
showInfo.value = true;
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchCompany(selection.value.map((d) => d.companyId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Company) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
reload();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CompanyIndex'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
p {
|
||||
line-height: 0.8;
|
||||
}
|
||||
.sys-org-table :deep(.ant-table-body) {
|
||||
overflow: auto !important;
|
||||
overflow: overlay !important;
|
||||
}
|
||||
|
||||
.sys-org-table :deep(.ant-table-pagination.ant-pagination) {
|
||||
padding: 0 4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.price-edit {
|
||||
padding-right: 5px;
|
||||
}
|
||||
.comments {
|
||||
max-width: 200px;
|
||||
}
|
||||
.company-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.company-name {
|
||||
padding-left: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.create-time {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,304 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="680"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑客户' : '添加客户'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-space>
|
||||
<a-form
|
||||
:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="客户名称" v-bind="validateInfos.customerName">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="30"
|
||||
placeholder="请输入客户名称"
|
||||
v-model:value="form.customerName"
|
||||
@blur="
|
||||
validate('customerName', { trigger: 'blur' }).catch(() => {})
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="客户标识" v-bind="validateInfos.customerCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入用户账号"
|
||||
v-model:value="form.customerCode"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="跟进状态" v-bind="validateInfos.progress">
|
||||
<progress-select
|
||||
v-model:value="form.progress"
|
||||
@blur="
|
||||
validate('progress', { trigger: 'blur' }).catch(() => {})
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="客户类型" v-bind="validateInfos.customerType">
|
||||
<type-select
|
||||
v-model:value="form.customerType"
|
||||
@blur="
|
||||
validate('customerType', { trigger: 'blur' }).catch(() => {})
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="客户来源" v-bind="validateInfos.customerSource">
|
||||
<source-select
|
||||
v-model:value="form.customerSource"
|
||||
@blur="
|
||||
validate('customerSource', { trigger: 'blur' }).catch(() => {})
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="头像" v-bind="validateInfos.customerAvatar">
|
||||
<ele-image-upload
|
||||
v-model:value="images"
|
||||
:item-style="{ width: '90px', height: '90px' }"
|
||||
:limit="1"
|
||||
@upload="onUpload"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="客户全称" v-bind="validateInfos.customerFullName">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="30"
|
||||
placeholder="请输入客户全称"
|
||||
v-model:value="form.customerFullName"
|
||||
@blur="
|
||||
validate('customerFullName', { trigger: 'blur' }).catch(() => {})
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="联系人" v-bind="validateInfos.customerContacts">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请填写联系人"
|
||||
v-model:value="form.customerContacts"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号码" v-bind="validateInfos.customerMobile">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请填写联系人手机号码"
|
||||
v-model:value="form.customerMobile"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="联系地址"
|
||||
v-bind="validateInfos.customerAddress"
|
||||
>
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请填写联系地址"
|
||||
v-model:value="form.customerAddress"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="公司座机" v-bind="validateInfos.customerPhone">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请填写公司座机电话"
|
||||
v-model:value="form.customerPhone"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" v-bind="validateInfos.sortNumber">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="排序"
|
||||
v-model:value="form.sortNumber"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注" v-bind="validateInfos.comments">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入备注"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-space>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {ref, reactive, watch, computed} from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import TypeSelect from './customer-edit/type-select.vue';
|
||||
import ProgressSelect from './customer-edit/progress-select.vue';
|
||||
import SourceSelect from './customer-edit/source-select.vue';
|
||||
import { addCustomer, updateCustomer } from '@/api/oa/customer';
|
||||
import type { Customer } from '@/api/oa/customer/model';
|
||||
import { createCode } from '@/utils/common';
|
||||
import { uploadFile } from '@/api/system/file';
|
||||
import type { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { FILE_SERVER } from '@/config/setting';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
// 当前用户信息
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Customer | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<Customer>({
|
||||
customerCode: '',
|
||||
customerName: '',
|
||||
customerFullName: '',
|
||||
customerType: undefined,
|
||||
progress: undefined,
|
||||
customerMobile: '',
|
||||
customerAvatar: '',
|
||||
customerPhone: '',
|
||||
customerSource: '',
|
||||
customerContacts: '',
|
||||
customerAddress: '',
|
||||
comments: '',
|
||||
status: '0',
|
||||
sortNumber: 100,
|
||||
customerId: 0,
|
||||
userId: '',
|
||||
});
|
||||
|
||||
// 已上传数据, 可赋初始值用于回显
|
||||
const images = ref(<any>[]);
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
customerName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入客户名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
customerCode: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入合法的IP地址',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
progress: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请选择跟进状态',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
// 去除空格
|
||||
form.customerName = form.customerName?.replace(/\s*/g, '');
|
||||
// 判断权限
|
||||
// if (loginUser.value.roles?.[0].roleCode != 'admin'){
|
||||
// form.status = '1';
|
||||
// }
|
||||
const data = {
|
||||
...form
|
||||
};
|
||||
// 转字符串
|
||||
const saveOrUpdate = isUpdate.value ? updateCustomer : addCustomer;
|
||||
saveOrUpdate(data)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// 上传文件
|
||||
const onUpload = (d: ItemType) => {
|
||||
uploadFile(<File>d.file)
|
||||
.then((result) => {
|
||||
form.customerAvatar = result.path;
|
||||
message.success('上传成功');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
// 头像赋值
|
||||
images.value = [];
|
||||
if(props.data.customerAvatar){
|
||||
images.value.push({ uid:1, url: FILE_SERVER + props.data.customerAvatar, status: '' });
|
||||
}
|
||||
assignObject(form, props.data);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
form.customerCode = createCode();
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less"></style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
@change="onChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
(e: 'change'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择客户跟进状态'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('customerFollowStatus');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
|
||||
/* 选择事件 */
|
||||
const onChange = (e) => {
|
||||
emit('change', e);
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!-- 客户来源选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
@change="onChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
(e: 'change'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择客户来源'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('customerSource');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
|
||||
/* 选择事件 */
|
||||
const onChange = (e) => {
|
||||
emit('change', e);
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择状态'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('status');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择客户类型'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('customerType');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@search="onSearch"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { listUsers } from '@/api/system/user';
|
||||
import type { SelectProps } from 'ant-design-vue';
|
||||
import { UserParam } from '@/api/system/user/model';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择客户类型'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = ref<SelectProps['options']>([]);
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
// 默认搜索条件
|
||||
const where = ref<UserParam>({});
|
||||
|
||||
const search = () => {
|
||||
/* 获取用户列 */
|
||||
listUsers({ ...where?.value })
|
||||
.then((result) => {
|
||||
data.value = result?.map((d) => {
|
||||
return {
|
||||
value: d.userId,
|
||||
label: d.nickname
|
||||
};
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const onSearch = (e) => {
|
||||
where.value.nickname = e;
|
||||
search();
|
||||
};
|
||||
|
||||
search();
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,160 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="75%"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="'客户详情'"
|
||||
:maxable="true"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
:footer="null"
|
||||
>
|
||||
<a-form
|
||||
:label-col="{ md: { span: 4 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 19 }, sm: { span: 24 } }"
|
||||
>
|
||||
<div class="base-form" style="margin-bottom: 20px">
|
||||
<div class="card-head">
|
||||
<a-avatar
|
||||
:size="50"
|
||||
style="margin-right: 10px"
|
||||
:src="
|
||||
customer.customerAvatar
|
||||
? FILE_SERVER + customer.customerAvatar
|
||||
: ''
|
||||
"
|
||||
/>
|
||||
<h2>{{ customer.customerName }}</h2>
|
||||
</div>
|
||||
<a-descriptions bordered>
|
||||
<a-descriptions-item label="客户名称">
|
||||
{{ customer.customerName }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="客户标识">
|
||||
{{ customer.customerCode }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="跟进状态">
|
||||
<div color="blue" v-for="(d, index) in progress" :key="index">
|
||||
<span v-if="d.value == customer.progress">{{ d.label }}</span>
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="座机电话">
|
||||
{{ customer.customerPhone }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="联系人">
|
||||
{{ customer.customerContacts }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="客户类型">
|
||||
<div color="blue" v-for="(d, index) in customerType" :key="index">
|
||||
<span v-if="d.value == customer.customerType">{{ d.value }}</span>
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="联系地址">
|
||||
{{ customer.customerAddress }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="联系电话">
|
||||
{{ customer.customerMobile }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="备注">
|
||||
{{ customer.comments }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
<!-- <a-descriptions-->
|
||||
<!-- title="其他信息"-->
|
||||
<!-- :column="1"-->
|
||||
<!-- bordered-->
|
||||
<!-- style="margin-top: 30px"-->
|
||||
<!-- >-->
|
||||
<!-- <a-descriptions-item label="相关项目">-->
|
||||
<!-- {{ customer.comments }}-->
|
||||
<!-- </a-descriptions-item>-->
|
||||
<!-- </a-descriptions>-->
|
||||
</div>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import type { Customer } from '@/api/oa/customer/model';
|
||||
import { FILE_SERVER } from '@/config/setting';
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Customer | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 用户信息
|
||||
const customer = reactive<Customer>({
|
||||
customerCode: '',
|
||||
customerName: '',
|
||||
customerType: undefined,
|
||||
customerMobile: '',
|
||||
customerAvatar: '',
|
||||
customerPhone: '',
|
||||
customerContacts: '',
|
||||
customerAddress: '',
|
||||
comments: '',
|
||||
progress: '',
|
||||
status: '0',
|
||||
sortNumber: 100,
|
||||
customerId: 0
|
||||
});
|
||||
|
||||
// 请求状态
|
||||
const loading = ref(true);
|
||||
|
||||
const { resetFields } = useForm(customer);
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
/* 打开外部链接 */
|
||||
// const openUrl = (record) => {
|
||||
// window.open(record.panel);
|
||||
// };
|
||||
|
||||
/* 获取字典数据 */
|
||||
const customerType = getDictionaryOptions('customerType');
|
||||
const progress = getDictionaryOptions('customerFollowStatus');
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
assignObject(customer, props.data);
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 100px;
|
||||
}
|
||||
.card-head {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="360"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="`批量转移`"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-space>
|
||||
<a-form
|
||||
:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
|
||||
>
|
||||
<a-form-item label="转移到">
|
||||
<UserSelect
|
||||
v-model:value="userId"
|
||||
:placeholder="`请选择用户`"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-space>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch, computed } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import UserSelect from '@/components/UserSelect/index.vue';
|
||||
import { updateBatchCustomer } from '@/api/oa/customer';
|
||||
import type { Customer } from '@/api/oa/customer/model';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import {Organization} from "@/api/system/organization/model";
|
||||
|
||||
const userStore = useUserStore();
|
||||
// 当前用户信息
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Customer[] | [];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(false);
|
||||
const userId = ref(0);
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 选择用户
|
||||
const onSelect = (item) => {
|
||||
userId.value = item.userId;
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
const saveData = props.data;
|
||||
saveData?.map((d) => {
|
||||
d.userId = userId.value;
|
||||
});
|
||||
// updateBatchCustomer(saveData);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
<style lang="less"></style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-form
|
||||
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
|
||||
>
|
||||
<a-row>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="客户名称">
|
||||
<a-input
|
||||
v-model:value.trim="where.customerName"
|
||||
placeholder="请输入客户名称"
|
||||
allow-clear
|
||||
@pressEnter="search"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="客户标识">
|
||||
<a-input
|
||||
v-model:value.trim="where.customerCode"
|
||||
placeholder="请输入客户标识"
|
||||
allow-clear
|
||||
@pressEnter="search"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="search">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useSearch from '@/utils/use-search';
|
||||
import type { CustomerParam } from '@/api/oa/customer/model';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: CustomerParam): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<CustomerParam>({
|
||||
customerName: '',
|
||||
customerCode: ''
|
||||
});
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
search();
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,131 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<a-button type="primary" class="ele-btn-icon" @click="add">
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
v-if="selection.length > 0"
|
||||
@click="removeBatch"
|
||||
>
|
||||
<template #icon>
|
||||
<DeleteOutlined />
|
||||
</template>
|
||||
<span>批量删除</span>
|
||||
</a-button>
|
||||
<!-- <a-button @click="batchMove" v-if="selection.length > 0">-->
|
||||
<!-- <template #icon>-->
|
||||
<!-- <UserSwitchOutlined />-->
|
||||
<!-- </template>-->
|
||||
<!-- 批量转移-->
|
||||
<!-- </a-button>-->
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入关键词"
|
||||
v-model:value="searchText"
|
||||
@pressEnter="search"
|
||||
@search="search"
|
||||
>
|
||||
<template #addonBefore>
|
||||
<a-select v-model:value="type" style="width: 100px; margin: -5px -12px">
|
||||
<a-select-option value="customerName">客户名称</a-select-option>
|
||||
<a-select-option value="customerCode">客户标识</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input-search>
|
||||
<UserSelect
|
||||
v-if="tabValue === 'all'"
|
||||
v-model:value="where.userId"
|
||||
:placeholder="`按用户筛选`"
|
||||
@select="search"
|
||||
@clear="onClear"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
PlusOutlined,
|
||||
DeleteOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import type { CustomerParam } from '@/api/oa/customer/model';
|
||||
import { ref, watch } from 'vue';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import UserSelect from '@/components/UserSelect/index.vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
tabValue?: 'my';
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: CustomerParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where } = useSearch<CustomerParam>({
|
||||
customerName: '',
|
||||
customerCode: '',
|
||||
nickname: '',
|
||||
userId: undefined
|
||||
});
|
||||
// 下来选项
|
||||
const type = ref('customerName');
|
||||
// 搜索内容
|
||||
const searchText = ref('');
|
||||
|
||||
/* 搜索 */
|
||||
const search = (item?: CustomerParam) => {
|
||||
assignObject(where, {});
|
||||
console.log(item);
|
||||
if (type.value == 'customerName') {
|
||||
where.customerName = searchText.value;
|
||||
}
|
||||
if (type.value == 'customerCode') {
|
||||
where.customerCode = searchText.value;
|
||||
}
|
||||
if (item?.userId) {
|
||||
where.userId = item.userId;
|
||||
}
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
// 转移
|
||||
// const batchMove = () => {
|
||||
// emit('batchMove');
|
||||
// };
|
||||
|
||||
// 批量删除
|
||||
const removeBatch = () => {
|
||||
emit('remove');
|
||||
};
|
||||
|
||||
const onClear = () => {
|
||||
where.userId = undefined;
|
||||
search();
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择状态'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('status');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择客户类型'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('customerType');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<!-- <a-page-header :ghost="false" title="客户管理">-->
|
||||
<!-- <div class="ele-text-secondary">-->
|
||||
<!-- 客户管理模块，合理分配客户资源 有效提高工作效率。-->
|
||||
<!-- </div>-->
|
||||
<!-- </a-page-header>-->
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<a-tabs type="card" tabPosition="top" v-model:activeKey="activeKey">
|
||||
<a-tab-pane v-for="(d, index) in data" :key="index" :tab="d.label">
|
||||
<list :type="d" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import List from './list.vue';
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(true);
|
||||
|
||||
// 当前选项卡
|
||||
const activeKey = ref(0);
|
||||
|
||||
// 获取字典数据
|
||||
const data = getDictionaryOptions('customerCategory');
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Customer'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sys-organization-list {
|
||||
padding: 12px 6px;
|
||||
height: calc(100vh - 242px);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,352 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="customerId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
tool-class="ele-toolbar-form"
|
||||
:scroll="{ x: 800 }"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
:tab-value="type.value"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'customerName'">
|
||||
<a-avatar
|
||||
:size="30"
|
||||
:src="`${record.customerAvatar}`"
|
||||
style="margin-right: 4px"
|
||||
:srcset="`https://file.wsdns.cn/${record.customerAvatar}`"
|
||||
>
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<a-tooltip title="查看详情">
|
||||
<a href="#" @click="openInfo(record)">{{ record.customerName }}</a>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'progress'">
|
||||
<div v-for="(d, i) in progressDict" :key="i">
|
||||
<span v-if="d.value === record.progress">{{ d.label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'customerType'">
|
||||
<div v-for="(d, i) in JSON.parse(customerType)" :key="i">
|
||||
<span v-if="d.value === record.customerType">{{ d.value }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">正常</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">待审核</a-tag>
|
||||
<a-tag v-if="record.status === 2" color="purple">已驳回</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'nickname'">
|
||||
<a-tooltip :title="`${record.nickname}`">
|
||||
<a-avatar :src="record.userAvatar" size="small" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'createTime'">
|
||||
<a-tooltip :title="`${toDateString(record.createTime)}`">
|
||||
{{ timeAgo(record.createTime) }}
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space
|
||||
v-if="type.value === 'my' && loginUser.userId === record.userId"
|
||||
>
|
||||
<a @click="openEdit(record)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
title="确定要删除此记录吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
<a-space v-if="type.value === 'all'" v-role="['admin']">
|
||||
<a @click="openEdit(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>
|
||||
<!-- 编辑弹窗 -->
|
||||
<CustomerEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
<!-- 客户详情弹窗 -->
|
||||
<CustomerInfo v-model:visible="showInfo" :data="current" @done="reload" />
|
||||
<!-- 批量转移弹窗 -->
|
||||
<!-- <CustomerMove v-model:visible="showMove" :data="selection" @done="batchMove" />-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import {
|
||||
ExclamationCircleOutlined,
|
||||
UserOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import Search from './components/search.vue';
|
||||
import CustomerEdit from './components/customer-edit.vue';
|
||||
import CustomerInfo from './components/customer-info.vue';
|
||||
import {
|
||||
pageCustomer,
|
||||
removeCustomer,
|
||||
removeBatchCustomer
|
||||
} from '@/api/oa/customer';
|
||||
import { timeAgo } from 'ele-admin-pro';
|
||||
import type { Customer, CustomerParam } from '@/api/oa/customer/model';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const userStore = useUserStore();
|
||||
// 当前用户信息
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
const customerType = localStorage.getItem('customerType');
|
||||
const props = defineProps<{
|
||||
// 选项卡 id
|
||||
type?: any;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<Customer[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<Customer | null>(null);
|
||||
// 获取字典数据
|
||||
const progressDict = getDictionaryOptions('customerFollowStatus');
|
||||
const sourceDict = getDictionaryOptions('customerSource');
|
||||
const typeDict = getDictionaryOptions('customerType');
|
||||
// 是否显示资产详情
|
||||
const showInfo = ref(false);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示批量移动弹窗
|
||||
const showMove = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
if (filters) {
|
||||
where.progress = filters.progress;
|
||||
where.customerSource = filters.customerSource;
|
||||
where.customerType = filters.customerType;
|
||||
where.status = filters.status;
|
||||
}
|
||||
// 搜索条件
|
||||
if (props.type.value === 'my') {
|
||||
where.userId = loginUser.value.userId;
|
||||
} else if (props.type.value === 'all') {
|
||||
// 全部客户
|
||||
// where.userId = undefined;
|
||||
}
|
||||
return pageCustomer({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '客户名称',
|
||||
dataIndex: 'customerName',
|
||||
key: 'customerName',
|
||||
width: 280,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '客户标识',
|
||||
width: 128,
|
||||
dataIndex: 'customerCode'
|
||||
},
|
||||
{
|
||||
title: '跟进状态',
|
||||
key: 'progress',
|
||||
dataIndex: 'progress',
|
||||
filters: progressDict
|
||||
},
|
||||
{
|
||||
title: '客户来源',
|
||||
key: 'customerSource',
|
||||
dataIndex: 'customerSource',
|
||||
filters: sourceDict
|
||||
},
|
||||
{
|
||||
title: '客户类型',
|
||||
key: 'customerType',
|
||||
dataIndex: 'customerType',
|
||||
filters: typeDict
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
filters: [
|
||||
{ text: '正常', value: 0 },
|
||||
{ text: '待审核', value: 1 },
|
||||
{ text: '已驳回', value: 2 }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments'
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortNumber',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CustomerParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: Customer) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 打开用户详情弹窗 */
|
||||
const openInfo = (row?: Customer) => {
|
||||
current.value = row ?? null;
|
||||
showInfo.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Customer) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCustomer(row.customerId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量转移 */
|
||||
const batchMove = (userId) => {
|
||||
console.log(userId, '批量转移0000');
|
||||
console.log(selection.value);
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchCustomer(
|
||||
selection.value.map((d) => {
|
||||
if (loginUser.value.userId === d.userId) {
|
||||
return d.customerId;
|
||||
}
|
||||
})
|
||||
)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Customer'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sys-org-table :deep(.ant-table-body) {
|
||||
overflow: auto !important;
|
||||
overflow: overlay !important;
|
||||
}
|
||||
|
||||
.sys-org-table :deep(.ant-table-pagination.ant-pagination) {
|
||||
padding: 0 4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择项目分类'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('projectCategory');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,69 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
@search="onSearch"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { pageCustomer } from '@/api/oa/customer';
|
||||
import type { SelectProps } from 'ant-design-vue';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: number;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择所属客户'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = ref<SelectProps['options']>([]);
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 获取字典数据 */
|
||||
pageCustomer({ customerType: '' })
|
||||
.then((result) => {
|
||||
data.value = result?.list.map((d) => {
|
||||
return {
|
||||
value: d.customerId,
|
||||
label: d.customerName
|
||||
};
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
|
||||
// 联动搜索
|
||||
const onSearch = (customerName) => {
|
||||
pageCustomer({ customerName }).then((res) => {
|
||||
});
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<a-modal
|
||||
width="80%"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="'富文本转MarkDown'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
:footer="null"
|
||||
>
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-editor
|
||||
v-model:value="content"
|
||||
:locale="zh_Hans"
|
||||
:plugins="plugins"
|
||||
height="600px"
|
||||
:editorConfig="{ lineNumbers: true }"
|
||||
/>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import ByteMdEditor from '@/components/ByteMdEditor/index.vue';
|
||||
// 中文语言文件
|
||||
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';
|
||||
// 预览界面的样式，这里用的 github 的 markdown 主题
|
||||
import 'github-markdown-css/github-markdown-light.css';
|
||||
import { copyText } from '@/utils/common';
|
||||
import { htmlToText } from "ele-admin-pro";
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
// 编辑器内容，双向绑定
|
||||
const content = ref('');
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
})
|
||||
]);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
// const save = () => {
|
||||
// copyText(content.value);
|
||||
// console.log('复制成功');
|
||||
// };
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
} else {
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,488 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="75%"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate ? '编辑项目' : '添加项目'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-tabs type="card" v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="基本信息">
|
||||
<a-form
|
||||
:label-col="{ md: { span: 2 }, sm: { span: 2 }, xs: { span: 24 } }"
|
||||
:wrapper-col="{
|
||||
md: { span: 20 },
|
||||
sm: { span: 20 },
|
||||
xs: { span: 24 }
|
||||
}"
|
||||
>
|
||||
<a-form-item label="项目名称" v-bind="validateInfos.projectName">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入项目名称"
|
||||
v-model:value="form.projectName"
|
||||
@blur="validate('projectName', { trigger: 'blur' }).catch(() => {})"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="项目编号" v-bind="validateInfos.projectCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入用户账号"
|
||||
v-model:value="form.projectCode"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="项目分类" v-bind="validateInfos.projectCategory">
|
||||
<category-select
|
||||
v-model:value="form.projectCategory"
|
||||
@blur="
|
||||
validate('projectCategory', { trigger: 'blur' }).catch(() => {})
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="所属客户" v-bind="validateInfos.customerId">
|
||||
<customer-select
|
||||
v-model:value="form.customerId"
|
||||
@blur="
|
||||
validate('customerId', { trigger: 'blur' }).catch(() => {})
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="图标">
|
||||
<ele-image-upload
|
||||
v-model:value="avatar"
|
||||
:item-style="{ width: '90px', height: '90px' }"
|
||||
:limit="1"
|
||||
@upload="onUploadAvatar"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="开发环境" v-bind="validateInfos.urlDev">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入开发环境地址"
|
||||
v-model:value="form.urlDev"
|
||||
@blur="validate('urlDev', { trigger: 'blur' }).catch(() => {})"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="账号密码" v-bind="validateInfos.account">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入开发环境账号密码"
|
||||
v-model:value="form.account"
|
||||
@blur="validate('account', { trigger: 'blur' }).catch(() => {})"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="生产环境" v-bind="validateInfos.url">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入生产环境地址"
|
||||
v-model:value="form.url"
|
||||
@blur="validate('url', { trigger: 'blur' }).catch(() => {})"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" v-bind="validateInfos.status">
|
||||
<status-select
|
||||
v-model:value="form.status"
|
||||
@blur="validate('status', { trigger: 'blur' }).catch(() => {})"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" v-bind="validateInfos.sortNumber">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="排序"
|
||||
v-model:value="form.sortNumber"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="项目简介" v-bind="validateInfos.comments">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入项目简介"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="项目资料">
|
||||
<!-- 按钮 -->
|
||||
<div style="margin-bottom: 16px">
|
||||
<a-space>
|
||||
<a-button type="dashed" class="ele-btn-icon" @click="setContent">
|
||||
载入模板
|
||||
</a-button>
|
||||
<!-- <a-button type="dashed" class="ele-btn-icon" @click="showHtml">-->
|
||||
<!-- 获取html-->
|
||||
<!-- </a-button>-->
|
||||
<!-- <a-button type="dashed" class="ele-btn-icon" @click="showText">-->
|
||||
<!-- 获取文本-->
|
||||
<!-- </a-button>-->
|
||||
<!-- <a-button-->
|
||||
<!-- type="dashed"-->
|
||||
<!-- :danger="!disabled"-->
|
||||
<!-- class="ele-btn-icon"-->
|
||||
<!-- @click="toggleDisabled"-->
|
||||
<!-- >-->
|
||||
<!-- {{ disabled ? '启用' : '禁用' }}-->
|
||||
<!-- </a-button>-->
|
||||
<a-button type="dashed" @click="openMarkdown">转换工具</a-button>
|
||||
<a-button
|
||||
type="dashed"
|
||||
class="ele-btn-icon"
|
||||
@click="openUrl('https://p.haoii123.com/')"
|
||||
>
|
||||
一键排版
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 编辑器 -->
|
||||
<tinymce-editor
|
||||
v-model:value="content"
|
||||
:disabled="disabled"
|
||||
:init="config"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="项目附件">
|
||||
<ele-image-upload
|
||||
v-model:value="files"
|
||||
:limit="10"
|
||||
:drag="true"
|
||||
:multiple="true"
|
||||
@upload="onUploadFile"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<!-- 转换工具 -->
|
||||
<markdown v-model:visible="showMarkdown" />
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message, Modal } from 'ant-design-vue';
|
||||
import { assignObject, htmlToText } from 'ele-admin-pro';
|
||||
import CategorySelect from './category-select.vue';
|
||||
import StatusSelect from './status-select.vue';
|
||||
import CustomerSelect from './customer-select.vue';
|
||||
import Markdown from './markdown.vue';
|
||||
import { addProject, updateProject } from '@/api/oa/project';
|
||||
import type { Project } from '@/api/oa/project/model';
|
||||
import { createCode, openUrl } from '@/utils/common';
|
||||
import TinymceEditor from '@/components/TinymceEditor/index.vue';
|
||||
import type { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { uploadFile } from '@/api/system/file';
|
||||
import { FILE_SERVER } from '@/config/setting';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Project | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
const activeKey = ref('1');
|
||||
const content = ref('');
|
||||
const disabled = ref(false);
|
||||
const showMarkdown = ref(false);
|
||||
const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<Project>({
|
||||
projectCode: `X` + createCode(),
|
||||
projectName: '',
|
||||
projectAvatar: '',
|
||||
projectCategory: undefined,
|
||||
urlDev: '',
|
||||
urlAdmin: '',
|
||||
account: '',
|
||||
comments: '',
|
||||
content: '',
|
||||
sortNumber: 100,
|
||||
customerName: '',
|
||||
customerId: undefined,
|
||||
status: '0',
|
||||
projectId: 0
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
projectName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入项目名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
projectCode: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入项目编号',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
// projectAvatar: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'string',
|
||||
// message: '请上传项目图标',
|
||||
// trigger: 'blur'
|
||||
// }
|
||||
// ],
|
||||
projectCategory: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请选择项目分类',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
customerId: [
|
||||
{
|
||||
required: true,
|
||||
type: 'number',
|
||||
message: '请选择所属客户',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
status: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '项目状态',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(form, rules);
|
||||
|
||||
// 项目图标
|
||||
const avatar = ref([]);
|
||||
|
||||
const onUploadAvatar = (d: ItemType) => {
|
||||
uploadFile(<File>d.file)
|
||||
.then((result) => {
|
||||
console.log(result);
|
||||
form.projectAvatar = result.path;
|
||||
message.success('上传成功');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 已上传数据
|
||||
const files = ref([]);
|
||||
|
||||
const onUploadFile = (d: ItemType) => {
|
||||
uploadFile(<File>d.file)
|
||||
.then((result) => {
|
||||
console.log(result);
|
||||
form.projectAvatar = result.path;
|
||||
message.success('上传成功');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 修改编辑器内容 */
|
||||
const setContent = () => {
|
||||
content.value = [
|
||||
'<div style="text-align: center;color: #fff;background-image: linear-gradient(-90deg, rgb(62,119,255), rgb(159,98,212), rgb(255,78,170));padding: 32px 0;">',
|
||||
' <div style="font-size: 28px;margin-bottom: 16px;">项目资料模板</div>',
|
||||
' <div style="font-size:18px">通过设置常用模板可以加快工作效率哦！</div>',
|
||||
'</div><br/>'
|
||||
].join('');
|
||||
};
|
||||
|
||||
/* 获取编辑器内容 */
|
||||
const showHtml = () => {
|
||||
Modal.info({
|
||||
maskClosable: true,
|
||||
content: content.value
|
||||
});
|
||||
};
|
||||
|
||||
/* 获取编辑器纯文本内容 */
|
||||
const showText = () => {
|
||||
Modal.info({
|
||||
maskClosable: true,
|
||||
content: htmlToText(content.value)
|
||||
});
|
||||
};
|
||||
|
||||
/* 禁用启用切换 */
|
||||
const toggleDisabled = () => {
|
||||
disabled.value = !disabled.value;
|
||||
};
|
||||
|
||||
/* 打开用户详情弹窗 */
|
||||
const openMarkdown = () => {
|
||||
showMarkdown.value = true;
|
||||
};
|
||||
|
||||
const config = ref({
|
||||
height: 520,
|
||||
// 自定义文件上传(这里使用把选择的文件转成 blob 演示)
|
||||
file_picker_callback: (callback: any, _value: any, meta: any) => {
|
||||
const input = document.createElement('input');
|
||||
input.setAttribute('type', 'file');
|
||||
// 设定文件可选类型
|
||||
if (meta.filetype === 'image') {
|
||||
input.setAttribute('accept', 'image/*');
|
||||
} else if (meta.filetype === 'media') {
|
||||
input.setAttribute('accept', 'video/*');
|
||||
}
|
||||
input.onchange = () => {
|
||||
const file = input.files?.[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
if (meta.filetype === 'media') {
|
||||
if (!file.type.startsWith('video/')) {
|
||||
editorRef.value?.alert({ content: '只能选择视频文件' });
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 20) {
|
||||
editorRef.value?.alert({ content: '大小不能超过 20MB' });
|
||||
return;
|
||||
}
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
if (e.target?.result != null) {
|
||||
const blob = new Blob([e.target.result], { type: file.type });
|
||||
callback(URL.createObjectURL(blob));
|
||||
}
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
};
|
||||
input.click();
|
||||
}
|
||||
});
|
||||
|
||||
/* 上传事件 */
|
||||
const uploadHandler = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name,
|
||||
progress: 0,
|
||||
status: undefined
|
||||
};
|
||||
console.log(item);
|
||||
if (!file.type.startsWith('image')) {
|
||||
message.error('只能选择图片');
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
message.error('大小不能超过 2MB');
|
||||
return;
|
||||
}
|
||||
item.url = window.URL.createObjectURL(file);
|
||||
images.value.push(item);
|
||||
};
|
||||
|
||||
|
||||
/* 上传 item */
|
||||
const onUpload = ({ file }) => {
|
||||
// const item = images.value.find((t) => t.uid === d.uid) ?? d;
|
||||
// console.log('item:', item);
|
||||
// 模拟上传
|
||||
// item.status = 'uploading';
|
||||
// item.progress = 20;
|
||||
uploadFile(file).then((res) => {
|
||||
message.success('上传成功');
|
||||
console.log(res);
|
||||
});
|
||||
// const timer = setInterval(() => {
|
||||
// if (item.progress == null) {
|
||||
// item.progress = 20;
|
||||
// } else {
|
||||
// item.progress += 20;
|
||||
// }
|
||||
// if (item.progress === 100) {
|
||||
// item.status = 'done';
|
||||
// clearInterval(timer);
|
||||
// }
|
||||
// }, 1000);
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
// 处理文章内容
|
||||
form.content = content.value;
|
||||
const data = {
|
||||
...form
|
||||
};
|
||||
// 转字符串
|
||||
const saveOrUpdate = isUpdate.value ? updateProject : addProject;
|
||||
saveOrUpdate(data)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
form.projectCode = `X` + createCode();
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
assignObject(form, props.data);
|
||||
if (props.data?.content != null) {
|
||||
content.value = props.data?.content;
|
||||
}
|
||||
if (form.projectCode == '') {
|
||||
form.projectCode = `X` + createCode();
|
||||
}
|
||||
// 项目图标赋值
|
||||
avatar.value = [];
|
||||
if(props.data.projectAvatar){
|
||||
avatar.value.push({ uid:1, url: FILE_SERVER + props.data.projectAvatar, status: 'done' });
|
||||
}
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less"></style>
|
||||
@@ -0,0 +1,236 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<a-drawer
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="'项目详情'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
:footer="null"
|
||||
>
|
||||
<a-row :gutter="16" type="flex" justify="space-around">
|
||||
<a-col :span="4">
|
||||
<div class="project-card-head">
|
||||
<div class="project-avatar">
|
||||
<a-image
|
||||
v-if="project.projectAvatar"
|
||||
:src="`https://file.wsdns.cn/${project.projectAvatar}`"
|
||||
class="avatar"
|
||||
/>
|
||||
<a-avatar v-else :size="100">
|
||||
<template #icon>
|
||||
<AntDesignOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</div>
|
||||
<a-tooltip title="双击切换全屏">
|
||||
<h4 class="project-title" @dblclick="onFullscreen">
|
||||
{{ project.projectName }}
|
||||
</h4>
|
||||
</a-tooltip>
|
||||
<!-- <div class="progress">-->
|
||||
<!-- <a-progress-->
|
||||
<!-- :width="60"-->
|
||||
<!-- type="circle"-->
|
||||
<!-- :steps="5"-->
|
||||
<!-- :percent="project.progress * 2"-->
|
||||
<!-- />-->
|
||||
<!-- <small class="ele-text-placeholder">项目进度</small>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="progress">-->
|
||||
<!-- <ele-qr-code-svg :value="project.projectName" :size="120" />-->
|
||||
<!-- <small class="ele-text-placeholder">手机扫一扫</small>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="19">
|
||||
<a-form
|
||||
:label-col="{ md: { span: 4 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 19 }, sm: { span: 24 } }"
|
||||
>
|
||||
<div class="base-form" style="margin-bottom: 20px">
|
||||
<a-descriptions bordered>
|
||||
<a-descriptions-item :span="2" label="项目名称">
|
||||
{{ project.projectName }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="项目进度">
|
||||
<a-progress :percent="project.progress * 2" :steps="5" />
|
||||
<!-- <a-tag v-if="project.status === '0'" color="green">正常</a-tag>-->
|
||||
<!-- <a-tag v-if="project.status === '1'" color="red">禁用</a-tag>-->
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="项目编号">
|
||||
<div style="min-width: 90px">{{ project.projectCode }}</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="项目分类">
|
||||
{{ project.projectCategory }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="点击次数">
|
||||
{{ project.views }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :span="2" label="客户名称">
|
||||
{{ project.customerName }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :span="1" label="联系人">
|
||||
{{ project.comments }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :span="2" label="开发环境">
|
||||
<a href="#" @click="openUrl(project.urlDev)">
|
||||
{{ project.urlDev }}
|
||||
</a>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :span="1" label="账号">
|
||||
{{ project.account }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :span="2" label="生产环境">
|
||||
<a href="#" @click="openUrl(project.url)">
|
||||
{{ project.url }}
|
||||
</a>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :span="1" label="密码">
|
||||
<span>gxwebsoft.com</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :span="3" label="项目简介">
|
||||
{{ project.comments }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="项目资料">
|
||||
<div class="content" v-html="content"></div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="项目附件">
|
||||
<div class="content">附件</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-form>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject, toggleFullscreen } from 'ele-admin-pro';
|
||||
import type { Project } from '@/api/oa/project/model';
|
||||
import { htmlToText } from 'ele-admin-pro';
|
||||
import { AntDesignOutlined } from '@ant-design/icons-vue';
|
||||
import { openUrl } from '@/utils/common';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Project | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 用户信息
|
||||
const project = reactive<Project>({
|
||||
createTime: '',
|
||||
projectName: '',
|
||||
projectCode: '',
|
||||
comments: '',
|
||||
projectCategory: '',
|
||||
projectAvatar: '',
|
||||
projectType: '',
|
||||
url: '',
|
||||
urlDev: '',
|
||||
urlAdmin: '',
|
||||
account: '',
|
||||
annualFee: '',
|
||||
money: '',
|
||||
views: '',
|
||||
content: '',
|
||||
progress: '',
|
||||
customerId: undefined,
|
||||
customerName: '',
|
||||
realMoney: '',
|
||||
qrcode: '',
|
||||
sortNumber: undefined,
|
||||
status: undefined,
|
||||
projectId: 0
|
||||
});
|
||||
|
||||
// 请求状态
|
||||
const loading = ref(true);
|
||||
|
||||
const activeKey = ref('1');
|
||||
|
||||
const { resetFields } = useForm(project);
|
||||
|
||||
const content = ref('');
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 富文本处理
|
||||
const showHtml = (str) => {
|
||||
return str
|
||||
.replace(str ? /&(?!#?\w+;)/g : /&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, "'")
|
||||
.replace(/&nbsp;/g, '\u3000');
|
||||
};
|
||||
|
||||
/* 全屏切换 */
|
||||
const width = ref('75%');
|
||||
const onFullscreen = () => {
|
||||
try {
|
||||
width.value = width.value == '100%' ? '75%' : '100%';
|
||||
toggleFullscreen();
|
||||
} catch (e) {
|
||||
message.error('您的浏览器不支持全屏模式');
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
content.value = showHtml(props.data.content);
|
||||
assignObject(project, props.data);
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 100px;
|
||||
}
|
||||
.content img {
|
||||
max-width: 95%;
|
||||
}
|
||||
.project-card-head {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-project: center;
|
||||
flex-direction: column;
|
||||
padding-top: 0px;
|
||||
}
|
||||
.project-avatar .avatar {
|
||||
width: 180px;
|
||||
}
|
||||
.progress {
|
||||
margin-top: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-project: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-form
|
||||
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
|
||||
>
|
||||
<a-row>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="项目名称">
|
||||
<a-input
|
||||
v-model:value.trim="where.projectName"
|
||||
placeholder="请输入项目名称"
|
||||
allow-clear
|
||||
@pressEnter="search"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="项目编号">
|
||||
<a-input
|
||||
v-model:value.trim="where.projectCode"
|
||||
placeholder="请输入项目编号"
|
||||
allow-clear
|
||||
@pressEnter="search"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="状态">
|
||||
<status-select
|
||||
v-model:value="where.status"
|
||||
@blur="validate('status', { trigger: 'blur' }).catch(() => {})"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="search">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useSearch from '@/utils/use-search';
|
||||
import type { ProjectParam } from '@/api/oa/project/model';
|
||||
import StatusSelect from './status-select.vue';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: ProjectParam): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<ProjectParam>({
|
||||
projectName: '',
|
||||
projectCode: ''
|
||||
});
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
search();
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<a-button type="primary" class="ele-btn-icon" @click="add">
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="removeBatch"
|
||||
v-role="'admin'"
|
||||
>
|
||||
<template #icon>
|
||||
<delete-outlined />
|
||||
</template>
|
||||
<span>删除</span>
|
||||
</a-button>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入搜索关键词"
|
||||
v-model:value="searchText"
|
||||
@pressEnter="search"
|
||||
@search="search"
|
||||
>
|
||||
<template #addonBefore>
|
||||
<a-select v-model:value="type" style="width: 100px; margin: -5px -12px">
|
||||
<a-select-option value="projectName">项目名称</a-select-option>
|
||||
<a-select-option value="projectCode">项目标识</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input-search>
|
||||
<a-button type="link"> 高级搜索 </a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
PlusOutlined,
|
||||
SearchOutlined,
|
||||
DeleteOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import type { ProjectParam } from '@/api/oa/project/model';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: ProjectParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where } = useSearch<ProjectParam>({
|
||||
projectName: '',
|
||||
projectCode: ''
|
||||
});
|
||||
|
||||
// 下来选项
|
||||
const type = ref('projectName');
|
||||
// 搜索内容
|
||||
const searchText = ref('');
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
if (type.value == 'projectName') {
|
||||
where.projectName = searchText.value;
|
||||
where.projectCode = undefined;
|
||||
}
|
||||
if (type.value == 'projectCode') {
|
||||
where.projectCode = searchText.value;
|
||||
where.projectName = undefined;
|
||||
}
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
// 批量删除
|
||||
const removeBatch = () => {
|
||||
emit('remove');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择状态'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('projectStatus');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<a-page-header :ghost="false" title="项目管理">
|
||||
<div class="ele-text-secondary"> 项目管理模块，多人协同开发项目。 </div>
|
||||
</a-page-header>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<a-tabs type="card" tabPosition="top" v-model:activeKey="activeKey">
|
||||
<a-tab-pane v-for="(d, index) in data" :key="index" :tab="d.label">
|
||||
<list :type="d" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import List from './list.vue';
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(true);
|
||||
|
||||
// 当前选项卡
|
||||
const activeKey = ref(0);
|
||||
|
||||
// 获取字典数据
|
||||
const data = getDictionaryOptions('projectOwner');
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Customer'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sys-organization-list {
|
||||
padding: 12px 6px;
|
||||
height: calc(100vh - 242px);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="projectId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
:scroll="{ x: 800 }"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search @search="reload" @add="openEdit" @remove="removeBatch" />
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'projectName'">
|
||||
<a-avatar
|
||||
class="project-icon"
|
||||
:size="36"
|
||||
shape="square"
|
||||
:src="`https://file.wsdns.cn/${record.projectAvatar}`"
|
||||
>
|
||||
<template #icon>
|
||||
<AntDesignOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<a-tooltip title="查看详情">
|
||||
<a href="#" @click="openInfo(record)">{{ record.projectName }}</a>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'progress'">
|
||||
<a-progress :percent="record.progress * 2" :steps="5" />
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<div v-for="(dict, index) in projectStatus" :key="index">
|
||||
<a-tag :color="dict.comments" v-if="dict.value === record.status">{{
|
||||
dict.label
|
||||
}}</a-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="openInfo(record)">详情</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click="openEdit(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>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<project-edit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
<!-- 用户详情 -->
|
||||
<project-info v-model:visible="showInfo" :data="current" @done="reload" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, createVNode, ref } from 'vue';
|
||||
import { message, Modal, SelectProps } from 'ant-design-vue';
|
||||
import {
|
||||
ExclamationCircleOutlined,
|
||||
AntDesignOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import Search from './components/search.vue';
|
||||
import ProjectEdit from './components/project-edit.vue';
|
||||
import ProjectInfo from './components/project-info.vue';
|
||||
import { pageProject, removeProject, removeBatchProject } from '@/api/oa/project';
|
||||
import type { Project, ProjectParam } from '@/api/oa/project/model';
|
||||
import { listDictionaryData } from '@/api/system/dictionary-data';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import {getDictionaryOptions} from "@/utils/common";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const props = defineProps<{
|
||||
// 机构 id
|
||||
type?: any;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 是否显示资产详情
|
||||
const showInfo = ref(false);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '项目名称',
|
||||
dataIndex: 'projectName',
|
||||
key: 'projectName',
|
||||
width: 280,
|
||||
ellipsis: true,
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '项目简介',
|
||||
dataIndex: 'comments'
|
||||
},
|
||||
{
|
||||
title: '开发进度',
|
||||
dataIndex: 'progress',
|
||||
key: 'progress',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '项目地址',
|
||||
dataIndex: 'url'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortNumber',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<Project[]>([]);
|
||||
|
||||
// 当前编辑数据
|
||||
const current = ref<Project | null>(null);
|
||||
|
||||
// 当前用户信息
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
/* 获取字典数据 */
|
||||
const projectStatus = getDictionaryOptions('projectStatus');
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
// 搜索条件
|
||||
if (props.type.key === 'my') {
|
||||
where.userId = loginUser.value.userId;
|
||||
} else if (props.type.key === 'assist') {
|
||||
where.userId = loginUser.value.userId;
|
||||
} else if (props.type.key === 'all') {
|
||||
// 全部客户
|
||||
}
|
||||
return pageProject({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: ProjectParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: Project) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开用户详情弹窗 */
|
||||
const openInfo = (row?: Project) => {
|
||||
current.value = row ?? null;
|
||||
showInfo.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Project) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeProject(row.projectId)
|
||||
.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 = message.loading('请求中..', 0);
|
||||
removeBatchProject(selection.value.map((d) => d.projectId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Project'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.project-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.sys-org-table :deep(.ant-table-body) {
|
||||
overflow: auto !important;
|
||||
overflow: overlay !important;
|
||||
}
|
||||
|
||||
.sys-org-table :deep(.ant-table-pagination.ant-pagination) {
|
||||
padding: 0 4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,145 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<a-button type="primary" class="ele-btn-icon" @click="add">
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
<span>添加工单</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
:disabled="selection.length === 0"
|
||||
@click="removeBatch"
|
||||
>
|
||||
<template #icon>
|
||||
<delete-outlined />
|
||||
</template>
|
||||
<span>批量删除</span>
|
||||
</a-button>
|
||||
<a-radio-group v-model:value="where.status" @change="handleSearch">
|
||||
<a-radio-button :value="0">{{ `待处理(${count1})` }}</a-radio-button>
|
||||
<a-radio-button :value="1">{{ `已完成(${count2})` }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
<SelectCompany
|
||||
v-model:value="where.promoterName"
|
||||
placeholder="选择客户"
|
||||
@done="onPromoter"
|
||||
/>
|
||||
<SelectStaff
|
||||
v-model:value="where.commanderName"
|
||||
placeholder="选择用户"
|
||||
@done="onCommander"
|
||||
/>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入关键词"
|
||||
v-model:value="where.keywords"
|
||||
@pressEnter="search"
|
||||
@search="search"
|
||||
/>
|
||||
<a-button @click="reload">重置</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { ref, watch } from 'vue';
|
||||
import { TaskParam } from '@/api/oa/task/model';
|
||||
import {
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
SearchOutlined,
|
||||
DeleteOutlined,
|
||||
UpSquareOutlined,
|
||||
DownSquareOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { Company } from '@/api/system/company/model';
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { getCount } from '@/api/oa/task';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
count1?: number;
|
||||
count2?: number;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: TaskParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
}>();
|
||||
|
||||
const count1 = ref(0);
|
||||
const count2 = ref(0);
|
||||
// 表单数据
|
||||
const { where } = useSearch<TaskParam>({
|
||||
taskId: undefined,
|
||||
name: undefined,
|
||||
userId: undefined,
|
||||
status: undefined,
|
||||
nickname: undefined,
|
||||
keywords: undefined,
|
||||
promoterName: undefined
|
||||
});
|
||||
|
||||
// 搜索内容
|
||||
// const searchText = ref('');
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
const onPromoter = (data: Company) => {
|
||||
where.promoterName = data.companyName;
|
||||
where.promoter = data.userId;
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
const onCommander = (data: User) => {
|
||||
where.commanderName = data.nickname;
|
||||
where.commander = data.userId;
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
// 批量删除
|
||||
const removeBatch = () => {
|
||||
emit('remove');
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
// 刷新当前路由
|
||||
emit('search', {});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
getCount().then((result) => {
|
||||
count1.value = result[0].count;
|
||||
count2.value = result[1].count;
|
||||
});
|
||||
};
|
||||
|
||||
query();
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,508 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="980px"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:maxable="maxAble"
|
||||
:title="isUpdate ? '编辑工单' : '添加工单'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
:maskClosable="false"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-item label="工单名称" v-bind="validateInfos.name">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入工单名称"
|
||||
v-model:value="form.name"
|
||||
@blur="validate('name', { trigger: 'blur' }).catch(() => {})"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="工单内容" v-bind="validateInfos.content">
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-editor
|
||||
v-model:value="content"
|
||||
placeholder="请输入您的工单内容，图片请直接粘贴"
|
||||
:locale="zh_Hans"
|
||||
:plugins="plugins"
|
||||
height="300px"
|
||||
:editorConfig="{ lineNumbers: true }"
|
||||
@paste="onPaste"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="工单类型" v-bind="validateInfos.taskType">
|
||||
<a-select
|
||||
optionFilterProp="label"
|
||||
placeholder="请选择工单类型"
|
||||
:options="taskType"
|
||||
allow-clear
|
||||
v-model:value="form.taskType"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="发起人" v-bind="validateInfos.promoter">
|
||||
<SelectCompany v-model:value="form.promoterName" @done="onPromoter" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="关联应用(选填)" v-bind="validateInfos.appId">
|
||||
<SelectApp v-model:value="appId" @done="onApp" />
|
||||
</a-form-item>
|
||||
<a-form-item label="指派给" v-bind="validateInfos.commander">
|
||||
<SelectStaff v-model:value="form.commanderName" @done="onCommander" />
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="品质要求" v-bind="validateInfos.quality">-->
|
||||
<!-- <a-select-->
|
||||
<!-- optionFilterProp="label"-->
|
||||
<!-- placeholder="请选择品质要求"-->
|
||||
<!-- :options="quality"-->
|
||||
<!-- allow-clear-->
|
||||
<!-- v-model:value="form.quality"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="上传附件" v-bind="validateInfos.files">
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
class="upload-list-inline"
|
||||
list-type="picture"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<a-button>
|
||||
<UploadOutlined />
|
||||
上传附件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<!-- <ele-image-upload-->
|
||||
<!-- v-model:value="files"-->
|
||||
<!-- :limit="9"-->
|
||||
<!-- :drag="true"-->
|
||||
<!-- :multiple="true"-->
|
||||
<!-- :upload-handler="uploadHandler"-->
|
||||
<!-- @upload="onUpload"-->
|
||||
<!-- />-->
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<!-- <a-form-item label="优先级" v-bind="validateInfos.priority">-->
|
||||
<!-- <a-select-->
|
||||
<!-- optionFilterProp="label"-->
|
||||
<!-- placeholder="请选择优先级"-->
|
||||
<!-- :options="priority"-->
|
||||
<!-- allow-clear-->
|
||||
<!-- v-model:value="form.priority"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {ref, reactive, watch, computed} from 'vue';
|
||||
import {Form, message, Modal, SelectProps} from 'ant-design-vue';
|
||||
import {useUserStore} from '@/store/modules/user';
|
||||
import {assignObject, htmlToText} from 'ele-admin-pro';
|
||||
import type {Task} from '@/api/oa/task/model';
|
||||
import {addTask, updateTask} from '@/api/oa/task';
|
||||
import {FILE_SERVER} from "@/config/setting";
|
||||
import {uploadFile} from "@/api/system/file";
|
||||
import {RuleObject} from "ant-design-vue/es/form";
|
||||
import { getDictionaryOptions, isImage, selectProject } from "@/utils/common";
|
||||
import SelectStaff from '@/components/SelectStaff/index.vue';
|
||||
import SelectCompany from '@/components/SelectCompany/index.vue';
|
||||
import SelectApp from '@/components/SelectApp/index.vue';
|
||||
import 'bytemd/dist/index.min.css';
|
||||
import highlight from '@bytemd/plugin-highlight-ssr'
|
||||
import 'highlight.js/styles/default.css'
|
||||
import ByteMdEditor from '@/components/ByteMdEditor/index.vue';
|
||||
// import highlight from '@bytemd/plugin-highlight';
|
||||
// 中文语言文件
|
||||
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 { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
import { User } from "@/api/system/user/model";
|
||||
import { Company } from "@/api/system/company/model";
|
||||
|
||||
const useForm = Form.useForm;
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Task | null;
|
||||
}>();
|
||||
|
||||
const userStore = useUserStore();
|
||||
// 当前登录用户信息
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const disabled = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxAble = ref(true);
|
||||
// 选项卡位置
|
||||
const activeKey = ref('1');
|
||||
const promoter = ref<any>(undefined);
|
||||
const commander = ref(undefined);
|
||||
const appid = ref(undefined);
|
||||
// 字典数据
|
||||
const taskType = getDictionaryOptions('taskType');
|
||||
const progress = getDictionaryOptions('taskProgress');
|
||||
const priority = getDictionaryOptions('taskPriority');
|
||||
const quality = getDictionaryOptions('taskQuality');
|
||||
/* 打开选择弹窗 */
|
||||
const showUser = ref(false);
|
||||
const showProject = ref(false);
|
||||
const content = ref('');
|
||||
const files = ref<ItemType[]>([]);
|
||||
const fileList = ref<ItemType[]>([]);
|
||||
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
// 已上传数据, 可赋初始值用于回显
|
||||
const avatar = ref(<any>[]);
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 用户信息
|
||||
const form = reactive<Task>({
|
||||
// 工单名称
|
||||
name: '',
|
||||
appId: undefined,
|
||||
// 工单类型
|
||||
taskType: '普通工单',
|
||||
// 项目ID
|
||||
projectId: '',
|
||||
// 客户ID
|
||||
customerId: '',
|
||||
// 资产ID
|
||||
assetsId: '',
|
||||
// 开始时间
|
||||
startTime: '',
|
||||
// 结束时间
|
||||
endTime: '',
|
||||
// 工单内容
|
||||
content: '',
|
||||
// 工单发起人ID
|
||||
promoter: undefined,
|
||||
promoterName: '',
|
||||
// 负责人
|
||||
commander: undefined,
|
||||
commanderName: '',
|
||||
// 工单状态
|
||||
progress: 0,
|
||||
// 优先级
|
||||
priority: '中',
|
||||
// 品质要求
|
||||
quality: 'B级',
|
||||
// 期限(天)
|
||||
day: '',
|
||||
files: '',
|
||||
// 排序
|
||||
sortNumber: 100,
|
||||
// 备注
|
||||
comments: '',
|
||||
// 创建时间
|
||||
createTime: '',
|
||||
// 状态
|
||||
status: 0,
|
||||
// 发布者
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入工单名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
taskType: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请选择工单类型',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
// promoter: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'number',
|
||||
// message: '请选择发起人',
|
||||
// trigger: 'blur',
|
||||
// validator: async (_rule: RuleObject, value: number) => {
|
||||
// if (promoter.value == undefined) {
|
||||
// return Promise.reject('请选择发起人');
|
||||
// }
|
||||
// return Promise.resolve();
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// commander: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'number',
|
||||
// message: '请选择受理人',
|
||||
// trigger: 'blur',
|
||||
// validator: async (_rule: RuleObject, value: number) => {
|
||||
// if (commander.value == undefined) {
|
||||
// return Promise.reject('请选择受理人');
|
||||
// }
|
||||
// return Promise.resolve();
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
content: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入工单内容',
|
||||
trigger: 'blur',
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (content.value == '') {
|
||||
return Promise.reject('请输入文字内容');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const onPromoter = (data: Company) => {
|
||||
form.promoterName = data.companyName
|
||||
form.promoter = data.userId
|
||||
}
|
||||
|
||||
const onCommander = (data: User) => {
|
||||
form.commanderName = data.nickname
|
||||
form.commander = data.userId
|
||||
}
|
||||
|
||||
const onApp = (appId) => {
|
||||
appid.value = appId
|
||||
}
|
||||
|
||||
/* 图片上传事件 */
|
||||
const uploadHandler = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
};
|
||||
if (!file.type.startsWith("image")) {
|
||||
message.error("只能选择图片");
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
message.error("大小不能超过 2MB");
|
||||
return;
|
||||
}
|
||||
onUpload(item);
|
||||
};
|
||||
|
||||
// 文件上传事件
|
||||
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) => {
|
||||
console.log(d);
|
||||
uploadFile(<File>d.file)
|
||||
.then((result) => {
|
||||
files.value.push({
|
||||
uid: result.id,
|
||||
url: FILE_SERVER + result.path,
|
||||
name: isImage(result.path) ? 'image' : result.name,
|
||||
status: "done"
|
||||
});
|
||||
message.success("上传成功");
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const {resetFields, validate, validateInfos} = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const data = {
|
||||
...form,
|
||||
// 处理工单内容
|
||||
content: content.value,
|
||||
appId: appid.value,
|
||||
promoter: promoter.value,
|
||||
commander: commander.value,
|
||||
files: JSON.stringify(files.value)
|
||||
};
|
||||
// 转字符串
|
||||
const saveOrUpdate = isUpdate.value ? updateTask : addTask;
|
||||
saveOrUpdate(data)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
content.value = '';
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
});
|
||||
};
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
/* 粘贴图片上传服务器并插入编辑器 */
|
||||
const onPaste = (e) => {
|
||||
console.log(e);
|
||||
const items = (e.clipboardData || e.originalEvent.clipboardData).items;
|
||||
console.log(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
|
||||
};
|
||||
uploadFile(<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();
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
assignObject(form, props.data);
|
||||
// 头像赋值
|
||||
avatar.value = [];
|
||||
if (props.data.images) {
|
||||
avatar.value.push({uid: 1, url: FILE_SERVER + props.data.images, status: ''});
|
||||
}
|
||||
if (props.data.content) {
|
||||
content.value = props.data.content;
|
||||
}
|
||||
|
||||
form.sortNumber = Number(props.data.sortNumber);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
content.value = '';
|
||||
avatar.value = [];
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
</script>
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.form-item-help {
|
||||
font-size: 12px;
|
||||
// line-height: 2;
|
||||
line-height: 1.5;
|
||||
padding-top: 4px;
|
||||
min-height: 22px;
|
||||
// margin-top: -2px;
|
||||
transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
|
||||
a {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.extra,
|
||||
small {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 12.5px !important;
|
||||
}
|
||||
|
||||
.extra {
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.select-shop {
|
||||
min-width: 120px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.upload-list-inline :deep(.ant-upload-list-item) {
|
||||
float: left;
|
||||
width: 200px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.upload-list-inline [class*='-upload-list-rtl'] :deep(.ant-upload-list-item) {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
@change="onChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
(e: 'change'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择客户跟进状态'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('customerFollowStatus');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
|
||||
/* 选择事件 */
|
||||
const onChange = (e) => {
|
||||
emit('change', e);
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!-- 客户来源选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
@change="onChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
(e: 'change'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择客户来源'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('customerSource');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
|
||||
/* 选择事件 */
|
||||
const onChange = (e) => {
|
||||
emit('change', e);
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择状态'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('status');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择客户类型'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('customerType');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@search="onSearch"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { listUsers } from '@/api/system/user';
|
||||
import type { SelectProps } from 'ant-design-vue';
|
||||
import { UserParam } from '@/api/system/user/model';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择客户类型'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = ref<SelectProps['options']>([]);
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
// 默认搜索条件
|
||||
const where = ref<UserParam>({});
|
||||
|
||||
const search = () => {
|
||||
/* 获取用户列 */
|
||||
listUsers({ ...where?.value })
|
||||
.then((result) => {
|
||||
data.value = result?.map((d) => {
|
||||
return {
|
||||
value: d.userId,
|
||||
label: d.nickname
|
||||
};
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const onSearch = (e) => {
|
||||
where.value.nickname = e;
|
||||
search();
|
||||
};
|
||||
|
||||
search();
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,774 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<a-drawer
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
v-if="detail && data"
|
||||
:title="`工单详情(${detail.taskId})：${data.name}`"
|
||||
:maxable="true"
|
||||
:body-style="{ paddingBottom: '8px', backgroundColor: '#f3f3f3' }"
|
||||
@update:visible="updateVisible"
|
||||
@close="onClose"
|
||||
:footer="null"
|
||||
>
|
||||
<template #extra>
|
||||
<compress-outlined v-if="width === '100%'" @click="handleMax" />
|
||||
<expand-outlined v-else @click="handleMax" />
|
||||
</template>
|
||||
<a-card class="task-card" :bordered="false">
|
||||
<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-spin :spinning="loading" v-if="appId > 0">
|
||||
<a-collapse class="task-card" v-model:activeKey="activeKey" :bordered="false">
|
||||
<a-collapse-panel key="1" header="应用详情">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{ padding: '16px' }"
|
||||
>
|
||||
<div class="content">
|
||||
<div class="app-item-list">
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-desc">AppID(应用ID)</div>
|
||||
<div class="ele-cell-title">{{ appInfo.appId }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider />
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-desc">小程序名称</div>
|
||||
<div class="ele-cell-title">
|
||||
{{ appInfo.appName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider />
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-desc">小程序描述</div>
|
||||
<div class="ele-cell-title">{{ appInfo.comments }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider />
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-desc">小程序码</div>
|
||||
<div class="ele-cell-title">
|
||||
<a-image
|
||||
:height="120"
|
||||
:width="120"
|
||||
:preview="false"
|
||||
:src="appInfo.appQrcode"
|
||||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider />
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-desc">应用图标</div>
|
||||
<div class="ele-cell-title">
|
||||
<a-image
|
||||
:height="70"
|
||||
:width="70"
|
||||
:preview="false"
|
||||
:src="appInfo.appIcon"
|
||||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-desc">状态</div>
|
||||
<div class="ele-cell-title">{{
|
||||
appInfo.status === 1 ? '开发中' : '已上线'
|
||||
}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="2" header="开发资料">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{ padding: '16px' }"
|
||||
>
|
||||
<byte-md-viewer :value="appInfo.requirement" :plugins="plugins" />
|
||||
</a-card>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</a-spin>
|
||||
<a-spin :spinning="loading" v-if="detail">
|
||||
<!-- 回复列表 -->
|
||||
<a-card class="task-card replay-bg"
|
||||
:bordered="false"
|
||||
v-for="(item, index) in record"
|
||||
:key="index">
|
||||
<a-page-header
|
||||
:title="item.nickname"
|
||||
:sub-title="`${item.createTime}`"
|
||||
:avatar="{ src: item.avatar ? item.avatar : 'https://file.gxwebsoft.com/20230217/c8a5c699b3174866a36dd6d378a09bb9.jpg' }"
|
||||
>
|
||||
<template #extra>
|
||||
<a-button key="2" href="#bottom" @click="onReply(item)">回复</a-button>
|
||||
<template v-for="(role,index) in loginUser.roles" :key="index">
|
||||
<a-button key="1" v-if="role.roleCode === 'admin'" @click="remove(item)">删除</a-button>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
<div class="content">
|
||||
<template v-if="item.content">
|
||||
<byte-md-viewer :value="item.content" :plugins="plugins" />
|
||||
</template>
|
||||
<!-- 附件列表 -->
|
||||
<a-space 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 :height="120" :width="120" :src="file.url" />
|
||||
</template>
|
||||
</a-space>
|
||||
<!-- 二级回复 -->
|
||||
<template v-if="item.children">
|
||||
<a-card class="task-card replay-bg"
|
||||
v-for="(item, index) in item.children"
|
||||
:key="index">
|
||||
<a-page-header
|
||||
:title="item.nickname"
|
||||
:sub-title="`${item.createTime}`"
|
||||
:avatar="{ src: item.avatar ? item.avatar : 'https://file.gxwebsoft.com/20230217/c8a5c699b3174866a36dd6d378a09bb9.jpg' }"
|
||||
>
|
||||
<template #extra>
|
||||
<template v-for="(role,index) in loginUser.roles" :key="index">
|
||||
<a-button key="1" v-if="role.roleCode === 'admin'" @click="remove(item)">删除</a-button>
|
||||
</template>
|
||||
</template>
|
||||
<div class="content">
|
||||
<template v-if="item.content">
|
||||
<byte-md-viewer :value="item.content" :plugins="plugins" />
|
||||
</template>
|
||||
<template v-if="item.children">
|
||||
{{ item.children }}
|
||||
</template>
|
||||
</div>
|
||||
<!-- 附件列表 -->
|
||||
<a-space 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 :height="120" :width="120" :src="file.url" />
|
||||
</template>
|
||||
</a-space>
|
||||
</a-page-header>
|
||||
</a-card>
|
||||
</template>
|
||||
</div>
|
||||
</a-page-header>
|
||||
</a-card>
|
||||
<!-- 操作按钮 -->
|
||||
<div class="task-btn" v-if="detail.status === 0">
|
||||
<a-space>
|
||||
<a-button type="primary" ghost size="large" @click="complete">
|
||||
已解决
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
danger
|
||||
ghost
|
||||
size="large"
|
||||
href="#bottom"
|
||||
@click="showEdit"
|
||||
>
|
||||
我要回复
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
danger
|
||||
ghost
|
||||
size="large"
|
||||
href="#bottom"
|
||||
@click="showUsers"
|
||||
>
|
||||
移交工程师
|
||||
</a-button>
|
||||
<a-button type="primary" ghost size="large" @click="completedTask">
|
||||
已完结
|
||||
</a-button>
|
||||
<a-button type="primary" ghost size="large" @click="closeTask">
|
||||
关单
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="task-btn" v-if="detail.status === 1">
|
||||
<a-button type="primary" ghost size="large" @click="openTask">
|
||||
开启工单
|
||||
</a-button>
|
||||
</div>
|
||||
</a-spin>
|
||||
<!-- 回复表单 -->
|
||||
<div id="bottom">
|
||||
<a-card :title="replyName ? `回复${replyName}` : `处理结果`" :bordered="false" v-if="openEdit">
|
||||
<a-space direction="vertical" style="width: 100%;">
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-editor
|
||||
v-model:value="content"
|
||||
placeholder="请输入您的回复内容，图片请直接粘贴"
|
||||
:locale="zh_Hans"
|
||||
:plugins="plugins"
|
||||
height="300px"
|
||||
:editorConfig="{ lineNumbers: true }"
|
||||
contenteditable="true"
|
||||
@paste="onPaste"
|
||||
/>
|
||||
<!-- <ele-image-upload-->
|
||||
<!-- v-model:value="files"-->
|
||||
<!-- :limit="9"-->
|
||||
<!-- :drag="true"-->
|
||||
<!-- :multiple="true"-->
|
||||
<!-- :upload-handler="uploadHandler"-->
|
||||
<!-- @upload="onUpload"-->
|
||||
<!-- />-->
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
class="upload-list-inline"
|
||||
list-type="picture"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<a-button>
|
||||
<UploadOutlined />
|
||||
上传附件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<a-button type="primary" style="margin-top: 20px" @click="save">提交</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</div>
|
||||
<!-- 成员管理 -->
|
||||
<div id="users">
|
||||
<a-card title="移交给" :bordered="false" v-if="openUsers">
|
||||
<a-space style="margin-bottom: 15px">
|
||||
<SelectStaff v-model:value="commander" @done="onSelect" />
|
||||
<a-button
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="onUpdateTask"
|
||||
>
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
<span>确定</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import "bytemd/dist/index.min.css";
|
||||
import { createVNode, reactive, ref, watch, nextTick, computed } from "vue";
|
||||
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 { Form, message, Modal, UploadProps } from "ant-design-vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useThemeStore } from "@/store/modules/theme";
|
||||
import { uploadFile } from "@/api/system/file";
|
||||
import type { Task } from "@/api/oa/task/model";
|
||||
import { updateTask, getTask } from "@/api/oa/task";
|
||||
import { RuleObject } from "ant-design-vue/es/form";
|
||||
import { FILE_SERVER } from "@/config/setting";
|
||||
import { getDictionaryOptions, isImage, openUrl } from "@/utils/common";
|
||||
import { TaskRecord } from "@/api/oa/task-record/model";
|
||||
import { App } from "@/api/app/model"
|
||||
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
|
||||
import { addTaskRecord, listTaskRecord, removeTaskRecord } from "@/api/oa/task-record";
|
||||
import SelectStaff from '@/components/SelectStaff/index.vue';
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
// 当前用户信息
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { Notice } from "@/api/oa/notice/model";
|
||||
import { messageLoading, toTreeData } from "ele-admin-pro";
|
||||
import { removeNotice } from "@/api/oa/notice";
|
||||
import { Menu } from "@/api/system/menu/model";
|
||||
import { getApp, getAppSecret } from "@/api/app";
|
||||
import {
|
||||
PlusOutlined,
|
||||
EyeOutlined,
|
||||
EyeInvisibleOutlined,
|
||||
UserOutlined,
|
||||
CompressOutlined,
|
||||
ExpandOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Task | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "done"): void;
|
||||
(e: "update:visible", visible: boolean): void;
|
||||
}>();
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit("update:visible", value);
|
||||
};
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
// 表单数据
|
||||
const form = reactive<TaskRecord>({
|
||||
taskRecordId: undefined,
|
||||
taskId: 0,
|
||||
content: '',
|
||||
files: "",
|
||||
userId: 0
|
||||
});
|
||||
const useForm = Form.useForm;
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
content: [
|
||||
{
|
||||
required: true,
|
||||
type: "string",
|
||||
message: "请输入工单内容",
|
||||
trigger: "blur",
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (content.value == "") {
|
||||
return Promise.reject("请输入文字内容");
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
const userStore = useUserStore();
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
// 请求状态
|
||||
const loading = ref(true);
|
||||
const width = ref('75%');
|
||||
const detail = ref<Task | null>(null);
|
||||
const appId = ref<number>(0);
|
||||
const appInfo = ref<App | null>({});
|
||||
const taskId = ref(0);
|
||||
const parentId = ref<any>(0);
|
||||
const replyName = ref<string>();
|
||||
const activeKey = ref([]);
|
||||
const showAppSecret = ref(false);
|
||||
const taskProgressDict = getDictionaryOptions("taskProgress");
|
||||
const record = ref<TaskRecord[] | undefined>([]);
|
||||
const content = ref('');
|
||||
const files = ref<ItemType[]>([]);
|
||||
const fileList = ref<ItemType[]>([]);
|
||||
const openEdit = ref(false);
|
||||
const openUsers = ref(false);
|
||||
const showAddUserForm = ref(false);
|
||||
const developerId = ref();
|
||||
const commander = ref<any>();
|
||||
// 选中步骤
|
||||
const active = ref(0);
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(form, rules);
|
||||
|
||||
/* 图片上传事件 */
|
||||
const uploadHandler = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
};
|
||||
if (!file.type.startsWith("image")) {
|
||||
message.error("只能选择图片");
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
message.error("大小不能超过 2MB");
|
||||
return;
|
||||
}
|
||||
onUpload(item);
|
||||
};
|
||||
|
||||
// 文件上传事件
|
||||
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) => {
|
||||
uploadFile(<File>d.file)
|
||||
.then((result) => {
|
||||
files.value.push({
|
||||
uid: result.id,
|
||||
url: FILE_SERVER + result.path,
|
||||
name: isImage(result.path) ? 'image' : result.name,
|
||||
status: "done"
|
||||
});
|
||||
console.log(files.value);
|
||||
message.success("上传成功");
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const complete = () => {
|
||||
Modal.confirm({
|
||||
title: "提示",
|
||||
content: "确定问题已解决？",
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
updateTask({ taskId: taskId.value, progress: 3 }).then((res) => {
|
||||
message.success(res);
|
||||
updateVisible(false);
|
||||
emit("done");
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const closeTask = () => {
|
||||
Modal.confirm({
|
||||
title: "提示",
|
||||
content: "确定关闭工单吗？",
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
updateTask({ taskId: taskId.value, status: 1, progress: 5 }).then((res) => {
|
||||
message.success(res);
|
||||
updateVisible(false);
|
||||
emit("done");
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const completedTask = () => {
|
||||
Modal.confirm({
|
||||
title: "提示",
|
||||
content: "确定工单已完接了吗？",
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
updateTask({ taskId: taskId.value, status: 1, progress: 4 }).then((res) => {
|
||||
message.success(res);
|
||||
updateVisible(false);
|
||||
emit("done");
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const openTask = () => {
|
||||
Modal.confirm({
|
||||
title: "提示",
|
||||
content: "重新开启后可以继续追加内容，需要重新开启工单吗？",
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
updateTask({ taskId: taskId.value, status: 0, progress: 2 }).then((res) => {
|
||||
message.success(res);
|
||||
updateVisible(false);
|
||||
emit("done");
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const showEdit = () => {
|
||||
replyName.value = '';
|
||||
parentId.value = 0;
|
||||
openEdit.value = true;
|
||||
openUsers.value = false;
|
||||
};
|
||||
const showUsers = () => {
|
||||
openUsers.value = true;
|
||||
openEdit.value = false;
|
||||
}
|
||||
|
||||
const onReply = (row: TaskRecord) => {
|
||||
parentId.value = row.taskRecordId;
|
||||
replyName.value = row.nickname;
|
||||
openEdit.value = true;
|
||||
}
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: TaskRecord) => {
|
||||
removeTaskRecord(row.taskRecordId)
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
// 加载工单明细
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 指派工单
|
||||
const onUpdateTask = () => {
|
||||
updateTask({
|
||||
commander: commander.value,
|
||||
taskId: taskId.value,
|
||||
progress: 1
|
||||
}).then(() => {
|
||||
message.success("操作成功");
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
}).catch(err => {
|
||||
message.error(err.message)
|
||||
})
|
||||
};
|
||||
|
||||
// 选择用户
|
||||
const onSelect = (userId) => {
|
||||
commander.value = userId;
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if(content.value == ''){
|
||||
message.error('请填写回复内容！');
|
||||
return false;
|
||||
}
|
||||
validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const data = {
|
||||
...form,
|
||||
taskId: taskId.value,
|
||||
parentId: parentId.value,
|
||||
// 处理工单内容
|
||||
content: content.value,
|
||||
files: JSON.stringify(files.value)
|
||||
};
|
||||
// 转字符串
|
||||
addTaskRecord(data)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
files.value = [];
|
||||
content.value = '';
|
||||
fileList.value = [];
|
||||
// 加载工单明细
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
});
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
emit("done");
|
||||
}
|
||||
|
||||
/* 粘贴图片上传服务器并插入编辑器 */
|
||||
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
|
||||
};
|
||||
uploadFile(<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 reload = () => {
|
||||
// 加载工单明细
|
||||
listTaskRecord({ taskId: taskId.value }).then((data) => {
|
||||
record.value = toTreeData({
|
||||
data: data.map((d) => {
|
||||
return { ...d, key: d.taskRecordId, value: d.taskRecordId };
|
||||
}),
|
||||
idField: 'taskRecordId',
|
||||
parentIdField: 'parentId'
|
||||
});
|
||||
loading.value = false;
|
||||
});
|
||||
// 加载应用信息
|
||||
if (appId.value) {
|
||||
getApp(appId.value).then(result => {
|
||||
appInfo.value = result;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 查看秘钥
|
||||
const onAppSecret = (appId) => {
|
||||
getAppSecret({ appId }).then((res) => {
|
||||
showAppSecret.value = !showAppSecret.value;
|
||||
});
|
||||
};
|
||||
|
||||
const handleMax = () => {
|
||||
if(width.value === '100%'){
|
||||
width.value = '75%'
|
||||
}else{
|
||||
width.value = '100%'
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
detail.value = props.data;
|
||||
appId.value = Number(props.data.appId);
|
||||
active.value = Number(props.data.progress);
|
||||
taskId.value = Number(props.data.taskId);
|
||||
commander.value = props.data.commanderName;
|
||||
reload();
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "TaskDetailContent"
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.content {
|
||||
background-color: #ffffff;
|
||||
padding: 10px 0;
|
||||
min-height: 40px;
|
||||
max-width: 80%;
|
||||
overflow: hidden;
|
||||
.edit-md {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
.task-card {
|
||||
background-color: var(--body-background);
|
||||
margin-bottom: 20px;
|
||||
//margin: 20px auto;
|
||||
|
||||
.comment {
|
||||
}
|
||||
}
|
||||
|
||||
.task-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 20px;
|
||||
}
|
||||
.ant-page-header{
|
||||
padding: 0 !important;
|
||||
}
|
||||
.replay-bg{
|
||||
//box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.upload-list-inline :deep(.ant-upload-list-item) {
|
||||
float: left;
|
||||
width: 200px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.upload-list-inline [class*='-upload-list-rtl'] :deep(.ant-upload-list-item) {
|
||||
float: right;
|
||||
}
|
||||
/* 应用详情字段列表 */
|
||||
.app-item-list {
|
||||
& > .ele-cell {
|
||||
padding: 16px 8px;
|
||||
.ele-cell-content {
|
||||
.ele-cell-desc {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.ele-cell-title {
|
||||
max-width: 900px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-item-icon {
|
||||
color: #fff;
|
||||
padding: 8px;
|
||||
font-size: 26px;
|
||||
border-radius: 50%;
|
||||
|
||||
&.anticon-qq {
|
||||
background: #3492ed;
|
||||
}
|
||||
|
||||
&.anticon-wechat {
|
||||
background: #4daf29;
|
||||
}
|
||||
|
||||
&.anticon-alipay {
|
||||
background: #1476fe;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,85 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="500px"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="`添加成员`"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
:label-col="{ sm: 5, xs: 24 }"
|
||||
:wrapper-col="{ sm: 19, xs: 24 }"
|
||||
layout="horizontal"
|
||||
>
|
||||
<a-form-item>
|
||||
<a-input
|
||||
placeholder="请输入开发者账号"
|
||||
v-model:value="content"
|
||||
@pressEnter="save"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { addTaskUser } from '@/api/oa/task-user';
|
||||
import { reloadPageTab } from '@/utils/page-tab-util';
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
taskId?: number | 10;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
const content = ref('');
|
||||
const role = ref(20);
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
console.log('sdfsdfdsfds');
|
||||
loading.value = true;
|
||||
addTaskUser({
|
||||
username: content.value,
|
||||
role: role.value,
|
||||
taskId: props.taskId
|
||||
})
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 300px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,446 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="taskId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
:customRow="customRow"
|
||||
:scroll="{ x: 1200 }"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
:count1="count1"
|
||||
:count2="count2"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'name'">
|
||||
<a-tooltip title="查看详情">
|
||||
<span href="#">{{ record.name }}</span>
|
||||
</a-tooltip>
|
||||
<!-- <div class="ele-text-placeholder">{{ record.comments }}</div>-->
|
||||
</template>
|
||||
<template v-if="column.key === 'progress'">
|
||||
<template v-for="(item, index) in taskProgress" :key="index">
|
||||
<a-badge
|
||||
v-if="
|
||||
loginUser && Number(item.value) === Number(record.progress)
|
||||
"
|
||||
:dot="
|
||||
record.isRead === 0 &&
|
||||
loginUser.userId !== record.lastReadUser
|
||||
"
|
||||
>
|
||||
<a-tag v-if="record.status === 0" color="orange">
|
||||
{{ item.label }}
|
||||
</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="green">
|
||||
{{ item.label }}
|
||||
</a-tag>
|
||||
</a-badge>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="column.key === 'taskType'">
|
||||
<div v-for="(d, i) in JSON.parse(taskType)" :key="i">
|
||||
<span v-if="d.value === record.taskType">{{ d.value }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.progress === 0" color="red">待处理</a-tag>
|
||||
<a-tag v-if="record.progress === 1" color="green">已完成</a-tag>
|
||||
<a-tag v-if="record.progress === 2" color="purple">已回复</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'promoter'">
|
||||
<div class="user-box">
|
||||
<a-tooltip :title="`ID:${record.promoter}`">
|
||||
<a-avatar
|
||||
:size="30"
|
||||
:src="`${record.promoterAvatar}`"
|
||||
style="margin-right: 4px"
|
||||
>
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-tooltip>
|
||||
<div class="user-info" @click="onPromoter(record)">
|
||||
<span>{{ record.promoterAlias }}</span>
|
||||
<span class="ele-text-placeholder">
|
||||
{{ record.promoterName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'commander'">
|
||||
<div class="user-box" v-if="record.commander">
|
||||
<a-tooltip :title="`ID:${record.commander}`">
|
||||
<a-avatar
|
||||
:size="30"
|
||||
:src="`${record.commanderAvatar}`"
|
||||
style="margin-right: 4px"
|
||||
>
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-tooltip>
|
||||
<div class="user-info" @click="onCommander(record)">
|
||||
<span>{{ record.commanderAlias }}</span>
|
||||
<span class="ele-text-placeholder">
|
||||
{{ record.commanderName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<a-tag v-if="record.commander === 0" color="red">工单退回</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'createTime'">
|
||||
<a-tooltip :title="`${toDateString(record.createTime)}`">
|
||||
<span class="ele-text-placeholder">
|
||||
{{ timeAgo(record.createTime) }}
|
||||
</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'updateTime'">
|
||||
<div class="user-box">
|
||||
<a-tooltip :title="`ID:${record.lastReadUser}`">
|
||||
<a-avatar
|
||||
:size="30"
|
||||
v-if="record.lastReadUser > 0"
|
||||
:src="`${record.lastAvatar}`"
|
||||
style="margin-right: 4px"
|
||||
>
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-tooltip>
|
||||
<div class="user-info">
|
||||
<span class="ele-text-placeholder">
|
||||
{{ record.lastNickname }}
|
||||
</span>
|
||||
<span class="ele-text-placeholder">
|
||||
{{ timeAgo(record.updateTime) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'users'">
|
||||
<a-space>
|
||||
<ele-avatar-list :data="record.users" :size="22" />
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button @click="openInfo(record)">处理</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
<TaskEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
<!-- 用户详情 -->
|
||||
<TaskInfo v-model:visible="showInfo" :data="current" @done="reload" />
|
||||
<!-- 成员管理 -->
|
||||
<TaskUser v-model:visible="showUsers" :data="current" @done="reload" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref, computed } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import {
|
||||
UserOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import Search from './components/search.vue';
|
||||
import TaskEdit from './components/task-edit.vue';
|
||||
import TaskInfo from './components/task-info.vue';
|
||||
import {
|
||||
pageTask,
|
||||
removeTask,
|
||||
removeBatchTask,
|
||||
getCount
|
||||
} from '@/api/oa/task';
|
||||
import { timeAgo } from 'ele-admin-pro';
|
||||
import type { Task, TaskParam } from '@/api/oa/task/model';
|
||||
import TaskUser from '@/views/oa/task/components/task-user.vue';
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
// 当前用户信息
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
const taskType = localStorage.getItem('taskType');
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<Task[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<Task | null>(null);
|
||||
// const users = ref()
|
||||
// 获取字典数据
|
||||
const taskProgress = getDictionaryOptions('taskProgress');
|
||||
const filters = getDictionaryOptions('taskType');
|
||||
// 加载状态
|
||||
// const loading = ref(true);
|
||||
// 获取统计数据
|
||||
// const data = ref<TabsParam | null>(null);
|
||||
const status = ref<number>();
|
||||
// 是否显示资产详情
|
||||
const showInfo = ref(false);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
const showUsers = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
where.status = 0;
|
||||
if (filters) {
|
||||
where.progress = filters.progress;
|
||||
where.taskSource = filters.taskSource;
|
||||
where.taskType = filters.taskType;
|
||||
where.status = filters.status;
|
||||
}
|
||||
// 工单状态
|
||||
// if (status.value) {
|
||||
// where.status = status.value;
|
||||
// }
|
||||
return pageTask({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
// {
|
||||
// key: 'index',
|
||||
// width: 48,
|
||||
// align: 'center',
|
||||
// fixed: 'left',
|
||||
// hideInSetting: true,
|
||||
// customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
// },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true
|
||||
},
|
||||
{
|
||||
title: '工单号',
|
||||
dataIndex: 'taskId',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
key: 'taskId'
|
||||
},
|
||||
{
|
||||
title: '工单标题',
|
||||
dataIndex: 'name',
|
||||
width: 280,
|
||||
key: 'name',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '工单类型',
|
||||
dataIndex: 'taskType',
|
||||
key: 'taskType',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
filters: filters.value
|
||||
},
|
||||
{
|
||||
title: '关联应用',
|
||||
dataIndex: 'appName',
|
||||
key: 'appName',
|
||||
width: 130
|
||||
},
|
||||
{
|
||||
title: '发起人',
|
||||
width: 160,
|
||||
dataIndex: 'promoter',
|
||||
key: 'promoter'
|
||||
},
|
||||
{
|
||||
title: '受理人',
|
||||
dataIndex: 'commander',
|
||||
key: 'commander',
|
||||
width: 160,
|
||||
hideInSetting: true
|
||||
},
|
||||
{
|
||||
title: '工单状态',
|
||||
dataIndex: 'progress',
|
||||
key: 'progress',
|
||||
width: 130,
|
||||
align: 'center',
|
||||
filters: taskProgress.value
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
sorter: true,
|
||||
width: 140,
|
||||
align: 'center',
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updateTime',
|
||||
key: 'updateTime',
|
||||
sorter: true,
|
||||
width: 140,
|
||||
align: 'center',
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: TaskParam) => {
|
||||
status.value = where?.status;
|
||||
console.log(where);
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: Task) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开用户详情弹窗 */
|
||||
const openInfo = (row?: Task) => {
|
||||
current.value = row ?? null;
|
||||
showInfo.value = true;
|
||||
};
|
||||
|
||||
const onPromoter = (row?: Task) => {
|
||||
reload({
|
||||
promoter: row?.promoter
|
||||
});
|
||||
};
|
||||
|
||||
const onCommander = (row?: Task) => {
|
||||
reload({
|
||||
commander: row?.commander
|
||||
});
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
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;
|
||||
}
|
||||
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);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Task) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openInfo(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'TaskIndex'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sys-org-table :deep(.ant-table-body) {
|
||||
overflow: auto !important;
|
||||
overflow: overlay !important;
|
||||
}
|
||||
|
||||
.sys-org-table :deep(.ant-table-pagination.ant-pagination) {
|
||||
padding: 0 4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.user-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<a-button type="primary" class="ele-btn-icon" @click="add">
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
:disabled="selection.length === 0"
|
||||
@click="removeBatch"
|
||||
>
|
||||
<template #icon>
|
||||
<delete-outlined />
|
||||
</template>
|
||||
<span>批量删除</span>
|
||||
</a-button>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入关键词"
|
||||
v-model:value="searchText"
|
||||
@pressEnter="search"
|
||||
@search="search"
|
||||
>
|
||||
<template #addonBefore>
|
||||
<a-select v-model:value="type" style="width: 100px; margin: -5px -12px">
|
||||
<a-select-option value="keywords">模糊搜索</a-select-option>
|
||||
<a-select-option value="taskId">工单号</a-select-option>
|
||||
<!-- <a-select-option value="name">工单标题</a-select-option>-->
|
||||
<!-- <a-select-option value="promoter">发起人ID</a-select-option>-->
|
||||
<!-- <a-select-option value="commander">受理人ID</a-select-option>-->
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input-search>
|
||||
<a-button @click="reload">重置</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useSearch from '@/utils/use-search';
|
||||
import type { CustomerParam } from '@/api/oa/customer/model';
|
||||
import { ref, watch } from 'vue';
|
||||
import { TaskParam } from '@/api/oa/task/model';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import {
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
SearchOutlined,
|
||||
DeleteOutlined,
|
||||
UpSquareOutlined,
|
||||
DownSquareOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: CustomerParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where } = useSearch<TaskParam>({
|
||||
taskId: undefined,
|
||||
name: undefined,
|
||||
userId: undefined,
|
||||
nickname: undefined
|
||||
});
|
||||
// 下来选项
|
||||
const type = ref('keywords');
|
||||
// 搜索内容
|
||||
const searchText = ref('');
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
assignObject(where, {});
|
||||
if (type.value == 'taskId' && Number(searchText.value) > 0) {
|
||||
where.taskId = Number(searchText.value);
|
||||
}
|
||||
if (type.value == 'name') {
|
||||
where.name = searchText.value;
|
||||
}
|
||||
if (type.value == 'promoter') {
|
||||
where.promoter = Number(searchText.value);
|
||||
}
|
||||
if (type.value == 'commander') {
|
||||
where.commander = Number(searchText.value);
|
||||
}
|
||||
if (type.value == 'keywords') {
|
||||
where.keywords = searchText.value;
|
||||
}
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
// 批量删除
|
||||
const removeBatch = () => {
|
||||
emit('remove');
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
// 刷新当前路由
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,508 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="980px"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:maxable="maxAble"
|
||||
:title="isUpdate ? '编辑工单' : '添加工单'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
:maskClosable="false"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
:label-col="{ md: { span: 8 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 24 }, sm: { span: 24 } }"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-item label="工单名称" v-bind="validateInfos.name">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入工单名称"
|
||||
v-model:value="form.name"
|
||||
@blur="validate('name', { trigger: 'blur' }).catch(() => {})"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="工单内容" v-bind="validateInfos.content">
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-editor
|
||||
v-model:value="content"
|
||||
placeholder="请输入您的工单内容，图片请直接粘贴"
|
||||
:locale="zh_Hans"
|
||||
:plugins="plugins"
|
||||
height="300px"
|
||||
:editorConfig="{ lineNumbers: true }"
|
||||
@paste="onPaste"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="工单类型" v-bind="validateInfos.taskType">
|
||||
<a-select
|
||||
optionFilterProp="label"
|
||||
placeholder="请选择工单类型"
|
||||
:options="taskType"
|
||||
allow-clear
|
||||
v-model:value="form.taskType"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="发起人" v-bind="validateInfos.promoter">
|
||||
<SelectCompany v-model:value="form.promoterName" @done="onPromoter" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="关联应用(选填)" v-bind="validateInfos.appId">
|
||||
<SelectApp v-model:value="appId" @done="onApp" />
|
||||
</a-form-item>
|
||||
<a-form-item label="指派给" v-bind="validateInfos.commander">
|
||||
<SelectStaff v-model:value="form.commanderName" @done="onCommander" />
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="品质要求" v-bind="validateInfos.quality">-->
|
||||
<!-- <a-select-->
|
||||
<!-- optionFilterProp="label"-->
|
||||
<!-- placeholder="请选择品质要求"-->
|
||||
<!-- :options="quality"-->
|
||||
<!-- allow-clear-->
|
||||
<!-- v-model:value="form.quality"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="上传附件" v-bind="validateInfos.files">
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
class="upload-list-inline"
|
||||
list-type="picture"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<a-button>
|
||||
<UploadOutlined />
|
||||
上传附件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<!-- <ele-image-upload-->
|
||||
<!-- v-model:value="files"-->
|
||||
<!-- :limit="9"-->
|
||||
<!-- :drag="true"-->
|
||||
<!-- :multiple="true"-->
|
||||
<!-- :upload-handler="uploadHandler"-->
|
||||
<!-- @upload="onUpload"-->
|
||||
<!-- />-->
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24" :xs="24">
|
||||
<!-- <a-form-item label="优先级" v-bind="validateInfos.priority">-->
|
||||
<!-- <a-select-->
|
||||
<!-- optionFilterProp="label"-->
|
||||
<!-- placeholder="请选择优先级"-->
|
||||
<!-- :options="priority"-->
|
||||
<!-- allow-clear-->
|
||||
<!-- v-model:value="form.priority"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {ref, reactive, watch, computed} from 'vue';
|
||||
import {Form, message, Modal, SelectProps} from 'ant-design-vue';
|
||||
import {useUserStore} from '@/store/modules/user';
|
||||
import {assignObject, htmlToText} from 'ele-admin-pro';
|
||||
import type {Task} from '@/api/oa/task/model';
|
||||
import {addTask, updateTask} from '@/api/oa/task';
|
||||
import {FILE_SERVER} from "@/config/setting";
|
||||
import {uploadFile} from "@/api/system/file";
|
||||
import {RuleObject} from "ant-design-vue/es/form";
|
||||
import { getDictionaryOptions, isImage, selectProject } from "@/utils/common";
|
||||
import SelectStaff from '@/components/SelectStaff/index.vue';
|
||||
import SelectCompany from '@/components/SelectCompany/index.vue';
|
||||
import SelectApp from '@/components/SelectApp/index.vue';
|
||||
import 'bytemd/dist/index.min.css';
|
||||
import highlight from '@bytemd/plugin-highlight-ssr'
|
||||
import 'highlight.js/styles/default.css'
|
||||
import ByteMdEditor from '@/components/ByteMdEditor/index.vue';
|
||||
// import highlight from '@bytemd/plugin-highlight';
|
||||
// 中文语言文件
|
||||
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 { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
import { User } from "@/api/system/user/model";
|
||||
import { Company } from "@/api/system/company/model";
|
||||
|
||||
const useForm = Form.useForm;
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Task | null;
|
||||
}>();
|
||||
|
||||
const userStore = useUserStore();
|
||||
// 当前登录用户信息
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const disabled = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxAble = ref(true);
|
||||
// 选项卡位置
|
||||
const activeKey = ref('1');
|
||||
const promoter = ref<any>(undefined);
|
||||
const commander = ref(undefined);
|
||||
const appid = ref(undefined);
|
||||
// 字典数据
|
||||
const taskType = getDictionaryOptions('taskType');
|
||||
const progress = getDictionaryOptions('taskProgress');
|
||||
const priority = getDictionaryOptions('taskPriority');
|
||||
const quality = getDictionaryOptions('taskQuality');
|
||||
/* 打开选择弹窗 */
|
||||
const showUser = ref(false);
|
||||
const showProject = ref(false);
|
||||
const content = ref('');
|
||||
const files = ref<ItemType[]>([]);
|
||||
const fileList = ref<ItemType[]>([]);
|
||||
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
// 已上传数据, 可赋初始值用于回显
|
||||
const avatar = ref(<any>[]);
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 用户信息
|
||||
const form = reactive<Task>({
|
||||
// 工单名称
|
||||
name: '',
|
||||
appId: undefined,
|
||||
// 工单类型
|
||||
taskType: '普通工单',
|
||||
// 项目ID
|
||||
projectId: '',
|
||||
// 客户ID
|
||||
customerId: '',
|
||||
// 资产ID
|
||||
assetsId: '',
|
||||
// 开始时间
|
||||
startTime: '',
|
||||
// 结束时间
|
||||
endTime: '',
|
||||
// 工单内容
|
||||
content: '',
|
||||
// 工单发起人ID
|
||||
promoter: undefined,
|
||||
promoterName: '',
|
||||
// 负责人
|
||||
commander: undefined,
|
||||
commanderName: '',
|
||||
// 工单状态
|
||||
progress: 0,
|
||||
// 优先级
|
||||
priority: '中',
|
||||
// 品质要求
|
||||
quality: 'B级',
|
||||
// 期限(天)
|
||||
day: '',
|
||||
files: '',
|
||||
// 排序
|
||||
sortNumber: 100,
|
||||
// 备注
|
||||
comments: '',
|
||||
// 创建时间
|
||||
createTime: '',
|
||||
// 状态
|
||||
status: 0,
|
||||
// 发布者
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入工单名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
taskType: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请选择工单类型',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
// promoter: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'number',
|
||||
// message: '请选择发起人',
|
||||
// trigger: 'blur',
|
||||
// validator: async (_rule: RuleObject, value: number) => {
|
||||
// if (promoter.value == undefined) {
|
||||
// return Promise.reject('请选择发起人');
|
||||
// }
|
||||
// return Promise.resolve();
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// commander: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'number',
|
||||
// message: '请选择受理人',
|
||||
// trigger: 'blur',
|
||||
// validator: async (_rule: RuleObject, value: number) => {
|
||||
// if (commander.value == undefined) {
|
||||
// return Promise.reject('请选择受理人');
|
||||
// }
|
||||
// return Promise.resolve();
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
content: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入工单内容',
|
||||
trigger: 'blur',
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (content.value == '') {
|
||||
return Promise.reject('请输入文字内容');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const onPromoter = (data: Company) => {
|
||||
form.promoterName = data.companyName
|
||||
form.promoter = data.userId
|
||||
}
|
||||
|
||||
const onCommander = (data: User) => {
|
||||
form.commanderName = data.nickname
|
||||
form.commander = data.userId
|
||||
}
|
||||
|
||||
const onApp = (appId) => {
|
||||
appid.value = appId
|
||||
}
|
||||
|
||||
/* 图片上传事件 */
|
||||
const uploadHandler = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
};
|
||||
if (!file.type.startsWith("image")) {
|
||||
message.error("只能选择图片");
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
message.error("大小不能超过 2MB");
|
||||
return;
|
||||
}
|
||||
onUpload(item);
|
||||
};
|
||||
|
||||
// 文件上传事件
|
||||
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) => {
|
||||
console.log(d);
|
||||
uploadFile(<File>d.file)
|
||||
.then((result) => {
|
||||
files.value.push({
|
||||
uid: result.id,
|
||||
url: FILE_SERVER + result.path,
|
||||
name: isImage(result.path) ? 'image' : result.name,
|
||||
status: "done"
|
||||
});
|
||||
message.success("上传成功");
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const {resetFields, validate, validateInfos} = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const data = {
|
||||
...form,
|
||||
// 处理工单内容
|
||||
content: content.value,
|
||||
appId: appid.value,
|
||||
promoter: promoter.value,
|
||||
commander: commander.value,
|
||||
files: JSON.stringify(files.value)
|
||||
};
|
||||
// 转字符串
|
||||
const saveOrUpdate = isUpdate.value ? updateTask : addTask;
|
||||
saveOrUpdate(data)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
content.value = '';
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
});
|
||||
};
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
/* 粘贴图片上传服务器并插入编辑器 */
|
||||
const onPaste = (e) => {
|
||||
console.log(e);
|
||||
const items = (e.clipboardData || e.originalEvent.clipboardData).items;
|
||||
console.log(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
|
||||
};
|
||||
uploadFile(<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();
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
assignObject(form, props.data);
|
||||
// 头像赋值
|
||||
avatar.value = [];
|
||||
if (props.data.images) {
|
||||
avatar.value.push({uid: 1, url: FILE_SERVER + props.data.images, status: ''});
|
||||
}
|
||||
if (props.data.content) {
|
||||
content.value = props.data.content;
|
||||
}
|
||||
|
||||
form.sortNumber = Number(props.data.sortNumber);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
content.value = '';
|
||||
avatar.value = [];
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
</script>
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.form-item-help {
|
||||
font-size: 12px;
|
||||
// line-height: 2;
|
||||
line-height: 1.5;
|
||||
padding-top: 4px;
|
||||
min-height: 22px;
|
||||
// margin-top: -2px;
|
||||
transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
|
||||
a {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.extra,
|
||||
small {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 12.5px !important;
|
||||
}
|
||||
|
||||
.extra {
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.select-shop {
|
||||
min-width: 120px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.upload-list-inline :deep(.ant-upload-list-item) {
|
||||
float: left;
|
||||
width: 200px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.upload-list-inline [class*='-upload-list-rtl'] :deep(.ant-upload-list-item) {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
@change="onChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
(e: 'change'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择客户跟进状态'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('customerFollowStatus');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
|
||||
/* 选择事件 */
|
||||
const onChange = (e) => {
|
||||
emit('change', e);
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!-- 客户来源选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
@change="onChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
(e: 'change'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择客户来源'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('customerSource');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
|
||||
/* 选择事件 */
|
||||
const onChange = (e) => {
|
||||
emit('change', e);
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择状态'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('status');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择客户类型'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('customerType');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@search="onSearch"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { listUsers } from '@/api/system/user';
|
||||
import type { SelectProps } from 'ant-design-vue';
|
||||
import { UserParam } from '@/api/system/user/model';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择客户类型'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = ref<SelectProps['options']>([]);
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
// 默认搜索条件
|
||||
const where = ref<UserParam>({});
|
||||
|
||||
const search = () => {
|
||||
/* 获取用户列 */
|
||||
listUsers({ ...where?.value })
|
||||
.then((result) => {
|
||||
data.value = result?.map((d) => {
|
||||
return {
|
||||
value: d.userId,
|
||||
label: d.nickname
|
||||
};
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const onSearch = (e) => {
|
||||
where.value.nickname = e;
|
||||
search();
|
||||
};
|
||||
|
||||
search();
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,774 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<a-drawer
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
v-if="detail && data"
|
||||
:title="`工单详情(${detail.taskId})：${data.name}`"
|
||||
:maxable="true"
|
||||
:body-style="{ paddingBottom: '8px', backgroundColor: '#f3f3f3' }"
|
||||
@update:visible="updateVisible"
|
||||
@close="onClose"
|
||||
:footer="null"
|
||||
>
|
||||
<template #extra>
|
||||
<compress-outlined v-if="width === '100%'" @click="handleMax" />
|
||||
<expand-outlined v-else @click="handleMax" />
|
||||
</template>
|
||||
<a-card class="task-card" :bordered="false">
|
||||
<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-spin :spinning="loading" v-if="appId > 0">
|
||||
<a-collapse class="task-card" v-model:activeKey="activeKey" :bordered="false">
|
||||
<a-collapse-panel key="1" header="应用详情">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{ padding: '16px' }"
|
||||
>
|
||||
<div class="content">
|
||||
<div class="app-item-list">
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-desc">AppID(应用ID)</div>
|
||||
<div class="ele-cell-title">{{ appInfo.appId }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider />
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-desc">小程序名称</div>
|
||||
<div class="ele-cell-title">
|
||||
{{ appInfo.appName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider />
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-desc">小程序描述</div>
|
||||
<div class="ele-cell-title">{{ appInfo.comments }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider />
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-desc">小程序码</div>
|
||||
<div class="ele-cell-title">
|
||||
<a-image
|
||||
:height="120"
|
||||
:width="120"
|
||||
:preview="false"
|
||||
:src="appInfo.appQrcode"
|
||||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider />
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-desc">应用图标</div>
|
||||
<div class="ele-cell-title">
|
||||
<a-image
|
||||
:height="70"
|
||||
:width="70"
|
||||
:preview="false"
|
||||
:src="appInfo.appIcon"
|
||||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-desc">状态</div>
|
||||
<div class="ele-cell-title">{{
|
||||
appInfo.status === 1 ? '开发中' : '已上线'
|
||||
}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="2" header="开发资料">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{ padding: '16px' }"
|
||||
>
|
||||
<byte-md-viewer :value="appInfo.requirement" :plugins="plugins" />
|
||||
</a-card>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</a-spin>
|
||||
<a-spin :spinning="loading" v-if="detail">
|
||||
<!-- 回复列表 -->
|
||||
<a-card class="task-card replay-bg"
|
||||
:bordered="false"
|
||||
v-for="(item, index) in record"
|
||||
:key="index">
|
||||
<a-page-header
|
||||
:title="item.nickname"
|
||||
:sub-title="`${item.createTime}`"
|
||||
:avatar="{ src: item.avatar ? item.avatar : 'https://file.gxwebsoft.com/20230217/c8a5c699b3174866a36dd6d378a09bb9.jpg' }"
|
||||
>
|
||||
<template #extra>
|
||||
<a-button key="2" href="#bottom" @click="onReply(item)">回复</a-button>
|
||||
<template v-for="(role,index) in loginUser.roles" :key="index">
|
||||
<a-button key="1" v-if="role.roleCode === 'admin'" @click="remove(item)">删除</a-button>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
<div class="content">
|
||||
<template v-if="item.content">
|
||||
<byte-md-viewer :value="item.content" :plugins="plugins" />
|
||||
</template>
|
||||
<!-- 附件列表 -->
|
||||
<a-space 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 :height="120" :width="120" :src="file.url" />
|
||||
</template>
|
||||
</a-space>
|
||||
<!-- 二级回复 -->
|
||||
<template v-if="item.children">
|
||||
<a-card class="task-card replay-bg"
|
||||
v-for="(item, index) in item.children"
|
||||
:key="index">
|
||||
<a-page-header
|
||||
:title="item.nickname"
|
||||
:sub-title="`${item.createTime}`"
|
||||
:avatar="{ src: item.avatar ? item.avatar : 'https://file.gxwebsoft.com/20230217/c8a5c699b3174866a36dd6d378a09bb9.jpg' }"
|
||||
>
|
||||
<template #extra>
|
||||
<template v-for="(role,index) in loginUser.roles" :key="index">
|
||||
<a-button key="1" v-if="role.roleCode === 'admin'" @click="remove(item)">删除</a-button>
|
||||
</template>
|
||||
</template>
|
||||
<div class="content">
|
||||
<template v-if="item.content">
|
||||
<byte-md-viewer :value="item.content" :plugins="plugins" />
|
||||
</template>
|
||||
<template v-if="item.children">
|
||||
{{ item.children }}
|
||||
</template>
|
||||
</div>
|
||||
<!-- 附件列表 -->
|
||||
<a-space 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 :height="120" :width="120" :src="file.url" />
|
||||
</template>
|
||||
</a-space>
|
||||
</a-page-header>
|
||||
</a-card>
|
||||
</template>
|
||||
</div>
|
||||
</a-page-header>
|
||||
</a-card>
|
||||
<!-- 操作按钮 -->
|
||||
<div class="task-btn" v-if="detail.status === 0">
|
||||
<a-space>
|
||||
<a-button type="primary" ghost size="large" @click="complete">
|
||||
已解决
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
danger
|
||||
ghost
|
||||
size="large"
|
||||
href="#bottom"
|
||||
@click="showEdit"
|
||||
>
|
||||
我要回复
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
danger
|
||||
ghost
|
||||
size="large"
|
||||
href="#bottom"
|
||||
@click="showUsers"
|
||||
>
|
||||
移交工程师
|
||||
</a-button>
|
||||
<a-button type="primary" ghost size="large" @click="completedTask">
|
||||
已完结
|
||||
</a-button>
|
||||
<a-button type="primary" ghost size="large" @click="closeTask">
|
||||
关单
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="task-btn" v-if="detail.status === 1">
|
||||
<a-button type="primary" ghost size="large" @click="openTask">
|
||||
开启工单
|
||||
</a-button>
|
||||
</div>
|
||||
</a-spin>
|
||||
<!-- 回复表单 -->
|
||||
<div id="bottom">
|
||||
<a-card :title="replyName ? `回复${replyName}` : `处理结果`" :bordered="false" v-if="openEdit">
|
||||
<a-space direction="vertical" style="width: 100%;">
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-editor
|
||||
v-model:value="content"
|
||||
placeholder="请输入您的回复内容，图片请直接粘贴"
|
||||
:locale="zh_Hans"
|
||||
:plugins="plugins"
|
||||
height="300px"
|
||||
:editorConfig="{ lineNumbers: true }"
|
||||
contenteditable="true"
|
||||
@paste="onPaste"
|
||||
/>
|
||||
<!-- <ele-image-upload-->
|
||||
<!-- v-model:value="files"-->
|
||||
<!-- :limit="9"-->
|
||||
<!-- :drag="true"-->
|
||||
<!-- :multiple="true"-->
|
||||
<!-- :upload-handler="uploadHandler"-->
|
||||
<!-- @upload="onUpload"-->
|
||||
<!-- />-->
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
class="upload-list-inline"
|
||||
list-type="picture"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<a-button>
|
||||
<UploadOutlined />
|
||||
上传附件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<a-button type="primary" style="margin-top: 20px" @click="save">提交</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</div>
|
||||
<!-- 成员管理 -->
|
||||
<div id="users">
|
||||
<a-card title="移交给" :bordered="false" v-if="openUsers">
|
||||
<a-space style="margin-bottom: 15px">
|
||||
<SelectStaff v-model:value="commander" @done="onSelect" />
|
||||
<a-button
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="onUpdateTask"
|
||||
>
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
<span>确定</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import "bytemd/dist/index.min.css";
|
||||
import { createVNode, reactive, ref, watch, nextTick, computed } from "vue";
|
||||
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 { Form, message, Modal, UploadProps } from "ant-design-vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useThemeStore } from "@/store/modules/theme";
|
||||
import { uploadFile } from "@/api/system/file";
|
||||
import type { Task } from "@/api/oa/task/model";
|
||||
import { updateTask, getTask } from "@/api/oa/task";
|
||||
import { RuleObject } from "ant-design-vue/es/form";
|
||||
import { FILE_SERVER } from "@/config/setting";
|
||||
import { getDictionaryOptions, isImage, openUrl } from "@/utils/common";
|
||||
import { TaskRecord } from "@/api/oa/task-record/model";
|
||||
import { App } from "@/api/app/model"
|
||||
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
|
||||
import { addTaskRecord, listTaskRecord, removeTaskRecord } from "@/api/oa/task-record";
|
||||
import SelectStaff from '@/components/SelectStaff/index.vue';
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
// 当前用户信息
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { Notice } from "@/api/oa/notice/model";
|
||||
import { messageLoading, toTreeData } from "ele-admin-pro";
|
||||
import { removeNotice } from "@/api/oa/notice";
|
||||
import { Menu } from "@/api/system/menu/model";
|
||||
import { getApp, getAppSecret } from "@/api/app";
|
||||
import {
|
||||
PlusOutlined,
|
||||
EyeOutlined,
|
||||
EyeInvisibleOutlined,
|
||||
UserOutlined,
|
||||
CompressOutlined,
|
||||
ExpandOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Task | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "done"): void;
|
||||
(e: "update:visible", visible: boolean): void;
|
||||
}>();
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit("update:visible", value);
|
||||
};
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
// 表单数据
|
||||
const form = reactive<TaskRecord>({
|
||||
taskRecordId: undefined,
|
||||
taskId: 0,
|
||||
content: '',
|
||||
files: "",
|
||||
userId: 0
|
||||
});
|
||||
const useForm = Form.useForm;
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
content: [
|
||||
{
|
||||
required: true,
|
||||
type: "string",
|
||||
message: "请输入工单内容",
|
||||
trigger: "blur",
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (content.value == "") {
|
||||
return Promise.reject("请输入文字内容");
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
const userStore = useUserStore();
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
// 请求状态
|
||||
const loading = ref(true);
|
||||
const width = ref('75%');
|
||||
const detail = ref<Task | null>(null);
|
||||
const appId = ref<number>(0);
|
||||
const appInfo = ref<App | null>({});
|
||||
const taskId = ref(0);
|
||||
const parentId = ref<any>(0);
|
||||
const replyName = ref<string>();
|
||||
const activeKey = ref([]);
|
||||
const showAppSecret = ref(false);
|
||||
const taskProgressDict = getDictionaryOptions("taskProgress");
|
||||
const record = ref<TaskRecord[] | undefined>([]);
|
||||
const content = ref('');
|
||||
const files = ref<ItemType[]>([]);
|
||||
const fileList = ref<ItemType[]>([]);
|
||||
const openEdit = ref(false);
|
||||
const openUsers = ref(false);
|
||||
const showAddUserForm = ref(false);
|
||||
const developerId = ref();
|
||||
const commander = ref<any>();
|
||||
// 选中步骤
|
||||
const active = ref(0);
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(form, rules);
|
||||
|
||||
/* 图片上传事件 */
|
||||
const uploadHandler = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
};
|
||||
if (!file.type.startsWith("image")) {
|
||||
message.error("只能选择图片");
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
message.error("大小不能超过 2MB");
|
||||
return;
|
||||
}
|
||||
onUpload(item);
|
||||
};
|
||||
|
||||
// 文件上传事件
|
||||
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) => {
|
||||
uploadFile(<File>d.file)
|
||||
.then((result) => {
|
||||
files.value.push({
|
||||
uid: result.id,
|
||||
url: FILE_SERVER + result.path,
|
||||
name: isImage(result.path) ? 'image' : result.name,
|
||||
status: "done"
|
||||
});
|
||||
console.log(files.value);
|
||||
message.success("上传成功");
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const complete = () => {
|
||||
Modal.confirm({
|
||||
title: "提示",
|
||||
content: "确定问题已解决？",
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
updateTask({ taskId: taskId.value, progress: 3 }).then((res) => {
|
||||
message.success(res);
|
||||
updateVisible(false);
|
||||
emit("done");
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const closeTask = () => {
|
||||
Modal.confirm({
|
||||
title: "提示",
|
||||
content: "确定关闭工单吗？",
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
updateTask({ taskId: taskId.value, status: 1, progress: 5 }).then((res) => {
|
||||
message.success(res);
|
||||
updateVisible(false);
|
||||
emit("done");
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const completedTask = () => {
|
||||
Modal.confirm({
|
||||
title: "提示",
|
||||
content: "确定工单已完接了吗？",
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
updateTask({ taskId: taskId.value, status: 1, progress: 4 }).then((res) => {
|
||||
message.success(res);
|
||||
updateVisible(false);
|
||||
emit("done");
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const openTask = () => {
|
||||
Modal.confirm({
|
||||
title: "提示",
|
||||
content: "重新开启后可以继续追加内容，需要重新开启工单吗？",
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
updateTask({ taskId: taskId.value, status: 0, progress: 2 }).then((res) => {
|
||||
message.success(res);
|
||||
updateVisible(false);
|
||||
emit("done");
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const showEdit = () => {
|
||||
replyName.value = '';
|
||||
parentId.value = 0;
|
||||
openEdit.value = true;
|
||||
openUsers.value = false;
|
||||
};
|
||||
const showUsers = () => {
|
||||
openUsers.value = true;
|
||||
openEdit.value = false;
|
||||
}
|
||||
|
||||
const onReply = (row: TaskRecord) => {
|
||||
parentId.value = row.taskRecordId;
|
||||
replyName.value = row.nickname;
|
||||
openEdit.value = true;
|
||||
}
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: TaskRecord) => {
|
||||
removeTaskRecord(row.taskRecordId)
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
// 加载工单明细
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 指派工单
|
||||
const onUpdateTask = () => {
|
||||
updateTask({
|
||||
commander: commander.value,
|
||||
taskId: taskId.value,
|
||||
progress: 1
|
||||
}).then(() => {
|
||||
message.success("操作成功");
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
}).catch(err => {
|
||||
message.error(err.message)
|
||||
})
|
||||
};
|
||||
|
||||
// 选择用户
|
||||
const onSelect = (userId) => {
|
||||
commander.value = userId;
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if(content.value == ''){
|
||||
message.error('请填写回复内容！');
|
||||
return false;
|
||||
}
|
||||
validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const data = {
|
||||
...form,
|
||||
taskId: taskId.value,
|
||||
parentId: parentId.value,
|
||||
// 处理工单内容
|
||||
content: content.value,
|
||||
files: JSON.stringify(files.value)
|
||||
};
|
||||
// 转字符串
|
||||
addTaskRecord(data)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
files.value = [];
|
||||
content.value = '';
|
||||
fileList.value = [];
|
||||
// 加载工单明细
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
});
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
emit("done");
|
||||
}
|
||||
|
||||
/* 粘贴图片上传服务器并插入编辑器 */
|
||||
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
|
||||
};
|
||||
uploadFile(<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 reload = () => {
|
||||
// 加载工单明细
|
||||
listTaskRecord({ taskId: taskId.value }).then((data) => {
|
||||
record.value = toTreeData({
|
||||
data: data.map((d) => {
|
||||
return { ...d, key: d.taskRecordId, value: d.taskRecordId };
|
||||
}),
|
||||
idField: 'taskRecordId',
|
||||
parentIdField: 'parentId'
|
||||
});
|
||||
loading.value = false;
|
||||
});
|
||||
// 加载应用信息
|
||||
if (appId.value) {
|
||||
getApp(appId.value).then(result => {
|
||||
appInfo.value = result;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 查看秘钥
|
||||
const onAppSecret = (appId) => {
|
||||
getAppSecret({ appId }).then((res) => {
|
||||
showAppSecret.value = !showAppSecret.value;
|
||||
});
|
||||
};
|
||||
|
||||
const handleMax = () => {
|
||||
if(width.value === '100%'){
|
||||
width.value = '75%'
|
||||
}else{
|
||||
width.value = '100%'
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
detail.value = props.data;
|
||||
appId.value = Number(props.data.appId);
|
||||
active.value = Number(props.data.progress);
|
||||
taskId.value = Number(props.data.taskId);
|
||||
commander.value = props.data.commanderName;
|
||||
reload();
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "TaskDetailContent"
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.content {
|
||||
background-color: #ffffff;
|
||||
padding: 10px 0;
|
||||
min-height: 40px;
|
||||
max-width: 80%;
|
||||
overflow: hidden;
|
||||
.edit-md {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
.task-card {
|
||||
background-color: var(--body-background);
|
||||
margin-bottom: 20px;
|
||||
//margin: 20px auto;
|
||||
|
||||
.comment {
|
||||
}
|
||||
}
|
||||
|
||||
.task-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 20px;
|
||||
}
|
||||
.ant-page-header{
|
||||
padding: 0 !important;
|
||||
}
|
||||
.replay-bg{
|
||||
//box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.upload-list-inline :deep(.ant-upload-list-item) {
|
||||
float: left;
|
||||
width: 200px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.upload-list-inline [class*='-upload-list-rtl'] :deep(.ant-upload-list-item) {
|
||||
float: right;
|
||||
}
|
||||
/* 应用详情字段列表 */
|
||||
.app-item-list {
|
||||
& > .ele-cell {
|
||||
padding: 16px 8px;
|
||||
.ele-cell-content {
|
||||
.ele-cell-desc {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.ele-cell-title {
|
||||
max-width: 900px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-item-icon {
|
||||
color: #fff;
|
||||
padding: 8px;
|
||||
font-size: 26px;
|
||||
border-radius: 50%;
|
||||
|
||||
&.anticon-qq {
|
||||
background: #3492ed;
|
||||
}
|
||||
|
||||
&.anticon-wechat {
|
||||
background: #4daf29;
|
||||
}
|
||||
|
||||
&.anticon-alipay {
|
||||
background: #1476fe;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,85 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="500px"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="`添加成员`"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
:label-col="{ sm: 5, xs: 24 }"
|
||||
:wrapper-col="{ sm: 19, xs: 24 }"
|
||||
layout="horizontal"
|
||||
>
|
||||
<a-form-item>
|
||||
<a-input
|
||||
placeholder="请输入开发者账号"
|
||||
v-model:value="content"
|
||||
@pressEnter="save"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { addTaskUser } from '@/api/oa/task-user';
|
||||
import { reloadPageTab } from '@/utils/page-tab-util';
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
taskId?: number | 10;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
const content = ref('');
|
||||
const role = ref(20);
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
console.log('sdfsdfdsfds');
|
||||
loading.value = true;
|
||||
addTaskUser({
|
||||
username: content.value,
|
||||
role: role.value,
|
||||
taskId: props.taskId
|
||||
})
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 300px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<a-tabs
|
||||
type="card"
|
||||
tabPosition="top"
|
||||
v-model:activeKey="activeKey"
|
||||
@change="query"
|
||||
>
|
||||
<a-tab-pane
|
||||
v-for="(item, index) in data"
|
||||
:key="index"
|
||||
:tab="`${item.tab}(${item.count})`"
|
||||
>
|
||||
<list :data="item" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import List from './list.vue';
|
||||
import { getCount } from '@/api/oa/task';
|
||||
import { TabsParam } from '@/api/tabs';
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(true);
|
||||
|
||||
// 当前选项卡
|
||||
const activeKey = ref(0);
|
||||
|
||||
// 获取字典数据
|
||||
const data = ref<TabsParam | null>(null);
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
getCount().then((result) => {
|
||||
data.value = result;
|
||||
});
|
||||
};
|
||||
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Task'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sys-organization-list {
|
||||
padding: 12px 6px;
|
||||
height: calc(100vh - 242px);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,443 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="taskId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
:customRow="customRow"
|
||||
:scroll="{ x: 1200 }"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'name'">
|
||||
<a-tooltip title="查看详情">
|
||||
<span href="#">{{ record.name }}</span>
|
||||
</a-tooltip>
|
||||
<!-- <div class="ele-text-placeholder">{{ record.comments }}</div>-->
|
||||
</template>
|
||||
<template v-if="column.key === 'progress'">
|
||||
<template v-for="(item, index) in taskProgress" :key="index">
|
||||
<a-badge
|
||||
:dot="
|
||||
record.isRead === 0 && loginUser.userId !== record.lastReadUser
|
||||
"
|
||||
v-if="Number(item.value) === Number(record.progress)"
|
||||
>
|
||||
<a-tag v-if="record.status === 0" color="orange">
|
||||
{{ item.label }}
|
||||
</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="green">
|
||||
{{ item.label }}
|
||||
</a-tag>
|
||||
</a-badge>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="column.key === 'taskType'">
|
||||
<div v-for="(d, i) in JSON.parse(taskType)" :key="i">
|
||||
<span v-if="d.value === record.taskType">{{ d.value }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.progress === 0" color="red">待处理</a-tag>
|
||||
<a-tag v-if="record.progress === 1" color="green">已完成</a-tag>
|
||||
<a-tag v-if="record.progress === 2" color="purple">已回复</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'promoter'">
|
||||
<div class="user-box">
|
||||
<a-tooltip :title="`ID:${record.promoter}`">
|
||||
<a-avatar
|
||||
:size="30"
|
||||
:src="`${record.promoterAvatar}`"
|
||||
style="margin-right: 4px"
|
||||
>
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-tooltip>
|
||||
<div class="user-info" @click="onPromoter(record)">
|
||||
<span>{{ record.promoterAlias }}</span>
|
||||
<span class="ele-text-placeholder">
|
||||
{{ record.promoterName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'commander'">
|
||||
<div class="user-box" v-if="record.commander">
|
||||
<a-tooltip :title="`ID:${record.commander}`">
|
||||
<a-avatar
|
||||
:size="30"
|
||||
:src="`${record.commanderAvatar}`"
|
||||
style="margin-right: 4px"
|
||||
>
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-tooltip>
|
||||
<div class="user-info" @click="onCommander(record)">
|
||||
<span>{{ record.commanderAlias }}</span>
|
||||
<span class="ele-text-placeholder">
|
||||
{{ record.commanderName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<a-tag v-if="record.commander === 0" color="red">工单退回</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'createTime'">
|
||||
<a-tooltip :title="`${toDateString(record.createTime)}`">
|
||||
<span class="ele-text-placeholder">
|
||||
{{ timeAgo(record.createTime) }}
|
||||
</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'updateTime'">
|
||||
<div class="user-box">
|
||||
<a-tooltip :title="`ID:${record.lastReadUser}`">
|
||||
<a-avatar
|
||||
:size="30"
|
||||
v-if="record.lastReadUser > 0"
|
||||
:src="`${record.lastAvatar}`"
|
||||
style="margin-right: 4px"
|
||||
>
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-tooltip>
|
||||
<div class="user-info">
|
||||
<span class="ele-text-placeholder">
|
||||
{{ record.lastNickname }}
|
||||
</span>
|
||||
<span class="ele-text-placeholder">
|
||||
{{ timeAgo(record.updateTime) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'users'">
|
||||
<a-space>
|
||||
<ele-avatar-list :data="record.users" :size="22" />
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button @click="openInfo(record)">处理</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
<!-- 编辑弹窗 -->
|
||||
<TaskEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
<!-- 用户详情 -->
|
||||
<TaskInfo v-model:visible="showInfo" :data="current" @done="reload" />
|
||||
<!-- 成员管理 -->
|
||||
<TaskUser v-model:visible="showUsers" :data="current" @done="reload" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref, computed, watch } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import {
|
||||
UserOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import Search from './components/search.vue';
|
||||
import TaskEdit from './components/task-edit.vue';
|
||||
import TaskInfo from './components/task-info.vue';
|
||||
import { pageTask, removeTask, removeBatchTask } from '@/api/oa/task';
|
||||
import { timeAgo } from 'ele-admin-pro';
|
||||
import type { Task, TaskParam } from '@/api/oa/task/model';
|
||||
import TaskUser from '@/views/oa/task/components/task-user.vue';
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
// 当前用户信息
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
const taskType = localStorage.getItem('taskType');
|
||||
const props = defineProps<{
|
||||
// 机构 id
|
||||
data?: any;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<Task[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<Task | null>(null);
|
||||
// const users = ref()
|
||||
// 获取字典数据
|
||||
const taskProgress = getDictionaryOptions('taskProgress');
|
||||
const filters = getDictionaryOptions('taskType');
|
||||
|
||||
// 是否显示资产详情
|
||||
const showInfo = ref(false);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
const showUsers = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
if (filters) {
|
||||
where.progress = filters.progress;
|
||||
where.taskSource = filters.taskSource;
|
||||
where.taskType = filters.taskType;
|
||||
where.status = filters.status;
|
||||
}
|
||||
// 搜索条件
|
||||
if (props.data.key) {
|
||||
where.status = props.data.key;
|
||||
// where.userId = loginUser.value.userId;
|
||||
}
|
||||
return pageTask({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
// {
|
||||
// key: 'index',
|
||||
// width: 48,
|
||||
// align: 'center',
|
||||
// fixed: 'left',
|
||||
// hideInSetting: true,
|
||||
// customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
// },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true
|
||||
},
|
||||
{
|
||||
title: '工单号',
|
||||
dataIndex: 'taskId',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
key: 'taskId'
|
||||
},
|
||||
{
|
||||
title: '工单标题',
|
||||
dataIndex: 'name',
|
||||
width: 280,
|
||||
key: 'name',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '工单类型',
|
||||
dataIndex: 'taskType',
|
||||
key: 'taskType',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
filters: filters.value
|
||||
},
|
||||
{
|
||||
title: '关联应用',
|
||||
dataIndex: 'appName',
|
||||
key: 'appName',
|
||||
width: 130
|
||||
},
|
||||
{
|
||||
title: '发起人',
|
||||
width: 160,
|
||||
dataIndex: 'promoter',
|
||||
key: 'promoter'
|
||||
},
|
||||
{
|
||||
title: '受理人',
|
||||
dataIndex: 'commander',
|
||||
key: 'commander',
|
||||
width: 160,
|
||||
hideInSetting: true
|
||||
},
|
||||
{
|
||||
title: '工单状态',
|
||||
dataIndex: 'progress',
|
||||
key: 'progress',
|
||||
width: 130,
|
||||
align: 'center',
|
||||
filters: taskProgress.value
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
sorter: true,
|
||||
width: 140,
|
||||
align: 'center',
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updateTime',
|
||||
key: 'updateTime',
|
||||
sorter: true,
|
||||
width: 140,
|
||||
align: 'center',
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: TaskParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: Task) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开用户详情弹窗 */
|
||||
const openInfo = (row?: Task) => {
|
||||
current.value = row ?? null;
|
||||
showInfo.value = true;
|
||||
};
|
||||
|
||||
const onPromoter = (row?: Task) => {
|
||||
reload({
|
||||
promoter: row?.promoter
|
||||
});
|
||||
};
|
||||
|
||||
const onCommander = (row?: Task) => {
|
||||
reload({
|
||||
commander: row?.commander
|
||||
});
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
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;
|
||||
}
|
||||
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);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Task) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openInfo(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(visible) => {
|
||||
console.log(visible);
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
reload();
|
||||
} else {
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Task'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sys-org-table :deep(.ant-table-body) {
|
||||
overflow: auto !important;
|
||||
overflow: overlay !important;
|
||||
}
|
||||
|
||||
.sys-org-table :deep(.ant-table-pagination.ant-pagination) {
|
||||
padding: 0 4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.user-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,118 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="500px"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="`修改价格`"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form layout="horizontal">
|
||||
<a-form-item>
|
||||
<a-input-number :min="0" style="width: 200px" v-model:value="content" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import { updateOrder } from '@/api/order';
|
||||
import { Order } from '@/api/order/model';
|
||||
import { createOrderNo } from "@/utils/common";
|
||||
// import { reloadPageTab } from '@/utils/page-tab-util';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
data?: Order | null;
|
||||
// 修改回显的数据
|
||||
field?: string | null;
|
||||
orderId?: number | 0;
|
||||
content?: number | 0;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
const content = ref<number>(0);
|
||||
const placeholder = ref('请输入订单金额');
|
||||
// 用户信息
|
||||
const form = reactive<Order>({
|
||||
orderId: 0,
|
||||
comments: '',
|
||||
payPrice: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const { resetFields, validate } = useForm(form);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
// 判断更新字段
|
||||
form.orderId = props.orderId;
|
||||
if (props.field === 'payPrice') {
|
||||
form.payPrice = Number(content.value);
|
||||
form.totalPrice = Number(content.value);
|
||||
form.orderNo = createOrderNo();
|
||||
}
|
||||
updateOrder(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.orderId) {
|
||||
loading.value = false;
|
||||
content.value = props.content;
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
|
||||
if (props.field == 'tenantCode') {
|
||||
placeholder.value = '请输入要绑定的主体编号';
|
||||
content.value = undefined;
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 300px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="600px"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="`修改内容`"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-editor
|
||||
v-model:value="content"
|
||||
:locale="zh_Hans"
|
||||
:plugins="plugins"
|
||||
uploadImages
|
||||
height="300px"
|
||||
:editorConfig="{ lineNumbers: true }"
|
||||
/>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import { updateTenant } from '@/api/oa/tennat';
|
||||
import type { Tenant } from '@/api/oa/tennat/model';
|
||||
import 'bytemd/dist/index.min.css';
|
||||
import 'github-markdown-css/github-markdown-light.css';
|
||||
import ByteMdEditor from '@/components/ByteMdEditor/index.vue';
|
||||
import highlight from '@bytemd/plugin-highlight';
|
||||
// 中文语言文件
|
||||
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';
|
||||
// 预览界面的样式，这里用的 github 的 markdown 主题
|
||||
import 'github-markdown-css/github-markdown-light.css';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
data?: Tenant | null;
|
||||
// 修改回显的数据
|
||||
field?: string | null;
|
||||
content?: string;
|
||||
tenantId?: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
const content = ref('');
|
||||
// 用户信息
|
||||
const form = reactive<Tenant>({
|
||||
tenantId: 0,
|
||||
comments: ''
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const { resetFields, validate } = useForm(form);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
// 判断更新字段
|
||||
form.tenantId = props.tenantId;
|
||||
if (props.field === 'content') {
|
||||
form.comments = content.value;
|
||||
}
|
||||
if (props.field === 'comments') {
|
||||
form.comments = content.value;
|
||||
}
|
||||
updateTenant(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
content.value = String(props.content);
|
||||
console.log(visible);
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
content.value = String(props.content);
|
||||
assignObject(form, props.data);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 300px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<!-- 角色选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
show-search
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { listDictionaryData } from '@/api/system/dictionary-data';
|
||||
import type { SelectProps } from 'ant-design-vue';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择状态'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = ref<SelectProps['options']>([]);
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 获取字典数据 */
|
||||
listDictionaryData({
|
||||
dictCode: 'status'
|
||||
})
|
||||
.then((list) => {
|
||||
data.value = list.map((d) => {
|
||||
return {
|
||||
value: d.dictDataCode,
|
||||
label: d.dictDataName
|
||||
};
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,188 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="680"
|
||||
: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="{ md: { span: 4 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
|
||||
layout="horizontal"
|
||||
>
|
||||
<a-form-item label="租户名称" name="tenantName" v-if="!isUpdate">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="将作为系统的名称使用"
|
||||
v-model:value="form.tenantName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="初始密码" name="password" v-if="!isUpdate">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入超级管理员初始密码"
|
||||
v-model:value="form.password"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="所属客户" name="customerId">-->
|
||||
<!-- <CustomerSelect v-model:value="form.customerId" @select="onSelect" />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="状态">-->
|
||||
<!-- <a-switch-->
|
||||
<!-- checked-children="运行中"-->
|
||||
<!-- un-checked-children="未上线"-->
|
||||
<!-- :checked="form.status === 0"-->
|
||||
<!-- @update:checked="updateStatus(form.status === 1 ? 0 : 1)"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<div style="margin-bottom: 22px">
|
||||
<a-divider />
|
||||
</div>
|
||||
<a-form-item label="备注" name="comments">
|
||||
<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';
|
||||
import { addTenant, updateTenant } from '@/api/oa/tennat';
|
||||
import type { Tenant } from '@/api/oa/tennat/model';
|
||||
import { createMerchantCode } from '@/utils/common';
|
||||
import { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Tenant | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 用户信息
|
||||
const { form, resetFields, assignFields } = useFormData<Tenant>({
|
||||
tenantName: '',
|
||||
appId: `${createMerchantCode()}`,
|
||||
comments: '',
|
||||
tenantId: undefined,
|
||||
password: '',
|
||||
customerId: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
tenantName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请填写租户名称',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入初始密码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// const { resetFields, validate, validateInfos } = useForm(form, rules);
|
||||
|
||||
// const onSelect = (item) => {
|
||||
// if (!isUpdate.value) {
|
||||
// form.customerId = item.customerId;
|
||||
// form.tenantName = item.customerName;
|
||||
// form.password = 'gxwebsoft.com';
|
||||
// }
|
||||
// };
|
||||
|
||||
// 更新状态
|
||||
// const status = ref(0);
|
||||
// const updateStatus = (index) => {
|
||||
// status.value = index;
|
||||
// };
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const data = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateTenant : addTenant;
|
||||
saveOrUpdate(data)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
resetFields();
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
assignFields({
|
||||
...props.data
|
||||
});
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less"></style>
|
||||
@@ -0,0 +1,104 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="75%"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="'客户详情'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
:footer="null"
|
||||
>
|
||||
<a-form
|
||||
:label-col="{ md: { span: 4 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 19 }, sm: { span: 24 } }"
|
||||
>
|
||||
<div class="base-form" style="margin-bottom: 20px">
|
||||
<a-descriptions :title="customer.customerName" bordered>
|
||||
<a-descriptions-item label="客户名称">
|
||||
{{ customer.customerName }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="客户IP">
|
||||
{{ customer.customerCode }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="状态">
|
||||
<a-tag v-if="customer.status === '0'" color="green">正常</a-tag>
|
||||
<a-tag v-if="customer.status === '1'" color="red">禁用</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="排序">
|
||||
{{ customer.sortNumber }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="备注">
|
||||
{{ customer.comments }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import type { Customer } from '@/api/oa/customer/model';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Customer | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 用户信息
|
||||
const customer = reactive<Customer>({
|
||||
createTime: '',
|
||||
customerName: '',
|
||||
customerCode: '',
|
||||
comments: '',
|
||||
sortNumber: undefined,
|
||||
status: undefined,
|
||||
customerId: 0
|
||||
});
|
||||
|
||||
// 请求状态
|
||||
const loading = ref(true);
|
||||
|
||||
const { resetFields } = useForm(customer);
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
/* 打开外部链接 */
|
||||
// const openUrl = (record) => {
|
||||
// window.open(record.panel);
|
||||
// };
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
assignObject(customer, props.data);
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less">
|
||||
.tab-pane {
|
||||
min-height: 100px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,131 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="680"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="`租户管理`"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
:label-col="{ md: { span: 4 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
|
||||
layout="horizontal"
|
||||
>
|
||||
<a-form-item label="租户名称" v-bind="validateInfos.tenantName">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入租户名称"
|
||||
v-model:value="form.tenantName"
|
||||
@blur="validate('tenantName', { trigger: 'blur' }).catch(() => {})"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注" v-bind="validateInfos.comments">
|
||||
<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 { Form, message } from 'ant-design-vue';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import { addTenant, updateTenant } from '@/api/oa/tennat';
|
||||
import type { Tenant } from '@/api/oa/tennat/model';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: Tenant | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<Tenant>({
|
||||
tenantName: '',
|
||||
comments: '',
|
||||
tenantId: 0
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
tenantName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入租户名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const data = {
|
||||
...form
|
||||
};
|
||||
// 转字符串
|
||||
const saveOrUpdate = isUpdate.value ? updateTenant : addTenant;
|
||||
saveOrUpdate(data)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
loading.value = false;
|
||||
assignObject(form, props.data);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less"></style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-form
|
||||
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
|
||||
>
|
||||
<a-row>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="租户编号">
|
||||
<a-input
|
||||
v-model:value.trim="where.tenantId"
|
||||
placeholder="请输入租户编号"
|
||||
allow-clear
|
||||
@pressEnter="search"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="租户名称">
|
||||
<a-input
|
||||
v-model:value.trim="where.tenantName"
|
||||
placeholder="请输入租户名称"
|
||||
allow-clear
|
||||
@pressEnter="search"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="search">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useSearch from '@/utils/use-search';
|
||||
import type { TenantParam } from '@/api/oa/tennat/model';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: TenantParam): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<TenantParam>({
|
||||
tenantId: undefined,
|
||||
tenantName: '',
|
||||
customerName: '',
|
||||
customerId: 0
|
||||
});
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
search();
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 搜索表单 -->
|
||||
<tenant-search @search="reload" />
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="tenantId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:scroll="{ x: 800 }"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'tenantName'">
|
||||
{{ record.tenantName }}
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<block @click="updateStatus(record)">
|
||||
<a-tag v-if="record.status === 1" color="green">运营中</a-tag>
|
||||
<a-tag v-if="record.status === 0" color="red">未上线</a-tag>
|
||||
</block>
|
||||
</template>
|
||||
<template v-if="column.key === 'comments'">
|
||||
<a-tooltip :title="record.comments">
|
||||
<FormOutlined
|
||||
@click="onEditContent('comments', record.comments, record)"
|
||||
/>
|
||||
{{ record.comments }}
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="handleLogin(record.tenantId)">登录</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>
|
||||
<!-- 编辑弹窗 -->
|
||||
<tenant-edit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
<!-- 用户详情 -->
|
||||
<tenant-info v-model:visible="showInfo" :data="current" @done="reload" />
|
||||
<!-- 管理弹窗 -->
|
||||
<tenant-manage
|
||||
v-model:visible="showManage"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
<Markdown
|
||||
v-model:visible="showMarkdown"
|
||||
:data="data"
|
||||
:field="field"
|
||||
:tenantId="tenantId"
|
||||
:content="markdown"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import {
|
||||
PlusOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
FormOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import TenantSearch from './components/tenant-search.vue';
|
||||
import TenantEdit from './components/tenant-edit.vue';
|
||||
import TenantInfo from './components/tenant-info.vue';
|
||||
import TenantManage from './components/tenant-manage.vue';
|
||||
import Markdown from './components/markdown.vue';
|
||||
import {
|
||||
pageTenant,
|
||||
removeTenant,
|
||||
updateTenant
|
||||
// removeBatchTenant,
|
||||
// updateTenantPassword
|
||||
} from '@/api/oa/tennat/index';
|
||||
import type { Tenant, TenantParam } from '@/api/oa/tennat/model';
|
||||
import { login } from '@/api/passport/login';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 是否显示资产详情
|
||||
const showInfo = ref(false);
|
||||
const showManage = ref(false);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '租户编号',
|
||||
dataIndex: 'tenantId',
|
||||
key: 'tenantId',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '租户名称',
|
||||
dataIndex: 'tenantName',
|
||||
key: 'tenantName',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
key: 'comments'
|
||||
},
|
||||
// {
|
||||
// title: '状态',
|
||||
// dataIndex: 'status',
|
||||
// sorter: true,
|
||||
// key: 'status'
|
||||
// },
|
||||
// {
|
||||
// title: '所属客户',
|
||||
// dataIndex: 'customerName',
|
||||
// key: 'customerName',
|
||||
// ellipsis: true,
|
||||
// hideInTable: true,
|
||||
// sorter: true
|
||||
// },
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<Tenant[]>([]);
|
||||
|
||||
// 当前编辑数据
|
||||
const current = ref<Tenant | null>(null);
|
||||
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
return pageTenant({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: TenantParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: Tenant) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 编辑备注信息 */
|
||||
const tenantId = ref(undefined);
|
||||
const markdown = ref('请输入备注内容');
|
||||
const showMarkdown = ref(false);
|
||||
const field = ref('comments');
|
||||
const onEditContent = (name, text, item) => {
|
||||
tenantId.value = item.tenantId;
|
||||
field.value = name;
|
||||
markdown.value = text;
|
||||
showMarkdown.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Tenant) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeTenant(row.tenantId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 更新状态 */
|
||||
const updateStatus = (item) => {
|
||||
let index = 0;
|
||||
if (item.status === 0) {
|
||||
index = 1;
|
||||
}
|
||||
updateTenant({
|
||||
tenantId: item.tenantId,
|
||||
status: index
|
||||
}).then(() => {
|
||||
message.success('操作成功');
|
||||
reload();
|
||||
});
|
||||
};
|
||||
|
||||
const handleLogin = (tenantId) => {
|
||||
login({
|
||||
username: 'admin',
|
||||
password: '$2a$10$iMsEmh.rPlzwy/SVe6KW3.62vlwqMJpibhCF9jYN.fMqxdqymzMzu',
|
||||
remember: true,
|
||||
tenantId: tenantId
|
||||
})
|
||||
.then(() => {
|
||||
message.success('切换成功');
|
||||
setTimeout(() => {
|
||||
history.go(0);
|
||||
location.reload();
|
||||
}, 500);
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Tenant'
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user