Initial commit
This commit is contained in:
南宁网宿科技
247
src/views/oa/app/components/app-edit.vue
Normal file
247
src/views/oa/app/components/app-edit.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="700"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:title="isUpdate ? '编辑应用' : '创建应用'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
|
||||
<a-descriptions :column="2">
|
||||
<a-descriptions-item>
|
||||
<a-form-item label="应用名称" name="appName">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入应用名称"
|
||||
class="form-item"
|
||||
v-model:value="form.appName"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item>
|
||||
<a-form-item label="项目类型" name="appType">
|
||||
<DictSelect
|
||||
dict-code="appType"
|
||||
class="form-item"
|
||||
placeholder="请选择项目类型"
|
||||
v-model:value="form.appType"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item>
|
||||
<a-form-item label="应用标识" name="appCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入应用标识(英文字母)"
|
||||
class="form-item"
|
||||
v-model:value="form.appCode"
|
||||
@input="changeAppCode"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item>
|
||||
<a-form-item label="企业名称" name="companyName">
|
||||
<SelectCompany
|
||||
:placeholder="`所属企业`"
|
||||
class="form-item"
|
||||
v-model:value="form.companyName"
|
||||
@done="chooseCompanyName"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item>
|
||||
<a-form-item label="关联租户" name="tenantCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入关联的租户ID"
|
||||
class="form-item"
|
||||
v-model:value="form.tenantCode"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item />
|
||||
<a-descriptions-item :span="2">
|
||||
<a-form-item label="应用描述" name="comments" class="ele-fluid">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入应用描述"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject, isChinese } from 'ele-admin-pro';
|
||||
import { addApp, updateApp } from '@/api/oa/app';
|
||||
import type { App } from '@/api/oa/app/model';
|
||||
import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
|
||||
import { Company } from '@/api/system/company/model';
|
||||
import { pageCompany } from '@/api/system/company';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: App | null;
|
||||
}>();
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 表单数据
|
||||
const form = reactive<App>({
|
||||
appId: undefined,
|
||||
appName: '',
|
||||
appCode: '',
|
||||
appType: undefined,
|
||||
companyName: '',
|
||||
tenantCode: '',
|
||||
comments: '',
|
||||
appStatus: '开发中'
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
appName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入应用名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
// companyName: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'string',
|
||||
// message: '请选择所属企业',
|
||||
// trigger: 'blur'
|
||||
// }
|
||||
// ],
|
||||
appCode: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入应用标识(英文字母)',
|
||||
trigger: 'blur',
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (isChinese(value)) {
|
||||
return Promise.reject('请输入正确的应用标识');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
],
|
||||
appType: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择项目类型'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
const chooseCompanyName = (data: Company) => {
|
||||
form.appUrl = data.domain;
|
||||
form.companyName = data.companyName;
|
||||
form.companyId = data.companyId;
|
||||
form.tenantId = data.tenantId;
|
||||
};
|
||||
|
||||
const changeAppCode = () => {
|
||||
form.packageName = `com.gxwebsoft.${form.appCode}`;
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateApp : addApp;
|
||||
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;
|
||||
// 加载企业信息
|
||||
const companyId = props.data?.companyId;
|
||||
pageCompany({ companyId }).then((res) => {
|
||||
form.tenantId = undefined;
|
||||
const list = res?.list;
|
||||
if (list && list.length > 0) {
|
||||
form.tenantId = list[0].tenantId;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
if (props.data.search) {
|
||||
form.search = props.data.search == 1 ? true : 0;
|
||||
}
|
||||
isUpdate.value = true;
|
||||
reload();
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.form-item {
|
||||
min-width: 300px;
|
||||
}
|
||||
</style>
|
||||
259
src/views/oa/app/components/renew-list.vue
Normal file
259
src/views/oa/app/components/renew-list.vue
Normal file
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<a-card
|
||||
title="续费管理"
|
||||
:bordered="false"
|
||||
v-if="hasRole('superAdmin') || hasRole('admin')"
|
||||
>
|
||||
<template #extra>
|
||||
<a-button @click="addRecord">添加</a-button>
|
||||
</template>
|
||||
<div class="content">
|
||||
<table
|
||||
class="ele-table ele-table-border ele-table-stripe ele-table-medium"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>状态</th>
|
||||
<th>续费金额</th>
|
||||
<th>开始时间</th>
|
||||
<th>结束时间</th>
|
||||
<th width="360">描述</th>
|
||||
<th style="text-align: center">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="(item, index) in list" :key="index">
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-select placeholder="请选择" v-model:value="item.status">
|
||||
<a-select-option :value="0">待缴费</a-select-option>
|
||||
<a-select-option :value="1">已缴费</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="item.status == 1">已缴费</span>
|
||||
<span v-if="item.status == 0">待缴费</span>
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="999999"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入续费金额"
|
||||
v-model:value="item.money"
|
||||
/>
|
||||
</template>
|
||||
<template v-else> ￥{{ item.money }} </template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-date-picker
|
||||
placeholder="开始日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model:value="item.startTime"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ toDateString(item.startTime, 'yyyy-MM-dd') }}
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-date-picker
|
||||
placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model:value="item.endTime"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ toDateString(item.endTime, 'yyyy-MM-dd') }}
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-input
|
||||
class="ele-fluid"
|
||||
placeholder="请输入描述内容"
|
||||
v-model:value="item.comments"
|
||||
/>
|
||||
<a-upload
|
||||
v-model:file-list="item.images"
|
||||
class="upload-list-inline"
|
||||
list-type="picture"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<a-button>
|
||||
<UploadOutlined />
|
||||
上传附件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="comments">{{ item.comments }}</div>
|
||||
<div class="files">
|
||||
<a-upload
|
||||
v-model:file-list="item.images"
|
||||
class="upload-list-inline"
|
||||
>
|
||||
</a-upload>
|
||||
</div>
|
||||
</template>
|
||||
</td>
|
||||
<td style="text-align: center">
|
||||
<template v-if="item.editStatus">
|
||||
<a-space>
|
||||
<a @click="save(item, index)">保存</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="确定要删除此记录吗？" @confirm="remove(index)">
|
||||
<a class="ele-text-info">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-space>
|
||||
<a @click="openEdit(index)">编辑</a>
|
||||
<a-divider type="vertical" v-if="hasRole('superAdmin')" @confirm="removeRel(index)" />
|
||||
<a-popconfirm title="确定要删除此记录吗？" v-if="hasRole('superAdmin')" @confirm="removeRel(index)">
|
||||
<a class="ele-text-info">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { ref, watch } from 'vue';
|
||||
import { addAppRenew, pageAppRenew, removeAppRenew } from "@/api/oa/app/renew";
|
||||
import { AppRenew } from '@/api/oa/app/renew/model';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
|
||||
import { uploadOss } from "@/api/system/file";
|
||||
import { isImage } from "@/utils/common";
|
||||
|
||||
const props = defineProps<{
|
||||
editStatus?: boolean;
|
||||
appId?: number;
|
||||
companyId?: number;
|
||||
}>();
|
||||
|
||||
const userStore = useUserStore();
|
||||
const list = ref<AppRenew[]>([]);
|
||||
const files = ref<ItemType[]>([]);
|
||||
|
||||
const addRecord = () => {
|
||||
list.value.unshift({
|
||||
money: undefined,
|
||||
comments: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
nickname: userStore.info?.nickname,
|
||||
status: 0,
|
||||
images: undefined,
|
||||
editStatus: true
|
||||
});
|
||||
};
|
||||
|
||||
// 文件上传事件
|
||||
const beforeUpload = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
}
|
||||
if (!file.type.startsWith("image")) {
|
||||
if (file.size / 1024 / 1024 > 100) {
|
||||
message.error("大小不能超过 100MB");
|
||||
return;
|
||||
}
|
||||
}
|
||||
onUpload(item);
|
||||
return false;
|
||||
};
|
||||
|
||||
const onUpload = (d: ItemType) => {
|
||||
uploadOss(<File>d.file)
|
||||
.then((result) => {
|
||||
files.value.push({
|
||||
uid: result.id,
|
||||
url: result.path,
|
||||
name: isImage(result.path) ? 'image' : result.name,
|
||||
status: "done"
|
||||
});
|
||||
message.success("上传成功");
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const remove = (index: number) => {
|
||||
list.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const openEdit = (index: number) => {
|
||||
list.value[index].editStatus = true
|
||||
}
|
||||
|
||||
const removeRel = (index: number) => {
|
||||
removeAppRenew(list.value[index].appRenewId).then(() => {
|
||||
list.value.splice(index, 1);
|
||||
message.success('删除成功')
|
||||
})
|
||||
}
|
||||
|
||||
const save = (item: AppRenew, index: number) => {
|
||||
item.appId = props.appId;
|
||||
item.companyId = props.companyId;
|
||||
item.startTime = item.startTime ? item.startTime + ' 00:00:00' : '';
|
||||
item.endTime = item.endTime ? item.endTime + ' 23:59:59' : '';
|
||||
item.nickname = userStore.info?.nickname;
|
||||
item.userId = userStore.info?.userId;
|
||||
if(files.value.length > 0){
|
||||
item.images = JSON.stringify(files.value)
|
||||
}
|
||||
if (item.money == undefined || item.money == 0) {
|
||||
message.error('请填写金额');
|
||||
return false;
|
||||
}
|
||||
addAppRenew(item).then(() => {
|
||||
list.value[index].editStatus = false;
|
||||
message.success('保存成功');
|
||||
});
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
pageAppRenew({ appId: props.appId }).then((res) => {
|
||||
if (res?.list) {
|
||||
list.value = res?.list.map((d) => {
|
||||
d.editStatus = false;
|
||||
if(d.images){
|
||||
d.images = JSON.parse(d.images);
|
||||
}
|
||||
return d;
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.appId,
|
||||
(options) => {
|
||||
if (options) {
|
||||
reload();
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
179
src/views/oa/app/components/search.vue
Normal file
179
src/views/oa/app/components/search.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<!-- 搜索表单 -->
|
||||
<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="type" @change="handleSearch">
|
||||
<a-radio-button value="全部">全部({{ conut.totalNum }})</a-radio-button>
|
||||
<a-radio-button value="开发中"
|
||||
>开发中({{ conut.totalNum2 }})</a-radio-button
|
||||
>
|
||||
<a-radio-button value="已上架"
|
||||
>已上架({{ conut.totalNum3 }})</a-radio-button
|
||||
>
|
||||
<a-radio-button value="已下架"
|
||||
>已下架({{ conut.totalNum5 }})</a-radio-button
|
||||
>
|
||||
<a-radio-button value="未签续费"
|
||||
>未签续费({{ conut.totalNum4 }})</a-radio-button
|
||||
>
|
||||
<a-radio-button value="客户案例"
|
||||
>客户案例({{ conut.totalNum6 }})</a-radio-button
|
||||
>
|
||||
<a-radio-button value="自营产品"
|
||||
>自营产品({{ conut.totalNum7 }})</a-radio-button
|
||||
>
|
||||
</a-radio-group>
|
||||
<!-- <SelectCompany-->
|
||||
<!-- :placeholder="`按企业筛选`"-->
|
||||
<!-- v-model:value="where.companyName"-->
|
||||
<!-- @done="chooseCompanyName"-->
|
||||
<!-- />-->
|
||||
<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';
|
||||
import { getCount } from '@/api/oa/app';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: AppParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'advanced'): void;
|
||||
}>();
|
||||
|
||||
// 下来选项
|
||||
// 日期范围选择
|
||||
const dateRange = ref<[string, string]>(['', '']);
|
||||
const type = ref<any>('开发中');
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<AppParam>({
|
||||
appId: undefined,
|
||||
userId: undefined,
|
||||
appStatus: undefined,
|
||||
companyId: undefined,
|
||||
companyName: '',
|
||||
keywords: ''
|
||||
});
|
||||
|
||||
// 统计数据
|
||||
const conut = ref({
|
||||
totalNum: 0,
|
||||
totalNum2: 0,
|
||||
totalNum3: 0,
|
||||
totalNum4: 0,
|
||||
totalNum5: 0,
|
||||
totalNum6: 0,
|
||||
totalNum7: 0
|
||||
});
|
||||
|
||||
/* 搜索 */
|
||||
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 handleSearch = () => {
|
||||
where.showExpiration = undefined;
|
||||
where.appStatus = type.value;
|
||||
if (type.value == '全部') {
|
||||
where.appStatus = undefined;
|
||||
where.showExpiration = undefined;
|
||||
} else {
|
||||
where.appStatus = type.value;
|
||||
if (where.appStatus == '客户案例') {
|
||||
where.showCase = true;
|
||||
where.appStatus = undefined;
|
||||
where.showIndex = undefined;
|
||||
}
|
||||
if (where.appStatus == '自营产品') {
|
||||
where.showIndex = true;
|
||||
where.appStatus = undefined;
|
||||
where.showCase = undefined;
|
||||
}
|
||||
if (type.value == '未签续费') {
|
||||
where.sort = 'expirationTime';
|
||||
where.order = 'asc';
|
||||
where.showExpiration = false;
|
||||
where.appStatus = '已上架';
|
||||
} else {
|
||||
where.sort = undefined;
|
||||
where.order = undefined;
|
||||
}
|
||||
}
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
search();
|
||||
};
|
||||
|
||||
getCount().then((data: any) => {
|
||||
conut.value = data;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
152
src/views/oa/app/components/task-list.vue
Normal file
152
src/views/oa/app/components/task-list.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<a-card
|
||||
title="待处理工单"
|
||||
:bordered="false"
|
||||
v-if="hasRole('superAdmin') || hasRole('admin')"
|
||||
>
|
||||
<template #extra>
|
||||
<a href="/oa/task">查看更多</a>
|
||||
</template>
|
||||
<div class="content">
|
||||
<a-space style="margin-bottom: 15px" v-if="editStatus" />
|
||||
<table class="ele-table ele-table-stripe ele-table-medium">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="80">工单号</th>
|
||||
<th width="100">工单类型</th>
|
||||
<th>问题描述</th>
|
||||
<th width="150">创建时间</th>
|
||||
<th width="100">状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-for="(item, index) in list" :key="index">
|
||||
<tr>
|
||||
<td>{{ item.taskId }}</td>
|
||||
<td>{{ item.taskType }}</td>
|
||||
<td>
|
||||
<div class="user-box">
|
||||
<div class="user-info">
|
||||
<a-badge
|
||||
:dot="!item.isRead && item.userId != userStore.info?.userId"
|
||||
>
|
||||
<a-avatar :src="item.lastAvatar" size="large" />
|
||||
</a-badge>
|
||||
</div>
|
||||
<div
|
||||
class="content"
|
||||
style="display: flex; flex-direction: column"
|
||||
>
|
||||
<div class="nickname">
|
||||
<span class="ele-text-secondary">{{
|
||||
item.lastNickname ? item.lastNickname : '未知'
|
||||
}}</span>
|
||||
<span
|
||||
class="ele-text-placeholder"
|
||||
style="padding-left: 10px"
|
||||
>{{ timeAgo(item.updateTime) }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="text">
|
||||
<a
|
||||
class="ele-text-heading"
|
||||
@click="openUrl('/oa/task/detail/' + item.taskId)"
|
||||
>{{ item.content }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="last-time ele-text-info"> </div>
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ toDateString(item.createTime, 'MM月dd日 HH:mm') }}</td>
|
||||
<td>
|
||||
<a-tag v-if="item.progress === TOBEARRANGED" color="red"
|
||||
>待安排</a-tag
|
||||
>
|
||||
<a-tag v-if="item.progress === PENDING" color="orange"
|
||||
>待处理</a-tag
|
||||
>
|
||||
<a-tag v-if="item.progress === PROCESSING" color="purple"
|
||||
>处理中</a-tag
|
||||
>
|
||||
<a-tag v-if="item.progress === TOBECONFIRMED" color="cyan"
|
||||
>待评价</a-tag
|
||||
>
|
||||
<a-tag v-if="item.progress === COMPLETED" color="green"
|
||||
>已完成</a-tag
|
||||
>
|
||||
<a-tag v-if="item.progress === CLOSED">已关闭</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { ref, watch } from 'vue';
|
||||
import { pageTask } from '@/api/oa/task';
|
||||
import { Task } from '@/api/oa/task/model';
|
||||
import {
|
||||
CLOSED,
|
||||
COMPLETED,
|
||||
PENDING,
|
||||
PROCESSING,
|
||||
TOBEARRANGED,
|
||||
TOBECONFIRMED
|
||||
} from '@/api/oa/task/model/progress';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import { timeAgo, toDateString } from 'ele-admin-pro';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
|
||||
const props = defineProps<{
|
||||
editStatus?: boolean;
|
||||
appId?: number;
|
||||
companyId?: number;
|
||||
}>();
|
||||
|
||||
const list = ref<Task[]>([]);
|
||||
const userStore = useUserStore();
|
||||
|
||||
const reload = () => {
|
||||
pageTask({ appId: props.appId }).then((res) => {
|
||||
if (res?.list) {
|
||||
list.value = res?.list;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.appId,
|
||||
(options) => {
|
||||
if (options) {
|
||||
reload();
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.user-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.last-time {
|
||||
margin-left: 12px;
|
||||
}
|
||||
.content {
|
||||
.text {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
283
src/views/oa/app/detail/components/app-about-edit.vue
Normal file
283
src/views/oa/app/detail/components/app-about-edit.vue
Normal file
@@ -0,0 +1,283 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="80%"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑' : '新增'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
|
||||
>
|
||||
<!-- 编辑器 -->
|
||||
<div class="content">
|
||||
<tinymce-editor
|
||||
v-model:value="content"
|
||||
:disabled="disabled"
|
||||
:init="config"
|
||||
placeholder="图片直接粘贴自动上传"
|
||||
@paste="onPaste"
|
||||
/>
|
||||
</div>
|
||||
<!-- 编辑器 -->
|
||||
<!-- <byte-md-editor-->
|
||||
<!-- v-model:value="content"-->
|
||||
<!-- placeholder="请输入您的内容，图片请直接粘贴"-->
|
||||
<!-- :locale="zh_Hans"-->
|
||||
<!-- mode="split"-->
|
||||
<!-- :plugins="plugins"-->
|
||||
<!-- height="500px"-->
|
||||
<!-- :editorConfig="{ lineNumbers: true }"-->
|
||||
<!-- @paste="onPaste"-->
|
||||
<!-- />-->
|
||||
</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 { addApp, updateApp } from '@/api/oa/app';
|
||||
import type { App } from '@/api/oa/app/model';
|
||||
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 highlight from '@bytemd/plugin-highlight';
|
||||
// 中文语言文件
|
||||
import gfm from '@bytemd/plugin-gfm';
|
||||
// // 预览界面的样式，这里用的 github 的 markdown 主题
|
||||
import 'github-markdown-css/github-markdown-light.css';
|
||||
import {FormInstance} from 'ant-design-vue/es/form';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import {uploadFile, uploadOss} from "@/api/system/file";
|
||||
import { TOKEN_STORE_NAME } from "@/config/setting";
|
||||
import TinymceEditor from "@/components/TinymceEditor/index.vue";
|
||||
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: App | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
const disabled = ref(false);
|
||||
const images = ref<ItemType[]>([]);
|
||||
const content = ref('');
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
const token = localStorage.getItem(TOKEN_STORE_NAME);
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<App>({
|
||||
// 应用id
|
||||
appId: undefined,
|
||||
// 项目介绍
|
||||
content: ''
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(form);
|
||||
const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
|
||||
const config = ref({
|
||||
height: 500,
|
||||
images_upload_handler: (blobInfo, success, error) => {
|
||||
const file = blobInfo.blob();
|
||||
const formData = new FormData();
|
||||
formData.append('file', file, file.name);
|
||||
uploadOss(file).then(res => {
|
||||
success(res.url)
|
||||
}).catch((msg) => {
|
||||
error(msg);
|
||||
})
|
||||
return false;
|
||||
},
|
||||
// 自定义文件上传(这里使用把选择的文件转成 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/*,.pdf');
|
||||
}
|
||||
input.onchange = () => {
|
||||
const file = input.files?.[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
if (meta.filetype === 'media') {
|
||||
if (file.size / 1024 / 1024 > 200) {
|
||||
editorRef.value?.alert({ content: '大小不能超过 200MB' });
|
||||
return;
|
||||
}
|
||||
if (!file.type.startsWith('video/')) {
|
||||
editorRef.value?.alert({ content: '只能选择视频文件' });
|
||||
return;
|
||||
}
|
||||
uploadOss(file).then(res => {
|
||||
callback(res.downloadUrl);
|
||||
})
|
||||
}
|
||||
};
|
||||
input.click();
|
||||
}
|
||||
});
|
||||
|
||||
/* 粘贴图片上传服务器并插入编辑器 */
|
||||
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 = `<p><img class="content-img" src="${result.url}"></p>`;
|
||||
content.value = content.value + addPath
|
||||
// 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 ? updateApp : addApp;
|
||||
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 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 = (item) => {
|
||||
const { file } = item;
|
||||
uploadFile(file)
|
||||
.then((data) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.url,
|
||||
status: 'done'
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
content.value = '';
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
if (props.data.content) {
|
||||
content.value = props.data.content;
|
||||
}
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
60
src/views/oa/app/detail/components/app-about.vue
Normal file
60
src/views/oa/app/detail/components/app-about.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<a-descriptions title="项目介绍" :bordered="false">
|
||||
<template #extra>
|
||||
<a @click="openEdit">编辑</a>
|
||||
</template>
|
||||
</a-descriptions>
|
||||
<byte-md-viewer :value="data.content" :plugins="plugins" />
|
||||
<a-empty
|
||||
v-if="data.content == ''"
|
||||
image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
|
||||
:image-style="{
|
||||
height: '60px'
|
||||
}"
|
||||
>
|
||||
<template #description>
|
||||
<span class="ele-text-placeholder">请填写项目介绍</span>
|
||||
</template>
|
||||
<a-button type="primary" @click="openEdit">立即填写</a-button>
|
||||
</a-empty>
|
||||
<!-- 编辑弹窗 -->
|
||||
<AppAboutEdit v-model:visible="showEdit" :data="data" @done="reload" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import gfm from '@bytemd/plugin-gfm';
|
||||
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
|
||||
import highlight from '@bytemd/plugin-highlight';
|
||||
import 'bytemd/dist/index.min.css';
|
||||
import 'github-markdown-css/github-markdown-light.css';
|
||||
import 'github-markdown-css/github-markdown-light.css';
|
||||
import AppAboutEdit from './app-about-edit.vue';
|
||||
|
||||
defineProps<{
|
||||
data: any;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
}>();
|
||||
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = () => {
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
emit('done');
|
||||
};
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
</script>
|
||||
221
src/views/oa/app/detail/components/app-annex-edit.vue
Normal file
221
src/views/oa/app/detail/components/app-annex-edit.vue
Normal file
@@ -0,0 +1,221 @@
|
||||
<!-- 角色编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="600"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate ? '编辑内容' : '上传文件'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="上传文件" name="fileName" v-if="!isUpdate">
|
||||
<span
|
||||
class="ele-text-success"
|
||||
v-if="fileName"
|
||||
style="margin-right: 10px"
|
||||
>
|
||||
{{ fileName }}
|
||||
</span>
|
||||
<a-upload
|
||||
:show-upload-list="false"
|
||||
:accept="'video/*'"
|
||||
v-if="!fileName"
|
||||
:customRequest="onUpload"
|
||||
>
|
||||
<a-button type="primary" class="ele-btn-icon">
|
||||
<template #icon>
|
||||
<UploadOutlined />
|
||||
</template>
|
||||
<span>上传文件</span>
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
<a-form-item label="设置分类" name="name">
|
||||
<SelectDict
|
||||
dict-code="groupId"
|
||||
:placeholder="`选择分类`"
|
||||
v-model:value="form.groupName"
|
||||
@done="chooseGroupId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="文件名称" name="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入文件名称"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</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-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import type { FileRecord } from '@/api/system/file/model';
|
||||
import { messageLoading } from 'ele-admin-pro';
|
||||
import { addFiles, updateFiles, uploadFile } from '@/api/system/file';
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
import { RuleObject } from 'ant-design-vue/es/form';
|
||||
import { DictData } from '@/api/system/dict-data/model';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: FileRecord | null;
|
||||
}>();
|
||||
|
||||
//
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
const fileName = ref('');
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<FileRecord>({
|
||||
id: 0,
|
||||
name: '',
|
||||
comments: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
fileName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请上传文件',
|
||||
type: 'string',
|
||||
trigger: 'blur',
|
||||
validator: async (_rule: RuleObject) => {
|
||||
if (!isUpdate.value && fileName.value.length == 0) {
|
||||
return Promise.reject('请上传文件');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入文件名称',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const chooseGroupId = (item: DictData) => {
|
||||
form.groupId = item.dictDataId;
|
||||
form.groupName = item.dictDataName;
|
||||
};
|
||||
|
||||
// 上传文件
|
||||
const onUpload = (item) => {
|
||||
const { file } = item;
|
||||
if (!file.type.startsWith('video')) {
|
||||
message.error('文件格式不正确！');
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 100) {
|
||||
message.error('大小不能超过 100MB');
|
||||
return;
|
||||
}
|
||||
const hide = messageLoading({
|
||||
content: '上传中..',
|
||||
duration: 0,
|
||||
mask: true
|
||||
});
|
||||
uploadFile(file)
|
||||
.then((data) => {
|
||||
hide();
|
||||
fileName.value = String(data.name);
|
||||
message.success('上传成功');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
hide();
|
||||
});
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const saveOrUpdate = isUpdate.value ? updateFiles : addFiles;
|
||||
saveOrUpdate(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignFields(props.data);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
302
src/views/oa/app/detail/components/app-annex.vue
Normal file
302
src/views/oa/app/detail/components/app-annex.vue
Normal file
@@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
:scroll="{ x: 800 }"
|
||||
cache-key="proAppAnnexTable"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-upload :show-upload-list="false" :customRequest="onUpload">
|
||||
<a-button class="ele-btn-icon">
|
||||
<template #icon>
|
||||
<UploadOutlined />
|
||||
</template>
|
||||
<span>上传文件</span>
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
v-if="selection.length > 0"
|
||||
@click="removeBatch"
|
||||
>
|
||||
<template #icon>
|
||||
<delete-outlined />
|
||||
</template>
|
||||
<span>删除</span>
|
||||
</a-button>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
v-model:value="searchText"
|
||||
placeholder="请输入关键词"
|
||||
@search="reload"
|
||||
@pressEnter="reload"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'name'">
|
||||
<span>{{ record.name }}</span>
|
||||
<a-tooltip :title="`复制链接地址`">
|
||||
<copy-outlined
|
||||
style="padding-left: 4px"
|
||||
@click="copyText(FILE_SERVER + record.downloadUrl)"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a @click="openPreview(FILE_SERVER + record.downloadUrl)">预览</a>
|
||||
<a-divider type="vertical" />
|
||||
<a :href="FILE_SERVER + record.downloadUrl" target="_blank">下载</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click="openEdit(record)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
placement="topRight"
|
||||
title="确定要删除此文件吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
<!-- 编辑弹窗 -->
|
||||
<app-annex-edit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref, watch } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue/es';
|
||||
import {
|
||||
UploadOutlined,
|
||||
DeleteOutlined,
|
||||
CopyOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { messageLoading, toDateString } from 'ele-admin-pro/es';
|
||||
import AppAnnexEdit from './app-annex-edit.vue';
|
||||
import {
|
||||
pageFiles,
|
||||
removeFile,
|
||||
removeFiles,
|
||||
uploadFileLocal
|
||||
} from '@/api/system/file';
|
||||
import type { FileRecord, FileRecordParam } from '@/api/system/file/model';
|
||||
import {copyText, openNew, openPreview} from '@/utils/common';
|
||||
import { FILE_SERVER } from '@/config/setting';
|
||||
|
||||
const props = defineProps<{
|
||||
appId: any;
|
||||
data: any;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
// 表格选中数据
|
||||
const selection = ref<FileRecord[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<FileRecord | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
const type = ref('name');
|
||||
const groupId = ref<number>(0);
|
||||
const searchText = ref('');
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '文件名称',
|
||||
dataIndex: 'name',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'comments',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '文件大小',
|
||||
dataIndex: 'length',
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => {
|
||||
if (text < 1024) {
|
||||
return text + 'B';
|
||||
} else if (text < 1024 * 1024) {
|
||||
return (text / 1024).toFixed(1) + 'KB';
|
||||
} else if (text < 1024 * 1024 * 1024) {
|
||||
return (text / 1024 / 1024).toFixed(1) + 'M';
|
||||
} else {
|
||||
return (text / 1024 / 1024 / 1024).toFixed(1) + 'G';
|
||||
}
|
||||
},
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '上传者',
|
||||
width: 120,
|
||||
dataIndex: 'createNickname'
|
||||
},
|
||||
{
|
||||
title: '上传时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
width: 180,
|
||||
showSorterTooltip: false,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 260,
|
||||
align: 'center'
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
where = {};
|
||||
if (type.value == 'name') {
|
||||
where.name = searchText.value;
|
||||
}
|
||||
if (type.value == 'createNickname') {
|
||||
where.createNickname = searchText.value;
|
||||
}
|
||||
if (groupId.value > 0) {
|
||||
where.groupId = groupId.value;
|
||||
}
|
||||
// where.contentType = 'application';
|
||||
where.appId = props.appId;
|
||||
return pageFiles({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: FileRecordParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: FileRecord) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: FileRecord) => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeFile(row.id)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的文件吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeFiles(selection.value.map((d) => d.id))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 上传文件
|
||||
const onUpload = (item) => {
|
||||
const { file } = item;
|
||||
if (file.size / 1024 / 1024 > 100) {
|
||||
message.error('大小不能超过 100MB');
|
||||
return;
|
||||
}
|
||||
const hide = messageLoading({
|
||||
content: '上传中..',
|
||||
duration: 0,
|
||||
mask: true
|
||||
});
|
||||
uploadFileLocal(file, props.data.appId)
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
hide();
|
||||
message.success('上传成功');
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
hide();
|
||||
});
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: FileRecord) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openPreview(FILE_SERVER + record.downloadUrl);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.appId,
|
||||
(appId) => {
|
||||
if (appId) {
|
||||
reload();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'AppAnnexIndex'
|
||||
};
|
||||
</script>
|
||||
177
src/views/oa/app/detail/components/app-field-edit.vue
Normal file
177
src/views/oa/app/detail/components/app-field-edit.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="1000"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑参数' : '添加参数'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{ md: { span: 2 }, sm: { span: 4 }, xs: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 21 }, sm: { span: 22 }, xs: { span: 24 } }"
|
||||
>
|
||||
<a-form-item label="名称" name="name">
|
||||
<a-input allow-clear placeholder="字段名称" v-model:value="form.name" />
|
||||
</a-form-item>
|
||||
<a-form-item label="参数" name="comments">
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-editor
|
||||
v-model:value="form.comments"
|
||||
placeholder="参数内容"
|
||||
:locale="zh_Hans"
|
||||
mode="split"
|
||||
:plugins="plugins"
|
||||
height="300px"
|
||||
maxLength="500"
|
||||
:editorConfig="{ lineNumbers: true }"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sortNumber">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="99999"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入排序号"
|
||||
v-model:value="form.sortNumber"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { FormInstance } from 'ant-design-vue/es/form';
|
||||
import { AppField } from '@/api/oa/app/field/model';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { decrypt, encrypt } from '@/utils/common';
|
||||
import { addAppField, updateAppField } from '@/api/oa/app/field';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import zh_Hans from 'bytemd/locales/zh_Hans.json';
|
||||
import gfm from '@bytemd/plugin-gfm';
|
||||
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
|
||||
import highlight from '@bytemd/plugin-highlight';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
appId: number | null | undefined;
|
||||
// 修改回显的数据
|
||||
data?: AppField | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
const { form, resetFields, assignFields } = useFormData<AppField>({
|
||||
id: undefined,
|
||||
appId: undefined,
|
||||
name: '',
|
||||
comments: '',
|
||||
status: 0,
|
||||
sortNumber: 0
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
comments: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写参数内容'
|
||||
}
|
||||
],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const data = {
|
||||
...form,
|
||||
appId: props.appId
|
||||
};
|
||||
// 加密信息处理
|
||||
if (form.comments != '') {
|
||||
data.comments = encrypt(form.comments);
|
||||
} else {
|
||||
data.comments = undefined;
|
||||
}
|
||||
const saveOrUpdate = isUpdate.value ? updateAppField : addAppField;
|
||||
console.log(isUpdate.value);
|
||||
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) {
|
||||
const comments = decrypt(props.data.comments);
|
||||
assignFields(props.data);
|
||||
form.comments = comments;
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
13
src/views/oa/app/detail/components/app-field-search.vue
Normal file
13
src/views/oa/app/detail/components/app-field-search.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<a-button @click="add">添加参数</a-button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const emit = defineEmits<{
|
||||
(e: 'add'): void;
|
||||
}>();
|
||||
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
</script>
|
||||
208
src/views/oa/app/detail/components/app-field.vue
Normal file
208
src/views/oa/app/detail/components/app-field.vue
Normal file
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<div class="app-task">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="taskId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<AppFieldSearch @add="openEdit" @remove="removeBatch" />
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'comments'">
|
||||
<byte-md-viewer
|
||||
:value="decrypt(record.comments)"
|
||||
:plugins="plugins"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a @click="moveUp(record)">上移<ArrowUpOutlined /></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>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
<!-- 编辑弹窗 -->
|
||||
<AppFieldEdit
|
||||
v-model:visible="showEdit"
|
||||
:app-id="data.appId"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref, watch } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import AppFieldSearch from './app-field-search.vue';
|
||||
import { decrypt } from '@/utils/common';
|
||||
import { App } from '@/api/oa/app/model';
|
||||
import AppFieldEdit from './app-field-edit.vue';
|
||||
import { AppField, AppFieldParam } from '@/api/oa/app/field/model';
|
||||
import {
|
||||
pageAppField,
|
||||
removeAppField,
|
||||
removeBatchAppField,
|
||||
updateAppField
|
||||
} from '@/api/oa/app/field';
|
||||
import { ArrowUpOutlined } from '@ant-design/icons-vue';
|
||||
import gfm from '@bytemd/plugin-gfm';
|
||||
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
|
||||
import highlight from '@bytemd/plugin-highlight';
|
||||
|
||||
const props = defineProps<{
|
||||
appId: any;
|
||||
data: App;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
const selection = ref<any[]>();
|
||||
// 当前编辑数据
|
||||
const current = ref<AppField | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
// 搜索条件
|
||||
where.appId = props.appId;
|
||||
return pageAppField({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<any[]>([
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '内容',
|
||||
dataIndex: 'comments',
|
||||
key: 'comments',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortNumber',
|
||||
sorter: true,
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
const moveUp = (row?: AppField) => {
|
||||
updateAppField({
|
||||
id: row?.id,
|
||||
sortNumber: Number(row?.sortNumber) + 1
|
||||
}).then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
});
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: AppField) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: AppFieldParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: AppField) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeAppField(row.id)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value?.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
if (selection.value?.length) {
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchAppField(selection.value.map((d) => d.id))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
watch(
|
||||
() => props.appId,
|
||||
(appId) => {
|
||||
if (appId) {
|
||||
reload();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'AppFieldIndex'
|
||||
};
|
||||
</script>
|
||||
559
src/views/oa/app/detail/components/app-info-edit.vue
Normal file
559
src/views/oa/app/detail/components/app-info-edit.vue
Normal file
@@ -0,0 +1,559 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="80%"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑' : '新增'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<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-descriptions title="基本信息" :column="2" bordered>
|
||||
<a-descriptions-item
|
||||
label="Logo"
|
||||
layout="vertical"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="1"
|
||||
:data="logo"
|
||||
@done="chooseFile"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="二维码"
|
||||
layout="vertical"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="4"
|
||||
:data="appQrcode"
|
||||
@done="chooseFile2"
|
||||
@del="onDeleteItem2"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="名称"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入应用名称"
|
||||
class="input-item"
|
||||
v-model:value="form.appName"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="状态"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<DictSelect
|
||||
dict-code="appstoreStatus"
|
||||
placeholder="请选择应用状态"
|
||||
class="input-item"
|
||||
v-model:value="form.appStatus"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="TenantId"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
><a-input-number
|
||||
allow-clear
|
||||
placeholder="请输入租户ID"
|
||||
class="input-item"
|
||||
:maxlength="5"
|
||||
v-model:value="form.tenantCode"
|
||||
/></a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="标识"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
><a-input
|
||||
allow-clear
|
||||
:maxlength="16"
|
||||
class="input-item"
|
||||
placeholder="请输入应用标识(英文字母)"
|
||||
v-model:value="form.appCode"
|
||||
@change="changeAppCode"
|
||||
/></a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="AppSecret"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<span>****</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="所属企业"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<SelectCompany
|
||||
:placeholder="`所属企业`"
|
||||
class="input-item"
|
||||
v-model:value="form.companyName"
|
||||
@done="chooseCompanyName"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="项目域名"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<a-input
|
||||
allow-clear
|
||||
class="input-item"
|
||||
placeholder="请输入项目地址"
|
||||
v-model:value="form.appUrl"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="Git仓库地址"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<a-input
|
||||
allow-clear
|
||||
class="input-item"
|
||||
placeholder="请输入Git仓库地址"
|
||||
v-model:value="form.gitUrl"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="项目类型"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<DictSelect
|
||||
dict-code="appType"
|
||||
class="input-item"
|
||||
placeholder="请选择项目类型"
|
||||
v-model:value="form.appType"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="开发者"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<SelectCompany
|
||||
:placeholder="`开发者单位`"
|
||||
class="input-item"
|
||||
v-model:value="form.developer"
|
||||
@done="chooseDeveloper"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="是否作为案例展示"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<a-switch
|
||||
size="small"
|
||||
:checked="form.showCase"
|
||||
@change="updatShowCase"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="是否推荐到首页"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<a-switch
|
||||
size="small"
|
||||
:checked="form.showIndex"
|
||||
@change="updatShowIndex"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="描述"
|
||||
layout="vertical"
|
||||
:span="2"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入应用描述"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject, ipReg, isChinese, uuid } from 'ele-admin-pro';
|
||||
import { addApp, updateApp } from '@/api/oa/app';
|
||||
import type { App } from '@/api/oa/app/model';
|
||||
import { FormInstance, RuleObject } 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 { TOKEN_STORE_NAME } from '@/config/setting';
|
||||
import { FileRecord } from '@/api/system/file/model';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: App | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
// 当期时间
|
||||
// 已上传数据
|
||||
const logo = ref<ItemType[]>([]);
|
||||
const appQrcode = ref<ItemType[]>([]);
|
||||
const images = ref<ItemType[]>([]);
|
||||
// 日期范围选择
|
||||
const content = ref('');
|
||||
|
||||
const token = localStorage.getItem(TOKEN_STORE_NAME);
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<App>({
|
||||
// 应用id
|
||||
appId: undefined,
|
||||
// 应用秘钥
|
||||
appSecret: '',
|
||||
enName: '',
|
||||
// 应用名称
|
||||
appName: '',
|
||||
// 上级id, 0是顶级
|
||||
parentId: undefined,
|
||||
// 应用编号
|
||||
appCode: '',
|
||||
// 应用图标
|
||||
appIcon: '',
|
||||
appQrcode: '',
|
||||
// 应用截图
|
||||
images: '',
|
||||
appType: undefined,
|
||||
appTypeMultiple: undefined,
|
||||
// 菜单类型
|
||||
menuType: undefined,
|
||||
// 应用地址
|
||||
appUrl: '',
|
||||
gitUrl: '',
|
||||
// 后台管理地址
|
||||
adminUrl: undefined,
|
||||
// 下载地址
|
||||
downUrl: undefined,
|
||||
serverUrl: undefined,
|
||||
callbackUrl: undefined,
|
||||
docsUrl: undefined,
|
||||
prototypeUrl: undefined,
|
||||
ipAddress: undefined,
|
||||
fileUrl: undefined,
|
||||
// 应用包名
|
||||
packageName: '',
|
||||
// 点击次数
|
||||
clicks: '',
|
||||
// 安装次数
|
||||
installs: '',
|
||||
// 项目介绍
|
||||
content: '',
|
||||
// 开发者(个人)
|
||||
developer: '',
|
||||
director: '',
|
||||
projectDirector: '',
|
||||
salesman: '',
|
||||
// 软件定价
|
||||
price: '',
|
||||
// 评分
|
||||
score: '',
|
||||
// 星级
|
||||
star: '',
|
||||
// 菜单组件地址
|
||||
component: '',
|
||||
// 菜单路由地址
|
||||
path: '',
|
||||
// 权限标识
|
||||
authority: '',
|
||||
// 打开位置
|
||||
target: '',
|
||||
// 是否隐藏, 0否, 1是(仅注册路由不显示在左侧菜单)
|
||||
hide: undefined,
|
||||
// 菜单侧栏选中的path
|
||||
active: '',
|
||||
// 其它路由元信息
|
||||
meta: '',
|
||||
// 版本
|
||||
edition: '',
|
||||
// 版本号
|
||||
version: '',
|
||||
// 是否已安装
|
||||
isUse: undefined,
|
||||
// 排序
|
||||
sortNumber: undefined,
|
||||
// 备注
|
||||
comments: undefined,
|
||||
tenantName: '',
|
||||
companyName: '',
|
||||
// 租户编号
|
||||
tenantCode: '',
|
||||
// 租户id
|
||||
tenantId: undefined,
|
||||
// 创建时间
|
||||
createTime: '',
|
||||
appStatus: '开发中',
|
||||
// 状态
|
||||
status: undefined,
|
||||
// 发布者
|
||||
userId: '',
|
||||
// 发布者昵称
|
||||
nickname: '',
|
||||
// 子菜单
|
||||
children: [],
|
||||
// 权限树回显选中状态, 0未选中, 1选中
|
||||
checked: false,
|
||||
//
|
||||
key: undefined,
|
||||
//
|
||||
value: undefined,
|
||||
//
|
||||
parentIds: [],
|
||||
//
|
||||
openType: undefined,
|
||||
//
|
||||
search: undefined,
|
||||
showCase: undefined,
|
||||
showIndex: undefined,
|
||||
recommend: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
appName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入应用名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
companyName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请选择所属企业',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
appCode: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入应用标识(英文字母)',
|
||||
trigger: 'blur',
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (isChinese(value)) {
|
||||
return Promise.reject('请输入正确的应用标识');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
],
|
||||
appType: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择项目类型'
|
||||
}
|
||||
],
|
||||
ipAddress: [
|
||||
{
|
||||
pattern: ipReg,
|
||||
message: 'IP地址不合法',
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
appStatus: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请选择应用状态',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const { resetFields, validate } = useForm(form, rules);
|
||||
|
||||
const chooseCompanyName = (data: Company) => {
|
||||
form.appUrl = data.domain;
|
||||
form.companyName = data.companyName;
|
||||
form.companyId = data.companyId;
|
||||
form.tenantId = data.tenantId;
|
||||
};
|
||||
|
||||
const chooseDeveloper = (data: Company) => {
|
||||
form.developer = data.companyName;
|
||||
};
|
||||
|
||||
const changeAppCode = () => {
|
||||
form.packageName = `com.gxwebsoft.${form.appCode}`;
|
||||
};
|
||||
const updatShowCase = () => {
|
||||
form.showCase = !form.showCase;
|
||||
};
|
||||
|
||||
const updatShowIndex = () => {
|
||||
form.showIndex = !form.showIndex;
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form,
|
||||
content: content.value,
|
||||
search: form.search ? 1 : 0,
|
||||
images: JSON.stringify(images.value)
|
||||
// appTypeMultiple: JSON.stringify(form.appTypeMultiple)
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateApp : addApp;
|
||||
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 chooseFile = (data: FileRecord) => {
|
||||
logo.value.push({
|
||||
uid: data.id,
|
||||
url: data.path,
|
||||
status: 'done'
|
||||
});
|
||||
form.appIcon = data.path;
|
||||
};
|
||||
|
||||
const onDeleteItem = (index: number) => {
|
||||
logo.value.splice(index, 1);
|
||||
form.appIcon = '';
|
||||
};
|
||||
const chooseFile2 = (data: FileRecord) => {
|
||||
appQrcode.value.push({
|
||||
uid: data.id,
|
||||
url: data.path,
|
||||
status: 'done'
|
||||
});
|
||||
const arr = appQrcode.value.map((d) => d.url);
|
||||
form.appQrcode = arr.join('|||');
|
||||
};
|
||||
|
||||
const onDeleteItem2 = (index: number) => {
|
||||
appQrcode.value.splice(index, 1);
|
||||
form.appQrcode = '';
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
content.value = '';
|
||||
logo.value = [];
|
||||
images.value = [];
|
||||
appQrcode.value = [];
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
if (props.data.appIcon) {
|
||||
logo.value.push({
|
||||
uid: 0,
|
||||
url: props.data.appIcon,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
if (props.data.appQrcode) {
|
||||
const split = props.data.appQrcode.split('|||');
|
||||
split.map((url) => {
|
||||
appQrcode.value.push({
|
||||
uid: uuid(),
|
||||
url: url,
|
||||
status: 'done'
|
||||
});
|
||||
});
|
||||
// appQrcode.value.push({
|
||||
// uid: 0,
|
||||
// url: props.data.appQrcode,
|
||||
// status: 'done'
|
||||
// });
|
||||
}
|
||||
if (props.data.companyId) {
|
||||
console.log(props.data);
|
||||
}
|
||||
if (props.data.images) {
|
||||
const arr = JSON.parse(props.data.images);
|
||||
arr.map((d) => {
|
||||
images.value.push({
|
||||
uid: d.uid,
|
||||
url: d.url,
|
||||
status: 'done'
|
||||
});
|
||||
});
|
||||
}
|
||||
if (props.data.search) {
|
||||
form.search = props.data.search == 1 ? true : 0;
|
||||
}
|
||||
if (props.data.content) {
|
||||
content.value = props.data.content;
|
||||
}
|
||||
isUpdate.value = true;
|
||||
reload();
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.input-item {
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
176
src/views/oa/app/detail/components/app-info.vue
Normal file
176
src/views/oa/app/detail/components/app-info.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<a-descriptions title="基本信息" :column="2" bordered>
|
||||
<template #extra>
|
||||
<a @click="openEdit">编辑</a>
|
||||
</template>
|
||||
<a-descriptions-item
|
||||
label="Logo"
|
||||
layout="vertical"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<ele-image-upload
|
||||
v-model:value="logo"
|
||||
:disabled="true"
|
||||
:item-style="{ width: '90px', height: '90px' }"
|
||||
:limit="1"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="二维码"
|
||||
layout="vertical"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<ele-image-upload
|
||||
v-model:value="appQrcode"
|
||||
:disabled="true"
|
||||
:item-style="{ width: '90px', height: '90px' }"
|
||||
:limit="1"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="名称"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.appName }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="状态"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<a-badge status="processing" :text="data.appStatus" />
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="TenantId"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.tenantCode }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="标识"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.appCode }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="AppSecret"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<a @click="openAppSecretForm">重置</a>
|
||||
<!-- 编辑弹窗 -->
|
||||
<AppSecretForm v-model:visible="showAppSecretForm" :app-id="data.appId" />
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="所属企业"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
{{ data.companyName }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="项目域名"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<a @click="openNew(`${data.appUrl}`)">{{ data.appUrl }}</a>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="Git仓库地址"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<a @click="openNew(`${data.gitUrl}`)" v-if="data.gitUrl">
|
||||
<GithubOutlined style="font-size: 20px" />
|
||||
</a>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="项目类型"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
APP
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="开发者"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
{{ data.developer }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="是否作为案例展示"
|
||||
layout="vertical"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
{{ data.showCase ? '是' : '否' }}
|
||||
<!-- <a-switch size="small" :checked="data.showCase" />-->
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="是否推荐到首页"
|
||||
layout="vertical"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
{{ data.showIndex ? '是' : '否' }}
|
||||
<!-- <a-switch size="small" :checked="data.showIndex" />-->
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="描述"
|
||||
:span="2"
|
||||
layout="vertical"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<span class="ele-text-secondary">{{ data.comments }}</span>
|
||||
</a-descriptions-item>
|
||||
<template v-for="(item, index) in appField" :key="index">
|
||||
<a-descriptions-item
|
||||
:label="item.name"
|
||||
:span="2"
|
||||
layout="vertical"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<byte-md-viewer :value="decrypt(item.comments)" :plugins="plugins" />
|
||||
</a-descriptions-item>
|
||||
</template>
|
||||
</a-descriptions>
|
||||
<!-- 编辑弹窗 -->
|
||||
<AppInfoEdit v-model:visible="showEdit" :data="data" @done="reload" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { App } from '@/api/oa/app/model';
|
||||
import { ref } from 'vue';
|
||||
import AppSecretForm from './app-secret-form.vue';
|
||||
import AppInfoEdit from './app-info-edit.vue';
|
||||
import { AppField } from '@/api/oa/app/field/model';
|
||||
import { decrypt, openNew } from '@/utils/common';
|
||||
import gfm from '@bytemd/plugin-gfm';
|
||||
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
|
||||
import highlight from '@bytemd/plugin-highlight';
|
||||
import { GithubOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
defineProps<{
|
||||
data: App;
|
||||
logo: [] | any;
|
||||
appField: AppField[];
|
||||
appQrcode: any | undefined;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
}>();
|
||||
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
const showAppSecretForm = ref<boolean>(false);
|
||||
|
||||
const openAppSecretForm = () => {
|
||||
showAppSecretForm.value = true;
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = () => {
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
const reload = () => {
|
||||
emit('done');
|
||||
};
|
||||
</script>
|
||||
255
src/views/oa/app/detail/components/app-nenew.vue
Normal file
255
src/views/oa/app/detail/components/app-nenew.vue
Normal file
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<a-button @click="addRecord" style="margin-bottom: 10px">添加</a-button>
|
||||
<table
|
||||
class="ele-table ele-table-border ele-table-stripe ele-table-medium"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>状态</th>
|
||||
<th>续费金额</th>
|
||||
<th>开始时间</th>
|
||||
<th>结束时间</th>
|
||||
<th width="360">描述</th>
|
||||
<th style="text-align: center">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="(item, index) in list" :key="index">
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-select placeholder="请选择" v-model:value="item.status">
|
||||
<a-select-option :value="0">待缴费</a-select-option>
|
||||
<a-select-option :value="1">已缴费</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="item.status == 1">已缴费</span>
|
||||
<span v-if="item.status == 0">待缴费</span>
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="999999"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入续费金额"
|
||||
v-model:value="item.money"
|
||||
/>
|
||||
</template>
|
||||
<template v-else> ￥{{ item.money }} </template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-date-picker
|
||||
placeholder="开始日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model:value="item.startTime"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ toDateString(item.startTime, 'yyyy-MM-dd') }}
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-date-picker
|
||||
placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model:value="item.endTime"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ toDateString(item.endTime, 'yyyy-MM-dd') }}
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-input
|
||||
class="ele-fluid"
|
||||
placeholder="请输入描述内容"
|
||||
v-model:value="item.comments"
|
||||
/>
|
||||
<a-upload
|
||||
v-model:file-list="item.images"
|
||||
class="upload-list-inline"
|
||||
list-type="picture"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<a-button>
|
||||
<UploadOutlined />
|
||||
上传附件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="comments">{{ item.comments }}</div>
|
||||
<div class="files">
|
||||
<a-upload
|
||||
v-model:file-list="item.images"
|
||||
class="upload-list-inline"
|
||||
>
|
||||
</a-upload>
|
||||
</div>
|
||||
</template>
|
||||
</td>
|
||||
<td style="text-align: center">
|
||||
<template v-if="item.editStatus">
|
||||
<a-space>
|
||||
<a @click="save(item, index)">保存</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="确定要删除此记录吗？" @confirm="remove(index)">
|
||||
<a class="ele-text-info">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-space>
|
||||
<a @click="openEdit(index)">编辑</a>
|
||||
<a-divider type="vertical" v-if="hasRole('superAdmin')" @confirm="removeRel(index)" />
|
||||
<a-popconfirm title="确定要删除此记录吗？" v-if="hasRole('superAdmin')" @confirm="removeRel(index)">
|
||||
<a class="ele-text-info">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { ref, watch } from 'vue';
|
||||
import { addAppRenew, pageAppRenew, removeAppRenew } from "@/api/oa/app/renew";
|
||||
import { AppRenew } from '@/api/oa/app/renew/model';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
|
||||
import { uploadOss } from "@/api/system/file";
|
||||
import { isImage } from "@/utils/common";
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
editStatus?: boolean;
|
||||
appId?: number;
|
||||
companyId?: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const userStore = useUserStore();
|
||||
const list = ref<AppRenew[]>([]);
|
||||
const files = ref<ItemType[]>([]);
|
||||
|
||||
const addRecord = () => {
|
||||
list.value.unshift({
|
||||
money: undefined,
|
||||
comments: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
nickname: userStore.info?.nickname,
|
||||
status: 1,
|
||||
images: undefined,
|
||||
editStatus: true
|
||||
});
|
||||
};
|
||||
|
||||
// 文件上传事件
|
||||
const beforeUpload = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
}
|
||||
if (!file.type.startsWith("image")) {
|
||||
if (file.size / 1024 / 1024 > 100) {
|
||||
message.error("大小不能超过 100MB");
|
||||
return;
|
||||
}
|
||||
}
|
||||
onUpload(item);
|
||||
return false;
|
||||
};
|
||||
|
||||
const onUpload = (d: ItemType) => {
|
||||
uploadOss(<File>d.file)
|
||||
.then((result) => {
|
||||
files.value.push({
|
||||
uid: result.id,
|
||||
url: result.path,
|
||||
name: isImage(result.path) ? 'image' : result.name,
|
||||
status: "done"
|
||||
});
|
||||
message.success("上传成功");
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const remove = (index: number) => {
|
||||
list.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const openEdit = (index: number) => {
|
||||
list.value[index].editStatus = true
|
||||
}
|
||||
|
||||
const removeRel = (index: number) => {
|
||||
removeAppRenew(list.value[index].appRenewId).then(() => {
|
||||
list.value.splice(index, 1);
|
||||
message.success('删除成功')
|
||||
})
|
||||
}
|
||||
|
||||
const save = (item: AppRenew, index: number) => {
|
||||
item.appId = props.appId;
|
||||
item.companyId = props.companyId;
|
||||
item.startTime = item.startTime ? item.startTime + ' 00:00:00' : '';
|
||||
item.endTime = item.endTime ? item.endTime + ' 23:59:59' : '';
|
||||
item.nickname = userStore.info?.nickname;
|
||||
item.userId = userStore.info?.userId;
|
||||
if(files.value.length > 0){
|
||||
item.images = JSON.stringify(files.value)
|
||||
}
|
||||
if (item.money == undefined || item.money == 0) {
|
||||
message.error('请填写金额');
|
||||
return false;
|
||||
}
|
||||
addAppRenew(item).then(() => {
|
||||
list.value[index].editStatus = false;
|
||||
message.success('保存成功');
|
||||
});
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
pageAppRenew({ appId: props.appId }).then((res) => {
|
||||
if (res?.list) {
|
||||
list.value = res?.list.map((d) => {
|
||||
d.editStatus = false;
|
||||
if(d.images){
|
||||
d.images = JSON.parse(d.images);
|
||||
}
|
||||
return d;
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.appId,
|
||||
(options) => {
|
||||
if (options) {
|
||||
reload();
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
240
src/views/oa/app/detail/components/app-photo-edit.vue
Normal file
240
src/views/oa/app/detail/components/app-photo-edit.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="80%"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑' : '添加'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
|
||||
>
|
||||
<div class="content">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="9"
|
||||
:data="images"
|
||||
@done="chooseFile"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
<!-- <ele-image-upload-->
|
||||
<!-- v-model:value="images"-->
|
||||
<!-- :limit="6"-->
|
||||
<!-- :drag="true"-->
|
||||
<!-- :item-style="{ width: '150px', height: '267px' }"-->
|
||||
<!-- :upload-handler="uploadHandler"-->
|
||||
<!-- @upload="onUpload"-->
|
||||
<!-- />-->
|
||||
<small class="ele-text-placeholder">
|
||||
请上传应用截图(最多9张)，建议宽度300*533像素，小于2M/张
|
||||
</small>
|
||||
</div>
|
||||
</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 { addApp, updateApp } from '@/api/oa/app';
|
||||
import type { App } from '@/api/oa/app/model';
|
||||
import { FormInstance } from 'ant-design-vue/es/form';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { uploadFileLocal } from '@/api/system/file';
|
||||
import { TOKEN_STORE_NAME } from '@/config/setting';
|
||||
import { FileRecord } from '@/api/system/file/model';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: App | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
// 当期时间
|
||||
const logo = ref<ItemType[]>([]);
|
||||
const appQrcode = ref<ItemType[]>([]);
|
||||
const images = ref<ItemType[]>([]);
|
||||
const content = ref('');
|
||||
const requirement = ref('');
|
||||
|
||||
const token = localStorage.getItem(TOKEN_STORE_NAME);
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<App>({
|
||||
// 应用id
|
||||
appId: undefined,
|
||||
// 应用截图
|
||||
images: ''
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const { resetFields } = useForm(form);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form,
|
||||
content: content.value,
|
||||
requirement: requirement.value,
|
||||
search: form.search ? 1 : 0,
|
||||
images: JSON.stringify(images.value)
|
||||
// appTypeMultiple: JSON.stringify(form.appTypeMultiple)
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateApp : addApp;
|
||||
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 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 = (item) => {
|
||||
const { file } = item;
|
||||
uploadFileLocal(file, props.data?.appId)
|
||||
.then((data) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.url,
|
||||
status: 'done'
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const chooseFile = (data: FileRecord) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.url,
|
||||
status: 'done'
|
||||
});
|
||||
};
|
||||
|
||||
const onDeleteItem = (index: number) => {
|
||||
images.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
content.value = '';
|
||||
requirement.value = '';
|
||||
logo.value = [];
|
||||
images.value = [];
|
||||
appQrcode.value = [];
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
if (props.data.appIcon) {
|
||||
logo.value.push({
|
||||
uid: 0,
|
||||
url: props.data.appIcon,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
if (props.data.appQrcode) {
|
||||
appQrcode.value.push({
|
||||
uid: 0,
|
||||
url: props.data.appQrcode,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
if (props.data.companyId) {
|
||||
console.log(props.data);
|
||||
}
|
||||
if (props.data.images) {
|
||||
const arr = JSON.parse(props.data.images);
|
||||
arr.map((d, i) => {
|
||||
images.value.push({
|
||||
uid: d.uid,
|
||||
url: d.url,
|
||||
status: 'done'
|
||||
});
|
||||
});
|
||||
}
|
||||
if (props.data.search) {
|
||||
form.search = props.data.search == 1 ? true : 0;
|
||||
}
|
||||
if (props.data.content) {
|
||||
content.value = props.data.content;
|
||||
}
|
||||
if (props.data.requirement) {
|
||||
requirement.value = props.data.requirement;
|
||||
}
|
||||
isUpdate.value = true;
|
||||
reload();
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
52
src/views/oa/app/detail/components/app-photo.vue
Normal file
52
src/views/oa/app/detail/components/app-photo.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<a-descriptions title="应用截图" :bordered="false">
|
||||
<template #extra>
|
||||
<a @click="openEdit">编辑</a>
|
||||
</template>
|
||||
</a-descriptions>
|
||||
<div class="content">
|
||||
<template v-if="data.appType === 'web'">
|
||||
<a-image-preview-group>
|
||||
<a-space :size="20" v-for="(item, index) in images" :key="index">
|
||||
<a-image :width="360" :src="item.url" />
|
||||
</a-space>
|
||||
</a-image-preview-group>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-image-preview-group>
|
||||
<a-space :size="20" v-for="(item, index) in images" :key="index">
|
||||
<a-image :width="200" :src="item.url" />
|
||||
</a-space>
|
||||
</a-image-preview-group>
|
||||
</template>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
<AppPhotoEdit v-model:visible="showEdit" :data="data" @done="reload" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { App } from '@/api/oa/app/model';
|
||||
import { ref } from 'vue';
|
||||
import AppPhotoEdit from './app-photo-edit.vue';
|
||||
|
||||
defineProps<{
|
||||
visible: boolean;
|
||||
data: App;
|
||||
images: any[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
}>();
|
||||
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = () => {
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
emit('done');
|
||||
};
|
||||
</script>
|
||||
256
src/views/oa/app/detail/components/app-profile-edit.vue
Normal file
256
src/views/oa/app/detail/components/app-profile-edit.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="80%"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑' : '新增'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
|
||||
>
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-editor
|
||||
v-model:value="requirement"
|
||||
placeholder="请输入您的内容，图片请直接粘贴"
|
||||
:locale="zh_Hans"
|
||||
mode="split"
|
||||
:plugins="plugins"
|
||||
height="500px"
|
||||
:editorConfig="{ lineNumbers: true }"
|
||||
@paste="onPaste"
|
||||
/>
|
||||
</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 { addApp, updateApp } from '@/api/oa/app';
|
||||
import type { App } from '@/api/oa/app/model';
|
||||
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 highlight from '@bytemd/plugin-highlight';
|
||||
// 中文语言文件
|
||||
import gfm from '@bytemd/plugin-gfm';
|
||||
// // 预览界面的样式，这里用的 github 的 markdown 主题
|
||||
import 'github-markdown-css/github-markdown-light.css';
|
||||
import {FormInstance} from 'ant-design-vue/es/form';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { uploadFile } from "@/api/system/file";
|
||||
import { TOKEN_STORE_NAME } from "@/config/setting";
|
||||
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: App | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
const images = ref<ItemType[]>([]);
|
||||
const content = ref('');
|
||||
const requirement = ref('');
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
const token = localStorage.getItem(TOKEN_STORE_NAME);
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<App>({
|
||||
// 应用id
|
||||
appId: undefined,
|
||||
// 项目需求
|
||||
requirement: ''
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(form);
|
||||
|
||||
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(result.url);
|
||||
} else {
|
||||
error('上传失败');
|
||||
}
|
||||
})
|
||||
.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,
|
||||
requirement: requirement.value,
|
||||
images: JSON.stringify(images.value)
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateApp : addApp;
|
||||
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 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 = (item) => {
|
||||
const { file } = item;
|
||||
uploadFile(file)
|
||||
.then((data) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.url,
|
||||
status: 'done'
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
content.value = '';
|
||||
requirement.value = '';
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
if (props.data.requirement){
|
||||
requirement.value = props.data.requirement;
|
||||
}
|
||||
if (props.data.content) {
|
||||
content.value = props.data.content;
|
||||
}
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
66
src/views/oa/app/detail/components/app-profile.vue
Normal file
66
src/views/oa/app/detail/components/app-profile.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<a-descriptions title="协同文档" :bordered="false">
|
||||
<template #extra>
|
||||
<a @click="openEdit">编辑</a>
|
||||
</template>
|
||||
</a-descriptions>
|
||||
<byte-md-viewer :value="data.requirement" :plugins="plugins" />
|
||||
<a-empty
|
||||
v-if="data.requirement == ''"
|
||||
image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
|
||||
:image-style="{
|
||||
height: '60px'
|
||||
}"
|
||||
>
|
||||
<template #description>
|
||||
<span class="ele-text-placeholder">类似腾讯文档的功能，支持多人编辑</span>
|
||||
</template>
|
||||
<a-button type="primary" @click="openEdit">编辑</a-button>
|
||||
</a-empty>
|
||||
<!-- 编辑弹窗 -->
|
||||
<AppProfileEdit v-model:visible="showEdit" :data="data" @done="reload" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import gfm from '@bytemd/plugin-gfm';
|
||||
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
|
||||
import highlight from '@bytemd/plugin-highlight';
|
||||
import 'bytemd/dist/index.min.css';
|
||||
import 'github-markdown-css/github-markdown-light.css';
|
||||
import 'github-markdown-css/github-markdown-light.css';
|
||||
import AppProfileEdit from './app-profile-edit.vue';
|
||||
|
||||
defineProps<{
|
||||
appId: number;
|
||||
data: any;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
}>();
|
||||
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = () => {
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
emit('done');
|
||||
};
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
</script>
|
||||
<style lang="less">
|
||||
.app-profile * {
|
||||
max-width: 1000px;
|
||||
}
|
||||
</style>
|
||||
210
src/views/oa/app/detail/components/app-secret-form.vue
Normal file
210
src/views/oa/app/detail/components/app-secret-form.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<!-- 角色编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="550"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
title="重置AppSecret"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
ok-text="重置"
|
||||
cancel-text="关闭"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<template v-if="!appSecret">
|
||||
<a-form-item label="手机号码" name="phone">
|
||||
<a-input
|
||||
:maxlength="20"
|
||||
:disabled="true"
|
||||
placeholder="请输入短信验证码"
|
||||
v-model:value="form.phone"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="短信验证码" name="code">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
placeholder="请输入验证码"
|
||||
v-model:value="form.code"
|
||||
:maxlength="6"
|
||||
allow-clear
|
||||
/>
|
||||
<a-button
|
||||
class="login-captcha"
|
||||
:disabled="!!countdownTime"
|
||||
@click="openImgCodeModal"
|
||||
>
|
||||
<span v-if="!countdownTime" @click="sendCode">发送验证码</span>
|
||||
<span v-else>已发送 {{ countdownTime }} s</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-form-item label="AppID" name="appId">
|
||||
<a-typography-text copyable code class="ele-text-secondary">{{
|
||||
appId
|
||||
}}</a-typography-text>
|
||||
</a-form-item>
|
||||
<a-form-item label="AppSecret" name="appSecret">
|
||||
<a-typography-text copyable code class="ele-text-secondary">{{
|
||||
appSecret
|
||||
}}</a-typography-text>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import type { FormInstance } from 'ant-design-vue/es/form';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { sendSmsCaptcha } from '@/api/login';
|
||||
import { updateAppSecret } from '@/api/oa/app';
|
||||
import { createCode, encrypt } from '@/utils/common';
|
||||
import { pageAppUser } from '@/api/oa/app/user';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
appId?: number;
|
||||
}>();
|
||||
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
// 验证码倒计时时间
|
||||
const countdownTime = ref(0);
|
||||
// 验证码倒计时定时器
|
||||
let countdownTimer: number | null = null;
|
||||
const loading = ref(false);
|
||||
const appSecret = ref('');
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields } = useFormData<User>({
|
||||
phone: '',
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
/* 显示发送短信验证码弹窗 */
|
||||
const openImgCodeModal = () => {
|
||||
if (!form.phone) {
|
||||
message.error('请输入手机号码');
|
||||
return;
|
||||
}
|
||||
};
|
||||
/* 发送短信验证码 */
|
||||
const sendCode = () => {
|
||||
sendSmsCaptcha({ phone: form.phone }).then(() => {
|
||||
message.success('短信验证码发送成功, 请注意查收!');
|
||||
countdownTime.value = 60;
|
||||
// 开始对按钮进行倒计时
|
||||
countdownTimer = window.setInterval(() => {
|
||||
if (countdownTime.value <= 1) {
|
||||
countdownTimer && clearInterval(countdownTimer);
|
||||
countdownTimer = null;
|
||||
}
|
||||
countdownTime.value--;
|
||||
}, 1000);
|
||||
});
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
if (appSecret.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
updateAppSecret({
|
||||
phone: form.phone,
|
||||
appCode: form.code,
|
||||
appId: props.appId,
|
||||
appSecret: encrypt(createCode())
|
||||
})
|
||||
.then((res) => {
|
||||
loading.value = false;
|
||||
message.success(res.message);
|
||||
appSecret.value = String(res.data);
|
||||
// updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
pageAppUser({ appId: props.appId, role: 30 }).then((res) => {
|
||||
if (res?.list) {
|
||||
form.phone = res.list[0].phone;
|
||||
}
|
||||
});
|
||||
console.log(props.appId);
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 验证码 */
|
||||
.login-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-captcha {
|
||||
width: 102px;
|
||||
height: 33px;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
34
src/views/oa/app/detail/components/app-task-search.vue
Normal file
34
src/views/oa/app/detail/components/app-task-search.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<a-button
|
||||
@click="openNew(`/oa/task/add?appid=${data.appId}&appName=${data.appName}`)"
|
||||
>提交工单</a-button
|
||||
>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { TaskParam } from '@/api/oa/task/model';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { openNew } from '@/utils/common';
|
||||
import { App } from '@/api/oa/app/model';
|
||||
|
||||
defineProps<{
|
||||
data: App;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where: TaskParam): void;
|
||||
(e: 'remove'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where } = useSearch<TaskParam>({
|
||||
keywords: '',
|
||||
status: undefined,
|
||||
commander: undefined
|
||||
});
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
</script>
|
||||
298
src/views/oa/app/detail/components/app-task.vue
Normal file
298
src/views/oa/app/detail/components/app-task.vue
Normal file
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<div class="app-task">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="taskId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<AppTaskSearch :data="data" @search="reload" @remove="removeBatch" />
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'content'">
|
||||
<div class="user-box">
|
||||
<div class="user-info">
|
||||
<a-badge
|
||||
:dot="!record.isRead && record.userId != userStore.info?.userId"
|
||||
>
|
||||
<a-avatar :src="record.avatar" size="large" />
|
||||
</a-badge>
|
||||
</div>
|
||||
<div class="content" style="display: flex; flex-direction: column">
|
||||
<div class="nickname">
|
||||
<a-typography-text strong>
|
||||
{{ `${record.nickname}` }}
|
||||
</a-typography-text>
|
||||
<span class="ele-text-placeholder" style="padding-left: 10px">{{
|
||||
timeAgo(record.createTime)
|
||||
}}</span>
|
||||
</div>
|
||||
<a
|
||||
class="ele-text-heading"
|
||||
@click="openNew('/oa/task/detail/' + record.taskId)"
|
||||
>
|
||||
{{ `工单标题：${record.name}` }}
|
||||
</a>
|
||||
<div class="ele-text-placeholder">{{
|
||||
record.appId > 0 ? `项目名称：【${record.appName}】` : ''
|
||||
}}</div>
|
||||
<div
|
||||
class="ele-text-secondary"
|
||||
style="display: flex; align-items: center"
|
||||
>
|
||||
<a-avatar :size="18" :src="record.lastAvatar" />
|
||||
<div class="content" style="padding-left: 8px">
|
||||
{{ record.content }}
|
||||
</div>
|
||||
<span class="ele-text-placeholder" style="padding-left: 10px">{{
|
||||
timeAgo(record.updateTime)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="last-time ele-text-info"> </div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-tag v-if="record.progress === TOBEARRANGED" color="red"
|
||||
>待安排</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === PENDING" color="orange"
|
||||
>待处理</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === PROCESSING" color="purple"
|
||||
>处理中</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === TOBECONFIRMED" color="cyan"
|
||||
>待评价</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === COMPLETED" color="green"
|
||||
>已完成</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === CLOSED">已关闭</a-tag>
|
||||
<div class="ele-text-danger" v-if="record.overdueDays">
|
||||
已逾期{{ record.overdueDays }}天
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'progress'">
|
||||
<a-progress :percent="record.progress * 2" :steps="5" />
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="onDetail(record)">查看</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
title="确定要删除此记录吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref, watch } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { timeAgo } from 'ele-admin-pro';
|
||||
import { pageTask, removeTask, removeBatchTask } from '@/api/oa/task';
|
||||
import type { Task, TaskParam } from '@/api/oa/task/model';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import AppTaskSearch from './app-task-search.vue';
|
||||
import {
|
||||
CLOSED,
|
||||
COMPLETED,
|
||||
PENDING,
|
||||
PROCESSING,
|
||||
TOBEARRANGED,
|
||||
TOBECONFIRMED
|
||||
} from '@/api/oa/task/model/progress';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { openNew } from '@/utils/common';
|
||||
import { App } from '@/api/oa/app/model';
|
||||
|
||||
const props = defineProps<{
|
||||
appId: number | undefined;
|
||||
data: App;
|
||||
}>();
|
||||
|
||||
const userStore = useUserStore();
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
const selection = ref<any[]>();
|
||||
const status = ref<number>();
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
// 搜索条件
|
||||
// 工单发起人
|
||||
if (hasRole('promoter') || hasRole('user')) {
|
||||
where.commander = undefined;
|
||||
where.userId = userStore.info?.userId;
|
||||
}
|
||||
// 管理人员
|
||||
if (hasRole('superAdmin') || hasRole('admin')) {
|
||||
where.commander = undefined;
|
||||
}
|
||||
// 工单受理人员
|
||||
if (hasRole('commander')) {
|
||||
where.commander = userStore.info?.userId;
|
||||
}
|
||||
return pageTask({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<any[]>([
|
||||
{
|
||||
title: '工单号',
|
||||
dataIndex: 'taskId',
|
||||
align: 'center',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '工单类型',
|
||||
dataIndex: 'taskType',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '工单信息',
|
||||
dataIndex: 'content',
|
||||
key: 'content',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
width: 120
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: TaskParam) => {
|
||||
status.value = where?.status;
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
const onDetail = (record?: Task) => {
|
||||
window.location.href = 'detail?id=' + record?.taskId;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Task) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeTask(row.taskId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value?.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
if (selection.value?.length) {
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchTask(selection.value.map((d) => d.taskId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 是否展现多选按钮及批量删除按钮
|
||||
if (hasRole('superAdmin') || hasRole('admin')) {
|
||||
selection.value = [];
|
||||
}
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Task) => {
|
||||
return {
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
window.open('/oa/task/detail/' + record.taskId);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.appId,
|
||||
(appId) => {
|
||||
if (appId) {
|
||||
reload({ appId });
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'AppTaskIndex'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.user-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.last-time {
|
||||
margin-left: 12px;
|
||||
}
|
||||
.content {
|
||||
.text {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nickname {
|
||||
.ele-text-heading {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
157
src/views/oa/app/detail/components/app-url-edit.vue
Normal file
157
src/views/oa/app/detail/components/app-url-edit.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="1000"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑域名' : '添加域名'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{ md: { span: 2 }, sm: { span: 4 }, xs: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 21 }, sm: { span: 22 }, xs: { span: 24 } }"
|
||||
>
|
||||
<a-form-item label="客户端" name="name">
|
||||
<a-input allow-clear placeholder="PC端" v-model:value="form.name" />
|
||||
</a-form-item>
|
||||
<a-form-item label="访问域名" name="domain">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="http://10093.wsdns.cn"
|
||||
v-model:value="form.domain"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="账号" name="account">
|
||||
<a-input allow-clear placeholder="demo" v-model:value="form.account" />
|
||||
</a-form-item>
|
||||
<a-form-item label="密码" name="password">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="123456"
|
||||
v-model:value="form.password"
|
||||
/>
|
||||
</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-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { FormInstance } from 'ant-design-vue/es/form';
|
||||
import { AppUrl } from '@/api/oa/app/url/model';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { decrypt } from '@/utils/common';
|
||||
import { addAppUrl, updateAppUrl } from '@/api/oa/app/url';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
appId: number | null;
|
||||
// 修改回显的数据
|
||||
data?: AppUrl | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
const { form, resetFields, assignFields } = useFormData<AppUrl>({
|
||||
appUrlId: undefined,
|
||||
appId: undefined,
|
||||
name: '',
|
||||
domain: '',
|
||||
account: '',
|
||||
password: '',
|
||||
comments: '',
|
||||
status: 0,
|
||||
sortNumber: 0
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const data = {
|
||||
...form,
|
||||
appId: props.appId
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateAppUrl : addAppUrl;
|
||||
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) {
|
||||
const comments = decrypt(props.data.comments);
|
||||
assignFields(props.data);
|
||||
form.comments = comments;
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
13
src/views/oa/app/detail/components/app-url-search.vue
Normal file
13
src/views/oa/app/detail/components/app-url-search.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<a-button @click="add">添加</a-button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const emit = defineEmits<{
|
||||
(e: 'add'): void;
|
||||
}>();
|
||||
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
</script>
|
||||
202
src/views/oa/app/detail/components/app-url.vue
Normal file
202
src/views/oa/app/detail/components/app-url.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div class="app-task">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="taskId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<AppUrlSearch @add="openEdit" @remove="removeBatch" />
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'domain'">
|
||||
<a :href="record.domain" target="_blank">{{ record.domain }}</a>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a @click="moveUp(record)">上移<ArrowUpOutlined /></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>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
<!-- 编辑弹窗 -->
|
||||
<AppUrlEdit
|
||||
v-model:visible="showEdit"
|
||||
:app-id="data.appId"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref, watch } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import AppUrlSearch from './app-url-search.vue';
|
||||
import { App } from '@/api/oa/app/model';
|
||||
import AppUrlEdit from './app-url-edit.vue';
|
||||
import { AppUrl, AppUrlParam } from '@/api/oa/app/url/model';
|
||||
import {
|
||||
pageAppUrl,
|
||||
removeAppUrl,
|
||||
removeBatchAppUrl,
|
||||
updateAppUrl
|
||||
} from '@/api/oa/app/url';
|
||||
import { ArrowUpOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
const props = defineProps<{
|
||||
appId: any;
|
||||
data: App;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
const selection = ref<any[]>();
|
||||
// 当前编辑数据
|
||||
const current = ref<AppUrl | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
// 搜索条件
|
||||
where.appId = props.appId;
|
||||
return pageAppUrl({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<any[]>([
|
||||
{
|
||||
title: '客户端',
|
||||
dataIndex: 'name',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '访问域名',
|
||||
dataIndex: 'domain',
|
||||
key: 'domain',
|
||||
width: 280
|
||||
},
|
||||
{
|
||||
title: '账号',
|
||||
dataIndex: 'account',
|
||||
width: 280
|
||||
},
|
||||
{
|
||||
title: '密码',
|
||||
dataIndex: 'password',
|
||||
width: 280
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
key: 'comments',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
const moveUp = (row?: AppUrl) => {
|
||||
updateAppUrl({
|
||||
appUrlId: row?.appUrlId,
|
||||
sortNumber: Number(row?.sortNumber) - 1
|
||||
}).then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
});
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: AppUrl) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: AppUrlParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: AppUrl) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeAppUrl(row.appUrlId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value?.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
if (selection.value?.length) {
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchAppUrl(selection.value.map((d) => d.appUrlId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.appId,
|
||||
(appId) => {
|
||||
if (appId) {
|
||||
reload();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'AppUrlIndex'
|
||||
};
|
||||
</script>
|
||||
140
src/views/oa/app/detail/components/app-users.vue
Normal file
140
src/views/oa/app/detail/components/app-users.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<a-space style="margin-bottom: 20px">
|
||||
<SelectStaff
|
||||
v-if="hasRole('superAdmin') || hasRole('admin')"
|
||||
:placeholder="`添加开发成员`"
|
||||
@done="addAppDevUser"
|
||||
/>
|
||||
<SelectUser
|
||||
style="margin-left: 10px"
|
||||
v-if="hasRole('superAdmin') || hasRole('admin')"
|
||||
:placeholder="`添加体验成员`"
|
||||
@done="addAppExpUser"
|
||||
/>
|
||||
<a-button>邀请添加</a-button>
|
||||
</a-space>
|
||||
<div class="content">
|
||||
<table class="ele-table ele-table-border ele-table-stripe ele-table-medium">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>用户ID</th>
|
||||
<th>角色</th>
|
||||
<th>昵称</th>
|
||||
<th>加入时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(user, index) in userList" :key="index">
|
||||
<td>{{ user.userId }}</td>
|
||||
<td>
|
||||
<span v-if="user.role === 10">体验成员</span>
|
||||
<span v-if="user.role === 20">开发成员</span>
|
||||
<span v-if="user.role === 30" class="ele-text-danger">管理员</span>
|
||||
</td>
|
||||
<td>
|
||||
<span style="padding-left: 5px">{{ user.nickname }}</span>
|
||||
</td>
|
||||
<td>{{ user.createTime }}</td>
|
||||
<td>
|
||||
<div v-if="user.role !== 30">
|
||||
<a
|
||||
@click="removeUser(user)"
|
||||
v-if="hasRole('superAdmin') || hasRole('admin')"
|
||||
>
|
||||
移除
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { App } from '@/api/oa/app/model';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { AppUser } from '@/api/oa/app/user/model';
|
||||
import { addAppUser, pageAppUser, removeAppUser } from '@/api/oa/app/user';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
appId: any;
|
||||
data: App;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const userList = ref<AppUser[]>();
|
||||
|
||||
// 添加开发成员
|
||||
const addAppDevUser = (data: User) => {
|
||||
addAppUser({
|
||||
userId: data.userId,
|
||||
appId: props.data?.appId,
|
||||
role: 20
|
||||
})
|
||||
.then((msg) => {
|
||||
reload();
|
||||
message.success(msg);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 添加体验成员
|
||||
const addAppExpUser = (data: User) => {
|
||||
addAppUser({
|
||||
userId: data.userId,
|
||||
appId: props.data?.appId,
|
||||
role: 10
|
||||
})
|
||||
.then((msg) => {
|
||||
reload();
|
||||
message.success(msg);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 移除成员
|
||||
const removeUser = (data: AppUser) => {
|
||||
removeAppUser(data.appUserId)
|
||||
.then((msg) => {
|
||||
reload();
|
||||
message.success(msg);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
// 加载项目成员
|
||||
pageAppUser({ appId: props.appId }).then((res) => {
|
||||
if (res?.list) {
|
||||
userList.value = res.list;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.appId,
|
||||
(appId) => {
|
||||
if (appId) {
|
||||
reload();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
342
src/views/oa/app/detail/index.vue
Normal file
342
src/views/oa/app/detail/index.vue
Normal file
@@ -0,0 +1,342 @@
|
||||
<template>
|
||||
<a-page-header
|
||||
:title="title"
|
||||
:style="{ padding: screenWidth > 480 ? '16px 24px' : '0' }"
|
||||
@back="() => $router.go(-1)"
|
||||
>
|
||||
<a-spin :spinning="spinning">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{ paddingTop: '5px' }"
|
||||
v-if="isShow"
|
||||
>
|
||||
<a-tabs v-model:active-key="active" @change="onChange">
|
||||
<a-tab-pane tab="基本信息" key="base">
|
||||
<AppInfo
|
||||
:data="form"
|
||||
:appField="appField"
|
||||
:logo="logo"
|
||||
:app-qrcode="appQrcode"
|
||||
@done="reload"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane
|
||||
tab="成员管理"
|
||||
key="users"
|
||||
v-if="hasRole('superAdmin') || hasRole('admin')"
|
||||
>
|
||||
<AppUsers :app-id="appId" :data="form" @done="reload" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="项目参数" key="param">
|
||||
<AppFieldForm :app-id="appId" :data="form" @done="reload" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="账号密码" key="domain">
|
||||
<AppRulForm :app-id="appId" :data="form" @done="reload" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="协同文档" key="profile">
|
||||
<AppProfile :app-id="appId" :data="form" @done="reload" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="项目附件" key="annex">
|
||||
<AppAnnex :app-id="appId" :data="form" @done="reload" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="工单管理" key="task">
|
||||
<AppTask :appId="form.appId" :data="form" @done="reload" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="应用截图" key="photo">
|
||||
<AppPhoto
|
||||
:appId="form.appId"
|
||||
:data="form"
|
||||
:images="images"
|
||||
@done="reload"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="项目介绍" key="about">
|
||||
<AppAbout :appId="form.appId" :data="form" @done="reload" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane
|
||||
tab="续费明细"
|
||||
key="renew"
|
||||
v-if="hasRole('superAdmin') || hasRole('admin')"
|
||||
>
|
||||
<AppRenew
|
||||
:app-id="form.appId"
|
||||
:companyId="form?.companyId"
|
||||
:editStatus="false"
|
||||
@done="reload"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
<a-card v-else :bordered="false">
|
||||
<div style="max-width: 960px; margin: 0 auto">
|
||||
<a-result
|
||||
status="error"
|
||||
title="无查看权限"
|
||||
sub-title="请先添加为项目成员"
|
||||
>
|
||||
<template #extra>
|
||||
<a-space size="middle">
|
||||
<a-button type="primary" @click="openUrl('/oa/app/index')"
|
||||
>返回</a-button
|
||||
>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-spin>
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, unref, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import AppInfo from './components/app-info.vue';
|
||||
import AppUsers from './components/app-users.vue';
|
||||
import AppProfile from './components/app-profile.vue';
|
||||
import AppTask from './components/app-task.vue';
|
||||
import AppPhoto from './components/app-photo.vue';
|
||||
import AppAbout from './components/app-about.vue';
|
||||
import AppAnnex from './components/app-annex.vue';
|
||||
import AppRenew from './components/app-nenew.vue';
|
||||
import AppFieldForm from './components/app-field.vue';
|
||||
import AppRulForm from './components/app-url.vue';
|
||||
import { getApp } from '@/api/oa/app';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { App } from '@/api/oa/app/model';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { setPageTabTitle } from '@/utils/page-tab-util';
|
||||
import { pageAppField } from '@/api/oa/app/field';
|
||||
import { AppField } from '@/api/oa/app/field/model';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import { pageAppUser } from '@/api/oa/app/user';
|
||||
import { uuid } from 'ele-admin-pro';
|
||||
|
||||
const { currentRoute } = useRouter();
|
||||
// 当前选项卡
|
||||
const active = ref('base');
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { screenWidth, tabs } = storeToRefs(themeStore);
|
||||
console.log(tabs.value);
|
||||
const title = ref('项目名称');
|
||||
const spinning = ref(true);
|
||||
const isShow = ref(true);
|
||||
const logo = ref<any[]>([]);
|
||||
const appId = ref<number>(0);
|
||||
const appQrcode = ref<any[]>([]);
|
||||
const images = ref<ItemType[]>([]);
|
||||
const appField = ref<AppField[]>();
|
||||
|
||||
// 应用信息
|
||||
const { form, assignFields, resetFields } = useFormData<App>({
|
||||
// 应用id
|
||||
appId: undefined,
|
||||
// 应用秘钥
|
||||
appSecret: '',
|
||||
enName: '',
|
||||
// 应用名称
|
||||
appName: '',
|
||||
// 上级id, 0是顶级
|
||||
parentId: undefined,
|
||||
// 应用编号
|
||||
appCode: '',
|
||||
// 应用图标
|
||||
appIcon: '',
|
||||
appQrcode: '',
|
||||
// 应用截图
|
||||
images: '',
|
||||
// 应用类型
|
||||
appType: '',
|
||||
appTypeMultiple: undefined,
|
||||
// 菜单类型
|
||||
menuType: undefined,
|
||||
// 应用地址
|
||||
appUrl: '',
|
||||
// 后台管理地址
|
||||
adminUrl: undefined,
|
||||
// 下载地址
|
||||
downUrl: undefined,
|
||||
serverUrl: undefined,
|
||||
callbackUrl: undefined,
|
||||
gitUrl: undefined,
|
||||
docsUrl: undefined,
|
||||
prototypeUrl: undefined,
|
||||
ipAddress: undefined,
|
||||
fileUrl: undefined,
|
||||
// 应用包名
|
||||
packageName: '',
|
||||
// 点击次数
|
||||
clicks: '',
|
||||
// 安装次数
|
||||
installs: '',
|
||||
// 项目介绍
|
||||
content: '',
|
||||
// 开发者(个人)
|
||||
developer: '',
|
||||
director: '',
|
||||
projectDirector: '',
|
||||
salesman: '',
|
||||
// 软件定价
|
||||
price: '',
|
||||
// 评分
|
||||
score: '',
|
||||
// 星级
|
||||
star: '',
|
||||
// 菜单组件地址
|
||||
component: '',
|
||||
// 菜单路由地址
|
||||
path: '',
|
||||
// 权限标识
|
||||
authority: '',
|
||||
// 打开位置
|
||||
target: '',
|
||||
// 是否隐藏, 0否, 1是(仅注册路由不显示在左侧菜单)
|
||||
hide: undefined,
|
||||
// 菜单侧栏选中的path
|
||||
active: '',
|
||||
// 其它路由元信息
|
||||
meta: '',
|
||||
// 版本
|
||||
edition: '',
|
||||
// 版本号
|
||||
version: '',
|
||||
// 是否已安装
|
||||
isUse: undefined,
|
||||
// 排序
|
||||
sortNumber: undefined,
|
||||
// 备注
|
||||
comments: '',
|
||||
tenantName: '',
|
||||
companyName: '',
|
||||
// 租户编号
|
||||
tenantCode: '',
|
||||
// 租户id
|
||||
tenantId: undefined,
|
||||
// 创建时间
|
||||
createTime: '',
|
||||
appStatus: '开发中',
|
||||
// 状态
|
||||
status: undefined,
|
||||
// 发布者
|
||||
userId: '',
|
||||
// 发布者昵称
|
||||
nickname: '',
|
||||
// 子菜单
|
||||
children: [],
|
||||
// 权限树回显选中状态, 0未选中, 1选中
|
||||
checked: false,
|
||||
//
|
||||
key: undefined,
|
||||
//
|
||||
value: undefined,
|
||||
//
|
||||
parentIds: [],
|
||||
//
|
||||
openType: undefined,
|
||||
//
|
||||
search: undefined,
|
||||
// 成员管理
|
||||
users: [],
|
||||
// 项目需求
|
||||
requirement: '',
|
||||
file1: '[]',
|
||||
file2: '[]',
|
||||
file3: '[]',
|
||||
showCase: undefined,
|
||||
showIndex: undefined,
|
||||
recommend: undefined
|
||||
});
|
||||
|
||||
const onChange = () => {
|
||||
// reload();
|
||||
};
|
||||
|
||||
/**
|
||||
* 加载数据
|
||||
*/
|
||||
const reload = () => {
|
||||
resetFields();
|
||||
logo.value = [];
|
||||
appQrcode.value = [];
|
||||
images.value = [];
|
||||
appField.value = [];
|
||||
assignFields({});
|
||||
// 加载项目详情
|
||||
getApp(appId.value)
|
||||
.then((data) => {
|
||||
if (data.appName) {
|
||||
title.value = data.appName;
|
||||
// 修改页签标题
|
||||
setPageTabTitle(data.appName);
|
||||
}
|
||||
if (data.appIcon) {
|
||||
logo.value.push({
|
||||
uid: data.appId,
|
||||
url: data.appIcon,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
if (data.appQrcode) {
|
||||
const split = data.appQrcode.split('|||');
|
||||
split.map((url) => {
|
||||
appQrcode.value.push({
|
||||
uid: uuid(),
|
||||
url: url,
|
||||
status: 'done'
|
||||
});
|
||||
});
|
||||
}
|
||||
if (data.images) {
|
||||
const arr = JSON.parse(data.images);
|
||||
arr.map((d, i) => {
|
||||
images.value.push({
|
||||
uid: d.uid,
|
||||
url: d.url,
|
||||
status: 'done'
|
||||
});
|
||||
});
|
||||
}
|
||||
isShow.value = true;
|
||||
spinning.value = false;
|
||||
assignFields(data);
|
||||
})
|
||||
.catch((err) => {
|
||||
isShow.value = false;
|
||||
spinning.value = false;
|
||||
});
|
||||
// 加载项目参数
|
||||
pageAppField({ appId: appId.value, limit: 50 }).then((res) => {
|
||||
appField.value = res?.list;
|
||||
form.fields = res?.list;
|
||||
});
|
||||
// 加载项目成员
|
||||
pageAppUser({ appId: appId.value }).then((res) => {
|
||||
if (res?.list) {
|
||||
form.users = res.list;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
currentRoute,
|
||||
(route) => {
|
||||
const { params } = unref(route);
|
||||
const { id } = params;
|
||||
if (id) {
|
||||
appId.value = Number(id);
|
||||
}
|
||||
reload();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'AppDetail'
|
||||
};
|
||||
</script>
|
||||
178
src/views/oa/app/dict/components/dict-edit.vue
Normal file
178
src/views/oa/app/dict/components/dict-edit.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<!-- 分类编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="460"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate ? '修改分类' : '添加分类'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="分类标识" name="dictCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
disabled
|
||||
placeholder="请输入分类标识"
|
||||
v-model:value="form.dictCode"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="分类名称" name="dictDataName">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入分类名称"
|
||||
v-model:value="form.dictDataName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sortNumber">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="99999"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入排序号"
|
||||
v-model:value="form.sortNumber"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入备注"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { addDictData, updateDictData } from '@/api/system/dict-data';
|
||||
import { DictData } from '@/api/system/dict-data/model';
|
||||
import {removeSiteInfoCache} from "@/api/cms/website";
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: DictData | null;
|
||||
// 字典ID
|
||||
dictId?: number | 0;
|
||||
}>();
|
||||
|
||||
//
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<DictData>({
|
||||
dictId: undefined,
|
||||
dictDataId: undefined,
|
||||
dictDataName: '',
|
||||
dictCode: 'appType',
|
||||
dictDataCode: '',
|
||||
sortNumber: 100,
|
||||
comments: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
dictDataCode: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入分类名称',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
dictCode: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入分类标识',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const saveOrUpdate = isUpdate.value ? updateDictData : addDictData;
|
||||
form.dictDataCode = form.dictDataName;
|
||||
form.dictId = props.dictId;
|
||||
saveOrUpdate(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
// 清除字典缓存
|
||||
removeSiteInfoCache(form.dictCode + ':' + form.tenantId);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignFields(props.data);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
223
src/views/oa/app/dict/index.vue
Normal file
223
src/views/oa/app/dict/index.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="dictDataId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
:scroll="{ x: 800 }"
|
||||
cache-key="appDictTable"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button type="primary" class="ele-btn-icon" @click="openEdit()">
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="removeBatch"
|
||||
>
|
||||
<template #icon>
|
||||
<delete-outlined />
|
||||
</template>
|
||||
<span>删除</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="openEdit(record)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
placement="topRight"
|
||||
title="确定要删除此分类吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<dict-edit
|
||||
v-model:visible="showEdit"
|
||||
:dictId="dictId"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue/es';
|
||||
import {
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { messageLoading } from 'ele-admin-pro/es';
|
||||
import DictEdit from './components/dict-edit.vue';
|
||||
import {
|
||||
pageDictData,
|
||||
removeDictData,
|
||||
removeDictDataBatch
|
||||
} from '@/api/system/dict-data';
|
||||
import { DictParam } from '@/api/system/dict/model';
|
||||
import { DictData } from '@/api/system/dict-data/model';
|
||||
import { addDict, listDictionaries } from '@/api/system/dict';
|
||||
import { Dictionary } from '@/api/system/dictionary/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
const dictId = ref(0);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'dictDataId',
|
||||
width: 80,
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: '分类名称',
|
||||
dataIndex: 'dictDataName',
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '排序号',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'sortNumber'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
align: 'center'
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<DictData[]>([]);
|
||||
|
||||
// 当前编辑数据
|
||||
const current = ref<Dictionary | null>(null);
|
||||
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
where.dictCode = 'appType';
|
||||
return pageDictData({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: DictParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: DictData) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: DictData) => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeDictData(row.dictDataId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的分类吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeDictDataBatch(selection.value.map((d) => d.dictDataId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化字典
|
||||
const loadDict = () => {
|
||||
listDictionaries({ dictCode: 'appType' }).then(async (data) => {
|
||||
if (data?.length == 0) {
|
||||
await addDict({ dictCode: 'appType', dictName: '链接分类' });
|
||||
}
|
||||
await listDictionaries({ dictCode: 'appType' }).then((list) => {
|
||||
list?.map((d) => {
|
||||
dictId.value = Number(d.dictId);
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
loadDict();
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: DictData) => {
|
||||
return {
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'TaskDictData'
|
||||
};
|
||||
</script>
|
||||
477
src/views/oa/app/index.vue
Normal file
477
src/views/oa/app/index.vue
Normal file
@@ -0,0 +1,477 @@
|
||||
<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 === 'companyName'">
|
||||
<div class="app-box">
|
||||
<a-image
|
||||
:height="45"
|
||||
:width="45"
|
||||
:preview="false"
|
||||
:src="record.companyLogo"
|
||||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
|
||||
/>
|
||||
<div class="app-info">
|
||||
<span class="ele-text-heading">
|
||||
{{ record.shortName }}
|
||||
</span>
|
||||
<span class="ele-text-placeholder">
|
||||
{{ record.companyName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'appName'">
|
||||
<div class="app-box">
|
||||
<a-image
|
||||
:height="45"
|
||||
:width="45"
|
||||
:preview="false"
|
||||
:src="record.appIcon"
|
||||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
|
||||
/>
|
||||
<div class="app-info">
|
||||
<a
|
||||
class="ele-text-heading"
|
||||
@click="openUrl('/oa/app/detail/' + record.appId)"
|
||||
>
|
||||
{{ record.appName }}
|
||||
</a>
|
||||
<span class="ele-text-placeholder">
|
||||
{{ record.appCode }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'appCode'">
|
||||
<span>{{ 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 class="ele-text-heading" @click="openUrl(record.appUrl)"
|
||||
>前往</a
|
||||
>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'appTypeMultiple'">
|
||||
<a-space
|
||||
:size="2"
|
||||
direction="vertical"
|
||||
v-if="record.appTypeMultiple"
|
||||
>
|
||||
<template
|
||||
v-for="(item, index) in JSON.parse(record.appTypeMultiple)"
|
||||
:key="index"
|
||||
>
|
||||
<span v-if="index == 0">{{ item }}</span>
|
||||
</template>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-if="column.key === 'expirationTime'">
|
||||
<template v-if="expirationTime(record.expirationTime) < 30">
|
||||
<a-space>
|
||||
<span class="ele-text-danger">{{
|
||||
toDateString(record.expirationTime, 'yyyy-MM-dd')
|
||||
}}</span>
|
||||
<span class="ele-text-placeholder"
|
||||
>(剩余{{ expirationTime(record.expirationTime) }}天)</span
|
||||
>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ toDateString(record.expirationTime, 'yyyy-MM-dd') }}
|
||||
</template>
|
||||
</template>
|
||||
<!-- <template v-if="column.key === 'appQrcode'">-->
|
||||
<!-- <a-image-->
|
||||
<!-- v-if="record.appQrcode"-->
|
||||
<!-- :height="50"-->
|
||||
<!-- :width="50"-->
|
||||
<!-- :src="record.appQrcode"-->
|
||||
<!-- />-->
|
||||
<!-- </template>-->
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="moveUp(record)">上移<ArrowUpOutlined /></a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click="openUrl('/oa/app/detail/' + record.appId)">管理</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>
|
||||
</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 {
|
||||
ArrowUpOutlined,
|
||||
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 {
|
||||
pageApp,
|
||||
removeBatchApp,
|
||||
removeApp,
|
||||
getCount,
|
||||
updateApp
|
||||
} from '@/api/oa/app';
|
||||
import { App, AppParam } from '@/api/oa/app/model';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
|
||||
defineProps<{
|
||||
activeKey?: boolean;
|
||||
data?: any;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'appId',
|
||||
width: 80,
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: '租户ID',
|
||||
dataIndex: 'tenantCode',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '项目名称',
|
||||
dataIndex: 'appName',
|
||||
key: 'appName'
|
||||
},
|
||||
{
|
||||
title: '项目类型',
|
||||
dataIndex: 'appTypeMultiple',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
key: 'appTypeMultiple'
|
||||
},
|
||||
// {
|
||||
// title: '二维码',
|
||||
// dataIndex: 'appQrcode',
|
||||
// width: 120,
|
||||
// align: 'center',
|
||||
// key: 'appQrcode'
|
||||
// customRender: ({ text }) => {
|
||||
// if (text) {
|
||||
// const split = text.split('|||');
|
||||
// console.log(split[0]);
|
||||
// return split[0];
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// title: '到期时间',
|
||||
// dataIndex: 'expirationTime',
|
||||
// key: 'expirationTime',
|
||||
// sorter: true
|
||||
// },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'appStatus',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
key: 'appStatus'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
sorter: true,
|
||||
customRender: ({ text }) => toDateString(text, 'MM-dd')
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortNumber',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<App[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<App | null>(null);
|
||||
// 是否显示资产详情
|
||||
// const showInfo = ref(false);
|
||||
const active = ref<any>('开发中');
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示高级搜索
|
||||
const showAdvancedSearch = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
// 默认类型
|
||||
if (where.keywords == undefined) {
|
||||
where.appStatus = '开发中';
|
||||
where.showExpiration = undefined;
|
||||
}
|
||||
if (where.appStatus == '未签续费') {
|
||||
where.appStatus = '已上架';
|
||||
where.showExpiration = false;
|
||||
where.sort = 'expirationTime';
|
||||
where.order = 'asc';
|
||||
}
|
||||
return pageApp({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: AppParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
// const onTab = (type: any) => {
|
||||
// active.value = type;
|
||||
// reload({ keywords: '', appStatus: active.value });
|
||||
// };
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: App) => {
|
||||
// openUrl('/oa/app/detail/' + row?.appId);
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
const expirationTime = (dateTime) => {
|
||||
const now = new Date().getTime();
|
||||
const expiration = new Date(dateTime).getTime();
|
||||
const mss = expiration - now;
|
||||
let days = Math.floor(mss / (1000 * 60 * 60 * 24));
|
||||
let hours = Math.floor((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));
|
||||
let seconds = Math.round((mss % (1000 * 60)) / 1000);
|
||||
return days;
|
||||
};
|
||||
|
||||
/* 打开高级搜索 */
|
||||
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 moveUp = (row?: App) => {
|
||||
updateApp({
|
||||
appId: row?.appId,
|
||||
sortNumber: Number(row?.sortNumber) - 1
|
||||
}).then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
});
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: App) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openUrl('/oa/app/detail/' + record.appId);
|
||||
// window.open('/oa/app/detail/' + record.appId);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 统计数据
|
||||
const conut = ref({
|
||||
totalNum: 0,
|
||||
totalNum2: 0,
|
||||
totalNum3: 0,
|
||||
totalNum4: 0,
|
||||
totalNum5: 0
|
||||
});
|
||||
getCount().then((data: any) => {
|
||||
conut.value = data;
|
||||
});
|
||||
|
||||
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: 5px;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.count {
|
||||
display: flex;
|
||||
.btn {
|
||||
margin: 0 12px;
|
||||
padding: 5px 16px;
|
||||
background-color: #f3f3f3;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
.divider {
|
||||
width: 4px;
|
||||
height: 14px;
|
||||
border-radius: 8px;
|
||||
margin-right: 8px;
|
||||
background-color: #c9c9c9;
|
||||
}
|
||||
.divider-active {
|
||||
width: 4px;
|
||||
height: 14px;
|
||||
border-radius: 8px;
|
||||
margin-right: 8px;
|
||||
background-color: #16a90b;
|
||||
}
|
||||
.active {
|
||||
color: #16a90b;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
379
src/views/oa/app/renew/components/app-edit.vue
Normal file
379
src/views/oa/app/renew/components/app-edit.vue
Normal file
@@ -0,0 +1,379 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="84%"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '续费管理' : '续费管理'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
:footer="null"
|
||||
>
|
||||
<div style="background-color: #f3f3f3; padding: 8px">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
|
||||
>
|
||||
<a-card title="基本信息" :bordered="false">
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<div class="upload-image">
|
||||
<ele-image-upload
|
||||
v-model:value="logo"
|
||||
:item-style="{ width: '90px', height: '90px' }"
|
||||
:limit="1"
|
||||
:disabled="!editStatus"
|
||||
/>
|
||||
<ele-image-upload
|
||||
v-model:value="appQrcode"
|
||||
:item-style="{ width: '90px', height: '90px' }"
|
||||
:limit="1"
|
||||
:disabled="!editStatus"
|
||||
/>
|
||||
</div>
|
||||
<a-form-item label="AppId" name="appId">
|
||||
<span>{{ form.appId }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="AppSecret" name="appSecret">
|
||||
<span style="margin-right: 10px">********</span>
|
||||
<a-space>
|
||||
<a @click="onAppSecret(form.appId)">查看</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click="onUpdateAppSecret(form.appId)">重置</a>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="应用名称" name="appName">
|
||||
<a-input
|
||||
allow-clear
|
||||
v-if="editStatus"
|
||||
placeholder="请输入应用名称"
|
||||
v-model:value="form.appName"
|
||||
/>
|
||||
<span v-else>{{ form.appName }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="企业名称" name="companyName">
|
||||
<SelectCompany
|
||||
:placeholder="`所属企业`"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.companyName"
|
||||
@done="chooseCompanyName"
|
||||
/>
|
||||
<span v-else>{{ form.companyName }}</span>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="开发者单位" name="developer">-->
|
||||
<!-- <SelectCompany-->
|
||||
<!-- :placeholder="`请选择开发者企业`"-->
|
||||
<!-- v-if="editStatus"-->
|
||||
<!-- v-model:value="form.developer"-->
|
||||
<!-- @done="chooseDeveloper"-->
|
||||
<!-- />-->
|
||||
<!-- <span v-else>{{ form.developer }}</span>-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item label="应用地址" name="appUrl">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入应用地址"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.appUrl"
|
||||
/>
|
||||
<span v-else>{{ form.appUrl }}</span>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="后台管理" name="adminUrl">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入后台管理地址"-->
|
||||
<!-- v-if="editStatus"-->
|
||||
<!-- v-model:value="form.adminUrl"-->
|
||||
<!-- />-->
|
||||
<!-- <span v-else>{{ form.adminUrl }}</span>-->
|
||||
<!-- </a-form-item>-->
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="应用状态" name="appStatus">
|
||||
<DictSelect
|
||||
dict-code="appstoreStatus"
|
||||
placeholder="请选择应用状态"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.appStatus"
|
||||
/>
|
||||
<template v-else>
|
||||
<a-tag v-if="form.appStatus == '开发中'" color="red">{{
|
||||
form.appStatus
|
||||
}}</a-tag>
|
||||
<a-tag v-if="form.appStatus == '已上架'" color="green">{{
|
||||
form.appStatus
|
||||
}}</a-tag>
|
||||
</template>
|
||||
</a-form-item>
|
||||
<a-form-item label="应用类型" name="appTypeMultiple">
|
||||
<DictSelectMultiple
|
||||
dict-code="AppTypeMultiple"
|
||||
placeholder="请选择应用类型"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.appTypeMultiple"
|
||||
/>
|
||||
<template v-else>
|
||||
<a-tag
|
||||
v-for="(item, index) in form.appTypeMultiple"
|
||||
:key="index"
|
||||
>{{ item }}</a-tag
|
||||
>
|
||||
</template>
|
||||
</a-form-item>
|
||||
<a-form-item label="应用描述" name="comments">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入应用描述"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
<div v-else v-html="form.comments"></div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<template v-if="hasRole('superAdmin') || hasRole('admin')">
|
||||
<a-divider style="height: 8px" />
|
||||
<RenewList
|
||||
:app-id="data?.appId"
|
||||
:companyId="data?.companyId"
|
||||
:editStatus="editStatus"
|
||||
/>
|
||||
</template>
|
||||
</a-form>
|
||||
</div>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import type { App } from '@/api/oa/app/model';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { FormInstance } from 'ant-design-vue/es/form';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { pageCompany } from '@/api/system/company';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import RenewList from './renew-list.vue';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: App | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
// 当期时间
|
||||
const editStatus = ref(false);
|
||||
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<App>({
|
||||
// 应用id
|
||||
appId: undefined,
|
||||
// 应用秘钥
|
||||
appSecret: '',
|
||||
enName: '',
|
||||
// 应用名称
|
||||
appName: '',
|
||||
// 上级id, 0是顶级
|
||||
parentId: undefined,
|
||||
// 应用编号
|
||||
appCode: '',
|
||||
// 应用图标
|
||||
appIcon: '',
|
||||
appQrcode: '',
|
||||
// 应用截图
|
||||
images: '',
|
||||
// 应用类型
|
||||
appType: '',
|
||||
appTypeMultiple: undefined,
|
||||
// 菜单类型
|
||||
menuType: undefined,
|
||||
// 应用地址
|
||||
appUrl: '',
|
||||
// 后台管理地址
|
||||
adminUrl: undefined,
|
||||
// 下载地址
|
||||
downUrl: undefined,
|
||||
serverUrl: undefined,
|
||||
callbackUrl: undefined,
|
||||
gitUrl: undefined,
|
||||
docsUrl: undefined,
|
||||
prototypeUrl: undefined,
|
||||
ipAddress: undefined,
|
||||
fileUrl: undefined,
|
||||
// 应用包名
|
||||
packageName: '',
|
||||
// 点击次数
|
||||
clicks: '',
|
||||
// 安装次数
|
||||
installs: '',
|
||||
// 项目介绍
|
||||
content: '',
|
||||
// 开发者(个人)
|
||||
developer: '',
|
||||
director: '',
|
||||
projectDirector: '',
|
||||
salesman: '',
|
||||
// 软件定价
|
||||
price: '',
|
||||
// 评分
|
||||
score: '',
|
||||
// 星级
|
||||
star: '',
|
||||
// 菜单组件地址
|
||||
component: '',
|
||||
// 菜单路由地址
|
||||
path: '',
|
||||
// 权限标识
|
||||
authority: '',
|
||||
// 打开位置
|
||||
target: '',
|
||||
// 是否隐藏, 0否, 1是(仅注册路由不显示在左侧菜单)
|
||||
hide: undefined,
|
||||
// 菜单侧栏选中的path
|
||||
active: '',
|
||||
// 其它路由元信息
|
||||
meta: '',
|
||||
// 版本
|
||||
edition: '',
|
||||
// 版本号
|
||||
version: '',
|
||||
// 是否已安装
|
||||
isUse: undefined,
|
||||
// 排序
|
||||
sortNumber: undefined,
|
||||
// 备注
|
||||
comments: undefined,
|
||||
tenantName: '',
|
||||
companyName: '',
|
||||
// 租户编号
|
||||
tenantCode: '',
|
||||
// 租户id
|
||||
tenantId: undefined,
|
||||
// 创建时间
|
||||
createTime: '',
|
||||
appStatus: '开发中',
|
||||
// 状态
|
||||
status: undefined,
|
||||
// 发布者
|
||||
userId: '',
|
||||
// 发布者昵称
|
||||
nickname: '',
|
||||
// 子菜单
|
||||
children: [],
|
||||
// 权限树回显选中状态, 0未选中, 1选中
|
||||
checked: false,
|
||||
//
|
||||
key: undefined,
|
||||
//
|
||||
value: undefined,
|
||||
//
|
||||
parentIds: [],
|
||||
//
|
||||
openType: undefined,
|
||||
//
|
||||
search: undefined,
|
||||
// 成员管理
|
||||
users: [],
|
||||
// 项目需求
|
||||
requirement: ''
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const handleEditStatus = () => {
|
||||
editStatus.value = !editStatus.value;
|
||||
};
|
||||
|
||||
// 查看秘钥
|
||||
const onAppSecret = () => {};
|
||||
// 重置秘钥
|
||||
const onUpdateAppSecret = () => {};
|
||||
|
||||
const reload = () => {
|
||||
loading.value = true;
|
||||
// 加载企业信息
|
||||
const companyId = props.data?.companyId;
|
||||
pageCompany({ companyId }).then((res) => {
|
||||
form.tenantId = undefined;
|
||||
const list = res?.list;
|
||||
if (list && list.length > 0) {
|
||||
form.tenantId = list[0].tenantId;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
console.log(visible);
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
if (props.data.appTypeMultiple) {
|
||||
form.appTypeMultiple = JSON.parse(props.data.appTypeMultiple);
|
||||
}
|
||||
reload();
|
||||
} else {
|
||||
editStatus.value = true;
|
||||
isUpdate.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
</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>
|
||||
302
src/views/oa/app/renew/components/renew-list.vue
Normal file
302
src/views/oa/app/renew/components/renew-list.vue
Normal file
@@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<a-card
|
||||
title="续费明细"
|
||||
:bordered="false"
|
||||
>
|
||||
<template #extra>
|
||||
<a-button @click="addRecord">添加</a-button>
|
||||
</template>
|
||||
<div class="content">
|
||||
<table
|
||||
class="ele-table ele-table-border ele-table-stripe ele-table-medium"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>开始时间</th>
|
||||
<th>到期时间</th>
|
||||
<th>续费金额</th>
|
||||
<th>缴费状态</th>
|
||||
<th width="320">描述</th>
|
||||
<th width="180">附件</th>
|
||||
<th style="text-align: center">操作人</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="(item, index) in list" :key="index">
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-date-picker
|
||||
placeholder="开始日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model:value="item.startTime"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ toDateString(item.startTime, 'yyyy-MM-dd') }}
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-date-picker
|
||||
placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model:value="item.endTime"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ toDateString(item.endTime, 'yyyy-MM-dd') }}
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="999999"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入续费金额"
|
||||
v-model:value="item.money"
|
||||
/>
|
||||
</template>
|
||||
<template v-else> ￥{{ item.money }} </template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-select placeholder="请选择" v-model:value="item.status">
|
||||
<a-select-option :value="1">已缴费</a-select-option>
|
||||
<a-select-option :value="0">未缴费</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="item.status == 1">已缴费</span>
|
||||
<span v-if="item.status == 0">未缴费</span>
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-input
|
||||
class="ele-fluid"
|
||||
placeholder="请输入描述内容"
|
||||
v-model:value="item.comments"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="comments">{{ item.comments }}</div>
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<a-upload
|
||||
v-if="item.editStatus"
|
||||
v-model:file-list="item.files"
|
||||
class="upload-list-inline"
|
||||
:maxCount="1"
|
||||
list-type="picture"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<a-button>
|
||||
上传附件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<div v-else class="files">
|
||||
<a-upload
|
||||
disabled
|
||||
v-model:file-list="item.files"
|
||||
class="upload-list-inline"
|
||||
>
|
||||
</a-upload>
|
||||
</div>
|
||||
</td>
|
||||
<td style="text-align: center">
|
||||
<template v-if="!item.editStatus">
|
||||
<a-space>
|
||||
{{ item.nickname }}
|
||||
<a-popconfirm title="确定要删除此记录吗？" v-if="hasRole('superAdmin')" @confirm="removeRel(index)">
|
||||
<a class="ele-text-info">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-space>
|
||||
<a @click="save(item, index)">保存</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="确定要删除此记录吗？" @confirm="remove(index)">
|
||||
<a class="ele-text-info">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { ref, watch } from 'vue';
|
||||
import { addAppRenew, pageAppRenew, removeAppRenew, updateAppRenew } from "@/api/oa/app/renew";
|
||||
import { AppRenew } from '@/api/oa/app/renew/model';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
|
||||
import { uploadOss } from "@/api/system/file";
|
||||
import { isImage } from "@/utils/common";
|
||||
import { UploadOutlined } from "@ant-design/icons-vue";
|
||||
import rect from "zrender/src/graphic/shape/Rect";
|
||||
|
||||
const props = defineProps<{
|
||||
editStatus?: boolean;
|
||||
appId?: number;
|
||||
companyId?: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
interface fileItem {
|
||||
uid?: number,
|
||||
url?: string,
|
||||
name?: string,
|
||||
status?: string | "done"
|
||||
}
|
||||
|
||||
const userStore = useUserStore();
|
||||
const list = ref<AppRenew[]>([]);
|
||||
const files = ref<fileItem[]>([]);
|
||||
const showUploadBtn = ref(false);
|
||||
|
||||
const addRecord = () => {
|
||||
list.value.unshift({
|
||||
appRenewId: undefined,
|
||||
money: undefined,
|
||||
comments: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
nickname: undefined,
|
||||
status: 1,
|
||||
images: undefined,
|
||||
files: undefined,
|
||||
editStatus: true
|
||||
});
|
||||
};
|
||||
|
||||
// 文件上传事件
|
||||
const beforeUpload = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
}
|
||||
if (!file.type.startsWith("image")) {
|
||||
if (file.size / 1024 / 1024 > 100) {
|
||||
message.error("大小不能超过 100MB");
|
||||
return;
|
||||
}
|
||||
}
|
||||
onUpload(item);
|
||||
return false;
|
||||
};
|
||||
|
||||
const onUpload = (d: ItemType) => {
|
||||
uploadOss(<File>d.file)
|
||||
.then((result) => {
|
||||
files.value.push({
|
||||
uid: result.id,
|
||||
url: result.path,
|
||||
name: isImage(result.path) ? 'image' : result.name,
|
||||
status: "done"
|
||||
});
|
||||
message.success("上传成功");
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const remove = (index: number) => {
|
||||
list.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const removeRel = (index: number) => {
|
||||
removeAppRenew(list.value[index].appRenewId).then(() => {
|
||||
list.value.splice(index, 1);
|
||||
message.success('删除成功')
|
||||
})
|
||||
}
|
||||
|
||||
const openEdit = (index: number) => {
|
||||
list.value[index].editStatus = true
|
||||
}
|
||||
|
||||
const save = (item: AppRenew, index: number) => {
|
||||
|
||||
item.appId = props.appId;
|
||||
item.companyId = props.companyId;
|
||||
item.startTime = item.startTime ? item.startTime + ' 00:00:00' : '';
|
||||
item.endTime = item.endTime ? item.endTime + ' 23:59:59' : '';
|
||||
item.nickname = userStore.info?.nickname;
|
||||
item.userId = userStore.info?.userId;
|
||||
if (item.money == undefined || item.money == 0) {
|
||||
message.error('请填写金额');
|
||||
return false;
|
||||
}
|
||||
if(files.value && files.value.length > 0){
|
||||
item.images = JSON.stringify(files.value)
|
||||
}
|
||||
list.value[index].editStatus = false;
|
||||
addAppRenew(item).then(() => {
|
||||
message.success('保存成功');
|
||||
reload();
|
||||
});
|
||||
// if (item.appRenewId) {
|
||||
// if(item.images.length > 0){
|
||||
// list.value[index].images = JSON.parse(list.value[index].images)
|
||||
// }
|
||||
// updateAppRenew(item).then(() => {
|
||||
// message.success('更新成功');
|
||||
// })
|
||||
// }else {
|
||||
// addAppRenew(item).then(() => {
|
||||
// message.success('保存成功');
|
||||
// });
|
||||
// }
|
||||
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
pageAppRenew({ appId: props.appId }).then((res) => {
|
||||
files.value = [];
|
||||
if (res?.list) {
|
||||
list.value = res?.list.map((d) => {
|
||||
d.editStatus = false;
|
||||
if(d.images){
|
||||
d.files = JSON.parse(d.images);
|
||||
}else{
|
||||
d.files = [];
|
||||
}
|
||||
return d;
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.appId,
|
||||
(options) => {
|
||||
if (options) {
|
||||
reload();
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
100
src/views/oa/app/renew/components/search.vue
Normal file
100
src/views/oa/app/renew/components/search.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<!-- <SelectCompany-->
|
||||
<!-- :placeholder="`按企业筛选`"-->
|
||||
<!-- v-model:value="where.companyName"-->
|
||||
<!-- @done="chooseCompany"-->
|
||||
<!-- />-->
|
||||
<SelectApp
|
||||
:placeholder="`按应用筛选`"
|
||||
v-model:value="where.appName"
|
||||
@done="chooseApp"
|
||||
/>
|
||||
<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 useSearch from '@/utils/use-search';
|
||||
import { ref, watch } from 'vue';
|
||||
import { App, 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: undefined,
|
||||
companyId: undefined,
|
||||
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 chooseCompany = (data: Company) => {
|
||||
where.companyName = data.companyName;
|
||||
where.companyId = data.companyId;
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
const chooseApp = (data: App) => {
|
||||
where.appName = data.appName;
|
||||
where.appId = data.appId;
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
search();
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
354
src/views/oa/app/renew/index.vue
Normal file
354
src/views/oa/app/renew/index.vue
Normal file
@@ -0,0 +1,354 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="appId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
:scroll="{ x: 1200 }"
|
||||
class="sys-org-table"
|
||||
:striped="true"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search @search="reload" @add="openEdit" />
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'companyName'">
|
||||
<div class="app-box">
|
||||
<a-image
|
||||
:height="45"
|
||||
:width="45"
|
||||
:preview="false"
|
||||
:src="record.companyLogo"
|
||||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
|
||||
/>
|
||||
<div class="app-info">
|
||||
<span class="ele-text-heading">
|
||||
{{ record.shortName }}
|
||||
</span>
|
||||
<span class="ele-text-placeholder">
|
||||
{{ record.companyName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'appName'">
|
||||
<div class="app-box">
|
||||
<a-image
|
||||
:height="45"
|
||||
:width="45"
|
||||
:preview="false"
|
||||
:src="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.appCode }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'appCode'">
|
||||
<span>{{ 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 === 'status'">
|
||||
<a-tag color="orange" v-if="record.status == 0">未缴费</a-tag>
|
||||
<a-tag color="green" v-if="record.status == 1">已缴费</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'expirationTime'">
|
||||
<template v-if="expirationTime(record.expirationTime) < 30">
|
||||
<a-space>
|
||||
<span class="ele-text-danger">{{
|
||||
toDateString(record.expirationTime, 'yyyy-MM-dd')
|
||||
}}</span>
|
||||
<span class="ele-text-placeholder"
|
||||
>(剩余{{ expirationTime(record.expirationTime) }}天)</span
|
||||
>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ toDateString(record.expirationTime, 'yyyy-MM-dd') }}
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="column.key === 'renewMoney'">
|
||||
<span @click="getLastMoney(record)"
|
||||
>￥{{ record.renewMoney }}</span
|
||||
>
|
||||
</template>
|
||||
<template v-if="column.key === 'images'">
|
||||
<div class="files">
|
||||
<a-upload
|
||||
v-model:file-list="record.files"
|
||||
disabled
|
||||
class="upload-list-inline"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'comments'">
|
||||
<div class="comments">{{ record.comments }}</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="openEdit(record)">管理</a>
|
||||
<template v-if="hasRole('superAdmin')">
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
title="确定要删除此记录吗？"
|
||||
@confirm="removeRel(record)"
|
||||
>
|
||||
<a class="ele-text-info">删除</a>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</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 { ref } from 'vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
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 { App, AppParam } from '@/api/oa/app/model';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import {
|
||||
pageAppRenew,
|
||||
removeAppRenew
|
||||
} from '@/api/oa/app/renew';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { AppRenew } from '@/api/oa/app/renew/model';
|
||||
import { pageApp, updateApp } from '@/api/oa/app';
|
||||
|
||||
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',
|
||||
width: 280,
|
||||
key: 'companyName'
|
||||
},
|
||||
{
|
||||
title: '应用名称',
|
||||
dataIndex: 'appName',
|
||||
width: 300,
|
||||
key: 'appName'
|
||||
},
|
||||
{
|
||||
title: '到期时间',
|
||||
dataIndex: 'expirationTime',
|
||||
key: 'expirationTime',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '续费金额',
|
||||
dataIndex: 'renewMoney',
|
||||
key: 'renewMoney',
|
||||
sorter: true,
|
||||
customRender: ({ text }) => `￥${text}`
|
||||
},
|
||||
{
|
||||
title: '缴费状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
hideInTable: true,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'appStatus',
|
||||
key: 'appStatus',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
key: 'comments'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<App[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<App | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
// 搜索条件
|
||||
where.sort = 'expirationTime';
|
||||
where.order = 'asc';
|
||||
where.appStatus = '已上架';
|
||||
where.showExpiration = true;
|
||||
return pageApp({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
// .then((res) => {
|
||||
// res?.list.map((d) => {
|
||||
// if (d.images) {
|
||||
// d.files = JSON.parse(d.images);
|
||||
// }
|
||||
// });
|
||||
// return res;
|
||||
// })
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: AppParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: App) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
const getLastMoney = (item: AppRenew) => {
|
||||
pageAppRenew({
|
||||
appId: item.appId,
|
||||
limit: 1
|
||||
}).then((res) => {
|
||||
if (res?.list.length == 1) {
|
||||
const item = res.list[0];
|
||||
console.log(item);
|
||||
updateApp({
|
||||
appId: item.appId,
|
||||
renewMoney: item.money,
|
||||
expirationTime: item.endTime + ' 23:59:59'
|
||||
});
|
||||
reload();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const expirationTime = (dateTime) => {
|
||||
const now = new Date().getTime();
|
||||
const expiration = new Date(dateTime).getTime();
|
||||
const mss = expiration - now;
|
||||
let days = Math.floor(mss / (1000 * 60 * 60 * 24));
|
||||
let hours = Math.floor((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));
|
||||
let seconds = Math.round((mss % (1000 * 60)) / 1000);
|
||||
return days;
|
||||
};
|
||||
|
||||
const removeRel = (item: AppRenew) => {
|
||||
removeAppRenew(item.appRenewId).then(() => {
|
||||
message.success('删除成功');
|
||||
reload();
|
||||
});
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
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: 5px;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
623
src/views/oa/assets/server/components/assets-edit.vue
Normal file
623
src/views/oa/assets/server/components/assets-edit.vue
Normal file
@@ -0,0 +1,623 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="70%"
|
||||
: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">
|
||||
<!-- <template #extra>-->
|
||||
<!-- <a-button type="link" @click="handleEditStatus">{{ editStatus ? "预览" : "编辑" }}</a-button>-->
|
||||
<!-- </template>-->
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="公网IP" name="code">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入合法的IP地址"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.code"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{ form.code }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="品牌厂商" name="brand">
|
||||
<DictSelect
|
||||
dict-code="serverBrand"
|
||||
placeholder="请选择品牌厂商"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.brand"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{ form.brand }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="所属企业" name="companyName">
|
||||
<SelectCompany
|
||||
:placeholder="`选择所属企业`"
|
||||
v-model:value="form.companyName"
|
||||
v-if="editStatus"
|
||||
@done="chooseCompanyId"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{ form.companyName }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="描述" name="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入服务器描述"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{ form.name }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="服务器配置" name="configuration">
|
||||
<a-select
|
||||
v-if="editStatus"
|
||||
v-model:value="form.configuration"
|
||||
mode="tags"
|
||||
placeholder="请填写服务器配置"
|
||||
></a-select>
|
||||
<a-tag v-else v-for="item in form.configuration">
|
||||
{{ item }}
|
||||
</a-tag>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="宝塔面板" name="panel">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="https://47.106.145.40:20780/603f8087"
|
||||
v-model:value="form.panel"
|
||||
v-if="editStatus"
|
||||
/>
|
||||
<a :href="form.panel" target="_blank" v-else class="ele-text-primary">{{ form.panel }}</a>
|
||||
</a-form-item>
|
||||
<a-form-item label="宝塔面板账号" name="panelAccount">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="宝塔面板账号"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.panelAccount"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{ form.panelAccount }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="宝塔面板密码"
|
||||
name="panelPassword"
|
||||
>
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="宝塔面板密码"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.panelPassword"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{ form.panelPassword }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="开放端口" name="openPort">
|
||||
<a-select
|
||||
v-if="editStatus"
|
||||
v-model:value="form.openPort"
|
||||
mode="tags"
|
||||
placeholder="请选择开放端口"
|
||||
></a-select>
|
||||
<a-tag v-else v-for="item in form.openPort">
|
||||
{{ item }}
|
||||
</a-tag>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" name="status">
|
||||
<DictSelect
|
||||
dict-code="serverStatus"
|
||||
placeholder="请选择状态"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.status"
|
||||
/>
|
||||
<template v-else>
|
||||
<a-tag :color="form.status == '正常' ? 'green' : ''">
|
||||
{{ form.status }}
|
||||
</a-tag>
|
||||
</template>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="宝塔API接口秘钥" name="btSign">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="50"
|
||||
placeholder="宝塔API接口秘钥"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.btSign"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{ form.btSign }}</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="排序" name="sortNumber">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="排序"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.sortNumber"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{ form.sortNumber }}</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-form>
|
||||
</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, RuleObject } from "ant-design-vue/es/form";
|
||||
import { Assets } from "@/api/oa/assets/model";
|
||||
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
|
||||
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 { listAssetsUser, addAssetsUser, removeAssetsUser } from "@/api/oa/assets/user";
|
||||
import { AssetsUser } from "@/api/oa/assets/user/model";
|
||||
import { addAssets, updateAssets } from "@/api/oa/assets";
|
||||
import { isIP } from "ele-admin-pro";
|
||||
import { Company } from "@/api/system/company/model";
|
||||
import { Dayjs } from "dayjs";
|
||||
|
||||
// 是否是修改
|
||||
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?: Assets | 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 assetsUsers = ref<AssetsUser[]>([]);
|
||||
const selectUser = ref<string>();
|
||||
const editStatus = ref(true);
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
// 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 startTime = ref<Dayjs>();
|
||||
// 结束日期
|
||||
const endTime = ref<Dayjs>();
|
||||
const showAddUserForm = ref(false);
|
||||
|
||||
// 文件模型
|
||||
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<Assets>({
|
||||
type: "服务器",
|
||||
code: "",
|
||||
createTime: "",
|
||||
endTime: "",
|
||||
name: "",
|
||||
brand: undefined,
|
||||
account: "",
|
||||
password: "",
|
||||
panelAccount: "",
|
||||
panelPassword: "",
|
||||
panel: "",
|
||||
financeAmount: 0,
|
||||
financeYears: 0,
|
||||
financeRenew: 0,
|
||||
customerId: undefined,
|
||||
customerName: "",
|
||||
companyName: "",
|
||||
financeCustomerName: "",
|
||||
financeCustomerContact: "",
|
||||
financeCustomerPhone: "",
|
||||
brandAccount: "",
|
||||
brandPassword: "",
|
||||
btSign: "",
|
||||
openPort: "",
|
||||
configuration: "",
|
||||
comments: "",
|
||||
root: "root",
|
||||
sortNumber: 100,
|
||||
status: "运行中",
|
||||
assetsId: 0,
|
||||
visibility: "private",
|
||||
userList: [],
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit("update:visible", value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
type: "string",
|
||||
message: "请输入服务器名称",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
type: "string",
|
||||
message: "请输入合法的IP地址",
|
||||
trigger: "blur",
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (!isIP(value)) {
|
||||
const msg = "请输入合法的IP地址";
|
||||
try {
|
||||
if (!isIP(value)) {
|
||||
return Promise.reject(msg);
|
||||
}
|
||||
} catch (_e) {
|
||||
return Promise.reject(msg);
|
||||
}
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
],
|
||||
brand: [
|
||||
{
|
||||
required: true,
|
||||
type: "string",
|
||||
message: "请选择跟进状态",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
companyName: [
|
||||
{
|
||||
required: true,
|
||||
type: "string",
|
||||
message: "请选择所属企业",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
// assetsName: [
|
||||
// {
|
||||
// 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 chooseCompanyId = (data: Company) => {
|
||||
form.companyName = data.companyName;
|
||||
form.companyId = data.companyId;
|
||||
};
|
||||
|
||||
|
||||
// 添加开发成员
|
||||
const addAssetsDevUser = (data: User) => {
|
||||
addAssetsUser({
|
||||
userId: data.userId,
|
||||
assetsId: props.data?.assetsId,
|
||||
role: 20
|
||||
}).then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
|
||||
// 移除成员
|
||||
const removeUser = (data: AssetsUser) => {
|
||||
removeAssetsUser(data.id)
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const handleEditStatus = () => {
|
||||
editStatus.value = !editStatus.value;
|
||||
};
|
||||
|
||||
// const chooseAssetsName = (data: Assets) => {
|
||||
// form.assetsName = data.assetsName;
|
||||
// };
|
||||
|
||||
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 config = ref({
|
||||
width: 1000,
|
||||
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"
|
||||
});
|
||||
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 = "![" + result.name + "](" + FILE_SERVER + result.path + ")\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,
|
||||
openPort: form.openPort.toString(),
|
||||
configuration: form.configuration.toString()
|
||||
};
|
||||
// 转字符串
|
||||
const saveOrUpdate = isUpdate.value ? updateAssets : addAssets;
|
||||
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;
|
||||
// 加载项目成员
|
||||
listAssetsUser({assetsId:props.data?.assetsId}).then(data => {
|
||||
assetsUsers.value = data
|
||||
})
|
||||
// 加载企业信息
|
||||
const companyId = props.data?.companyId;
|
||||
// pageCompany({companyId}).then(res => {
|
||||
// form.tenantId = undefined;
|
||||
// const list = res?.list;
|
||||
// if(list && list.length > 0){
|
||||
// form.tenantId = list[0].tenantId;
|
||||
// }
|
||||
// })
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
content.value = "";
|
||||
requirement.value = "";
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
images.value = [];
|
||||
|
||||
// if (props.data.file1) {
|
||||
// file1.value = JSON.parse(props.data.file1);
|
||||
// }
|
||||
if (props.data.openPort) {
|
||||
form.openPort = props.data.openPort.split(",");
|
||||
}
|
||||
if (props.data.configuration) {
|
||||
form.configuration = props.data.configuration.split(",");
|
||||
}
|
||||
isUpdate.value = true;
|
||||
reload();
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
editStatus.value = true;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<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>
|
||||
259
src/views/oa/assets/server/components/renew-list.vue
Normal file
259
src/views/oa/assets/server/components/renew-list.vue
Normal file
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<a-card
|
||||
title="续费管理"
|
||||
:bordered="false"
|
||||
v-if="hasRole('superAdmin') || hasRole('admin')"
|
||||
>
|
||||
<template #extra>
|
||||
<a-button @click="addRecord">添加</a-button>
|
||||
</template>
|
||||
<div class="content">
|
||||
<table
|
||||
class="ele-table ele-table-border ele-table-stripe ele-table-medium"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>状态</th>
|
||||
<th>续费金额</th>
|
||||
<th>开始时间</th>
|
||||
<th>结束时间</th>
|
||||
<th width="360">描述</th>
|
||||
<th style="text-align: center">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="(item, index) in list" :key="index">
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-select placeholder="请选择" v-model:value="item.status">
|
||||
<a-select-option :value="0">待缴费</a-select-option>
|
||||
<a-select-option :value="1">已缴费</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="item.status == 1">已缴费</span>
|
||||
<span v-if="item.status == 0">待缴费</span>
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="999999"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入续费金额"
|
||||
v-model:value="item.money"
|
||||
/>
|
||||
</template>
|
||||
<template v-else> ￥{{ item.money }} </template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-date-picker
|
||||
placeholder="开始日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model:value="item.startTime"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ toDateString(item.startTime, 'yyyy-MM-dd') }}
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-date-picker
|
||||
placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model:value="item.endTime"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ toDateString(item.endTime, 'yyyy-MM-dd') }}
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-input
|
||||
class="ele-fluid"
|
||||
placeholder="请输入描述内容"
|
||||
v-model:value="item.comments"
|
||||
/>
|
||||
<a-upload
|
||||
v-model:file-list="item.images"
|
||||
class="upload-list-inline"
|
||||
list-type="picture"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<a-button>
|
||||
<UploadOutlined />
|
||||
上传附件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="comments">{{ item.comments }}</div>
|
||||
<div class="files">
|
||||
<a-upload
|
||||
v-model:file-list="item.images"
|
||||
class="upload-list-inline"
|
||||
>
|
||||
</a-upload>
|
||||
</div>
|
||||
</template>
|
||||
</td>
|
||||
<td style="text-align: center">
|
||||
<template v-if="item.editStatus">
|
||||
<a-space>
|
||||
<a @click="save(item, index)">保存</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="确定要删除此记录吗？" @confirm="remove(index)">
|
||||
<a class="ele-text-info">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-space>
|
||||
<a @click="openEdit(index)">编辑</a>
|
||||
<a-divider type="vertical" v-if="hasRole('superAdmin')" @confirm="removeRel(index)" />
|
||||
<a-popconfirm title="确定要删除此记录吗？" v-if="hasRole('superAdmin')" @confirm="removeRel(index)">
|
||||
<a class="ele-text-info">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { ref, watch } from 'vue';
|
||||
import { addAppRenew, pageAppRenew, removeAppRenew } from "@/api/oa/app/renew";
|
||||
import { AppRenew } from '@/api/oa/app/renew/model';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
|
||||
import { uploadOss } from "@/api/system/file";
|
||||
import { isImage } from "@/utils/common";
|
||||
|
||||
const props = defineProps<{
|
||||
editStatus?: boolean;
|
||||
appId?: number;
|
||||
companyId?: number;
|
||||
}>();
|
||||
|
||||
const userStore = useUserStore();
|
||||
const list = ref<AppRenew[]>([]);
|
||||
const files = ref<ItemType[]>([]);
|
||||
|
||||
const addRecord = () => {
|
||||
list.value.unshift({
|
||||
money: undefined,
|
||||
comments: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
nickname: userStore.info?.nickname,
|
||||
status: 0,
|
||||
images: undefined,
|
||||
editStatus: true
|
||||
});
|
||||
};
|
||||
|
||||
// 文件上传事件
|
||||
const beforeUpload = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
}
|
||||
if (!file.type.startsWith("image")) {
|
||||
if (file.size / 1024 / 1024 > 100) {
|
||||
message.error("大小不能超过 100MB");
|
||||
return;
|
||||
}
|
||||
}
|
||||
onUpload(item);
|
||||
return false;
|
||||
};
|
||||
|
||||
const onUpload = (d: ItemType) => {
|
||||
uploadOss(<File>d.file)
|
||||
.then((result) => {
|
||||
files.value.push({
|
||||
uid: result.id,
|
||||
url: result.path,
|
||||
name: isImage(result.path) ? 'image' : result.name,
|
||||
status: "done"
|
||||
});
|
||||
message.success("上传成功");
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const remove = (index: number) => {
|
||||
list.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const openEdit = (index: number) => {
|
||||
list.value[index].editStatus = true
|
||||
}
|
||||
|
||||
const removeRel = (index: number) => {
|
||||
removeAppRenew(list.value[index].appRenewId).then(() => {
|
||||
list.value.splice(index, 1);
|
||||
message.success('删除成功')
|
||||
})
|
||||
}
|
||||
|
||||
const save = (item: AppRenew, index: number) => {
|
||||
item.appId = props.appId;
|
||||
item.companyId = props.companyId;
|
||||
item.startTime = item.startTime ? item.startTime + ' 00:00:00' : '';
|
||||
item.endTime = item.endTime ? item.endTime + ' 23:59:59' : '';
|
||||
item.nickname = userStore.info?.nickname;
|
||||
item.userId = userStore.info?.userId;
|
||||
if(files.value.length > 0){
|
||||
item.images = JSON.stringify(files.value)
|
||||
}
|
||||
if (item.money == undefined || item.money == 0) {
|
||||
message.error('请填写金额');
|
||||
return false;
|
||||
}
|
||||
addAppRenew(item).then(() => {
|
||||
list.value[index].editStatus = false;
|
||||
message.success('保存成功');
|
||||
});
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
pageAppRenew({ appId: props.appId }).then((res) => {
|
||||
if (res?.list) {
|
||||
list.value = res?.list.map((d) => {
|
||||
d.editStatus = false;
|
||||
if(d.images){
|
||||
d.images = JSON.parse(d.images);
|
||||
}
|
||||
return d;
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.appId,
|
||||
(options) => {
|
||||
if (options) {
|
||||
reload();
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
160
src/views/oa/assets/server/components/search.vue
Normal file
160
src/views/oa/assets/server/components/search.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<!-- 搜索表单 -->
|
||||
<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="type" @change="handleSearch">
|
||||
<a-radio-button value="全部">全部({{ conut.totalNum }})</a-radio-button>
|
||||
<a-radio-button value="运行中"
|
||||
>运行中({{ conut.totalNum1 }})</a-radio-button
|
||||
>
|
||||
<a-radio-button value="已到期"
|
||||
>已到期({{ conut.totalNum2 }})</a-radio-button
|
||||
>
|
||||
<a-radio-button value="已销毁"
|
||||
>已销毁({{ conut.totalNum3 }})</a-radio-button
|
||||
>
|
||||
</a-radio-group>
|
||||
<SelectCompany
|
||||
:placeholder="`按企业筛选`"
|
||||
v-model:value="where.companyName"
|
||||
@done="chooseCompanyName"
|
||||
/>
|
||||
<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 { AssetsParam } from '@/api/oa/assets/model';
|
||||
import { Company } from '@/api/system/company/model';
|
||||
import { getCount } from '@/api/oa/assets';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: AssetsParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'advanced'): void;
|
||||
}>();
|
||||
|
||||
// 下来选项
|
||||
// 日期范围选择
|
||||
const dateRange = ref<[string, string]>(['', '']);
|
||||
const type = ref<any>('开发中');
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<AssetsParam>({
|
||||
assetsId: undefined,
|
||||
userId: undefined,
|
||||
status: undefined,
|
||||
companyId: undefined,
|
||||
showExpiration: '',
|
||||
companyName: '',
|
||||
keywords: ''
|
||||
});
|
||||
|
||||
// 统计数据
|
||||
const conut = ref({
|
||||
totalNum: 0,
|
||||
totalNum1: 0,
|
||||
totalNum2: 0,
|
||||
totalNum3: 0,
|
||||
totalNum4: 0,
|
||||
totalNum5: 0
|
||||
});
|
||||
|
||||
/* 搜索 */
|
||||
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 handleSearch = () => {
|
||||
where.showExpiration = undefined;
|
||||
where.status = type.value;
|
||||
if (type.value == '全部') {
|
||||
where.status = undefined;
|
||||
where.showExpiration = undefined;
|
||||
} else {
|
||||
where.status = type.value;
|
||||
if (type.value == '未签续费') {
|
||||
where.sort = 'expirationTime';
|
||||
where.order = 'asc';
|
||||
where.showExpiration = false;
|
||||
where.status = '运行中';
|
||||
} else {
|
||||
where.sort = undefined;
|
||||
where.order = undefined;
|
||||
}
|
||||
}
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
search();
|
||||
};
|
||||
|
||||
getCount().then((data: any) => {
|
||||
conut.value = data;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
152
src/views/oa/assets/server/components/task-list.vue
Normal file
152
src/views/oa/assets/server/components/task-list.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<a-card
|
||||
title="待处理工单"
|
||||
:bordered="false"
|
||||
v-if="hasRole('superAdmin') || hasRole('admin')"
|
||||
>
|
||||
<template #extra>
|
||||
<a href="/oa/task">查看更多</a>
|
||||
</template>
|
||||
<div class="content">
|
||||
<a-space style="margin-bottom: 15px" v-if="editStatus" />
|
||||
<table class="ele-table ele-table-stripe ele-table-medium">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="80">工单号</th>
|
||||
<th width="100">工单类型</th>
|
||||
<th>问题描述</th>
|
||||
<th width="150">创建时间</th>
|
||||
<th width="100">状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-for="(item, index) in list" :key="index">
|
||||
<tr>
|
||||
<td>{{ item.taskId }}</td>
|
||||
<td>{{ item.taskType }}</td>
|
||||
<td>
|
||||
<div class="user-box">
|
||||
<div class="user-info">
|
||||
<a-badge
|
||||
:dot="!item.isRead && item.userId != userStore.info?.userId"
|
||||
>
|
||||
<a-avatar :src="item.lastAvatar" size="large" />
|
||||
</a-badge>
|
||||
</div>
|
||||
<div
|
||||
class="content"
|
||||
style="display: flex; flex-direction: column"
|
||||
>
|
||||
<div class="nickname">
|
||||
<span class="ele-text-secondary">{{
|
||||
item.lastNickname ? item.lastNickname : '未知'
|
||||
}}</span>
|
||||
<span
|
||||
class="ele-text-placeholder"
|
||||
style="padding-left: 10px"
|
||||
>{{ timeAgo(item.updateTime) }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="text">
|
||||
<a
|
||||
class="ele-text-heading"
|
||||
@click="openUrl('/oa/task/detail/' + item.taskId)"
|
||||
>{{ item.content }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="last-time ele-text-info"> </div>
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ toDateString(item.createTime, 'MM月dd日 HH:mm') }}</td>
|
||||
<td>
|
||||
<a-tag v-if="item.progress === TOBEARRANGED" color="red"
|
||||
>待安排</a-tag
|
||||
>
|
||||
<a-tag v-if="item.progress === PENDING" color="orange"
|
||||
>待处理</a-tag
|
||||
>
|
||||
<a-tag v-if="item.progress === PROCESSING" color="purple"
|
||||
>处理中</a-tag
|
||||
>
|
||||
<a-tag v-if="item.progress === TOBECONFIRMED" color="cyan"
|
||||
>待评价</a-tag
|
||||
>
|
||||
<a-tag v-if="item.progress === COMPLETED" color="green"
|
||||
>已完成</a-tag
|
||||
>
|
||||
<a-tag v-if="item.progress === CLOSED">已关闭</a-tag>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { ref, watch } from 'vue';
|
||||
import { pageTask } from '@/api/oa/task';
|
||||
import { Task } from '@/api/oa/task/model';
|
||||
import {
|
||||
CLOSED,
|
||||
COMPLETED,
|
||||
PENDING,
|
||||
PROCESSING,
|
||||
TOBEARRANGED,
|
||||
TOBECONFIRMED
|
||||
} from '@/api/oa/task/model/progress';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import { timeAgo, toDateString } from 'ele-admin-pro';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
|
||||
const props = defineProps<{
|
||||
editStatus?: boolean;
|
||||
appId?: number;
|
||||
companyId?: number;
|
||||
}>();
|
||||
|
||||
const list = ref<Task[]>([]);
|
||||
const userStore = useUserStore();
|
||||
|
||||
const reload = () => {
|
||||
pageTask({ appId: props.appId }).then((res) => {
|
||||
if (res?.list) {
|
||||
list.value = res?.list;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.appId,
|
||||
(options) => {
|
||||
if (options) {
|
||||
reload();
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.user-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.last-time {
|
||||
margin-left: 12px;
|
||||
}
|
||||
.content {
|
||||
.text {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,454 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="1000"
|
||||
: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-card title="基本信息" :bordered="false">
|
||||
<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-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="公网IP" name="code">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入合法的IP地址"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.code"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{ form.code }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="品牌厂商" name="brand">
|
||||
<DictSelect
|
||||
dict-code="serverBrand"
|
||||
placeholder="请选择品牌厂商"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.brand"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{ form.brand }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="所属企业" name="companyName">
|
||||
<SelectCompany
|
||||
:placeholder="`选择所属企业`"
|
||||
v-model:value="form.companyName"
|
||||
v-if="editStatus"
|
||||
@done="chooseCompanyId"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{
|
||||
form.companyName
|
||||
}}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="描述" name="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入服务器描述"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{ form.name }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="服务器配置" name="configuration">
|
||||
<a-select
|
||||
v-if="editStatus"
|
||||
v-model:value="form.configuration"
|
||||
mode="tags"
|
||||
placeholder="请填写服务器配置"
|
||||
/>
|
||||
<a-tag v-else v-for="item in form.configuration">
|
||||
{{ item }}
|
||||
</a-tag>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="宝塔面板" name="panel">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="https://47.106.145.40:20780/603f8087"
|
||||
v-model:value="form.panel"
|
||||
v-if="editStatus"
|
||||
/>
|
||||
<a
|
||||
:href="form.panel"
|
||||
target="_blank"
|
||||
v-else
|
||||
class="ele-text-primary"
|
||||
>{{ form.panel }}</a
|
||||
>
|
||||
</a-form-item>
|
||||
<a-form-item label="宝塔面板账号" name="panelAccount">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="宝塔面板账号"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.panelAccount"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{
|
||||
form.panelAccount
|
||||
}}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="宝塔面板密码" name="panelPassword">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="宝塔面板密码"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.panelPassword"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{
|
||||
form.panelPassword
|
||||
}}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="开放端口" name="openPort">
|
||||
<a-select
|
||||
v-if="editStatus"
|
||||
v-model:value="form.openPort"
|
||||
mode="tags"
|
||||
placeholder="请选择开放端口"
|
||||
/>
|
||||
<a-tag v-else v-for="item in form.openPort">
|
||||
{{ item }}
|
||||
</a-tag>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" name="status">
|
||||
<DictSelect
|
||||
dict-code="serverStatus"
|
||||
placeholder="请选择状态"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.status"
|
||||
/>
|
||||
<template v-else>
|
||||
<a-tag :color="form.status == '正常' ? 'green' : ''">
|
||||
{{ form.status }}
|
||||
</a-tag>
|
||||
</template>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="宝塔API接口秘钥" name="btSign">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="50"
|
||||
placeholder="宝塔API接口秘钥"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.btSign"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{ form.btSign }}</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="
|
||||
styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 8 }
|
||||
"
|
||||
>
|
||||
<a-form-item label="排序" name="sortNumber">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="排序"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.sortNumber"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{
|
||||
form.sortNumber
|
||||
}}</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</div>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject, ipReg, isChinese } from 'ele-admin-pro';
|
||||
import { addAssets, updateAssets } from '@/api/oa/assets';
|
||||
import type { Assets } from '@/api/oa/assets/model';
|
||||
import { FormInstance, RuleObject } 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 { uploadFile } from '@/api/system/file';
|
||||
import { TOKEN_STORE_NAME } from '@/config/setting';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
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 maxable = ref(true);
|
||||
// 当期时间
|
||||
// 已上传数据
|
||||
const logo = ref<ItemType[]>([]);
|
||||
const assetsQrcode = ref<ItemType[]>([]);
|
||||
const images = ref<ItemType[]>([]);
|
||||
const editStatus = ref(true);
|
||||
// 日期范围选择
|
||||
const content = ref('');
|
||||
|
||||
const token = localStorage.getItem(TOKEN_STORE_NAME);
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
const form = reactive<Assets>({
|
||||
type: '服务器',
|
||||
code: '',
|
||||
createTime: '',
|
||||
endTime: '',
|
||||
name: '',
|
||||
brand: undefined,
|
||||
account: '',
|
||||
password: '',
|
||||
panelAccount: '',
|
||||
panelPassword: '',
|
||||
panel: '',
|
||||
financeAmount: 0,
|
||||
financeYears: 0,
|
||||
financeRenew: 0,
|
||||
customerId: undefined,
|
||||
customerName: '',
|
||||
companyName: '',
|
||||
financeCustomerName: '',
|
||||
financeCustomerContact: '',
|
||||
financeCustomerPhone: '',
|
||||
brandAccount: '',
|
||||
brandPassword: '',
|
||||
btSign: '',
|
||||
openPort: '',
|
||||
configuration: '',
|
||||
comments: '',
|
||||
root: 'root',
|
||||
sortNumber: 100,
|
||||
status: '运行中',
|
||||
assetsId: 0,
|
||||
visibility: 'private',
|
||||
userList: [],
|
||||
userId: undefined,
|
||||
// 成员管理
|
||||
users: []
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入公网IP地址',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
companyName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请选择所属企业',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
assetsCode: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入应用标识(英文字母)',
|
||||
trigger: 'blur',
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (isChinese(value)) {
|
||||
return Promise.reject('请输入正确的应用标识');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
],
|
||||
assetsType: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择项目类型'
|
||||
}
|
||||
],
|
||||
ipAddress: [
|
||||
{
|
||||
pattern: ipReg,
|
||||
message: 'IP地址不合法',
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
assetsStatus: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请选择应用状态',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const { resetFields, validate } = useForm(form, rules);
|
||||
|
||||
// 所属用户
|
||||
const chooseCompanyId = (data: Company) => {
|
||||
form.companyName = data.companyName;
|
||||
form.companyId = data.companyId;
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form,
|
||||
content: content.value,
|
||||
openPort: form.openPort.toString(),
|
||||
configuration: form.configuration.toString()
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateAssets : addAssets;
|
||||
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 onUploadIcon = (item) => {
|
||||
const { file } = item;
|
||||
logo.value = [];
|
||||
uploadFile(file)
|
||||
.then((data) => {
|
||||
logo.value.push({
|
||||
uid: data.id,
|
||||
url: data.url,
|
||||
status: 'done'
|
||||
});
|
||||
message.success('上传成功');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const onUploadQrcode = (item) => {
|
||||
const { file } = item;
|
||||
assetsQrcode.value = [];
|
||||
uploadFile(file)
|
||||
.then((data) => {
|
||||
assetsQrcode.value.push({
|
||||
uid: data.id,
|
||||
url: data.url,
|
||||
status: 'done'
|
||||
});
|
||||
message.success('上传成功');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 上传文件
|
||||
const onUpload = (item) => {
|
||||
const { file } = item;
|
||||
uploadFile(file)
|
||||
.then((data) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.url,
|
||||
status: 'done'
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
content.value = '';
|
||||
logo.value = [];
|
||||
images.value = [];
|
||||
assetsQrcode.value = [];
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
isUpdate.value = true;
|
||||
reload();
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
131
src/views/oa/assets/server/detail/components/assets-info.vue
Normal file
131
src/views/oa/assets/server/detail/components/assets-info.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<a-descriptions title="基本信息" :column="2" bordered>
|
||||
<template #extra>
|
||||
<a @click="openEdit">编辑</a>
|
||||
</template>
|
||||
<a-descriptions-item
|
||||
label="公网IP"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<div style="min-width: 200px">{{ data.code }}</div>
|
||||
</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="状态"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<div style="min-width: 200px"><a-badge status="processing" :text="data.status" /></div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="品牌厂商"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.brand }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="描述"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
{{ data.name }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="所属企业"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
{{ data.companyName }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="服务器配置"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
{{ data.configuration }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="宝塔面板"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
{{ data.panel }} <a style="margin-left: 12px" @click="openNew(`${data.panel}`)"><ExportOutlined /></a>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="开放端口"
|
||||
:span="2"
|
||||
layout="vertical"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<a-tag v-for="item in data.openPort.split(',')">
|
||||
{{ item }}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="宝塔面板账号"
|
||||
layout="vertical"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
{{ data.panelAccount }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="宝塔API接口秘钥"
|
||||
layout="vertical"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<span>****</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="宝塔面板密码"
|
||||
layout="vertical"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
{{ data.panelPassword }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="排序"
|
||||
layout="vertical"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
{{ data.sortNumber }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="备注"
|
||||
layout="vertical"
|
||||
:span="2"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<byte-md-viewer :value="data.comments" />
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
<!-- 编辑弹窗 -->
|
||||
<AssetsInfoEdit v-model:visible="showEdit" :data="data" @done="reload" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Assets } from '@/api/oa/assets/model';
|
||||
import { ref } from 'vue';
|
||||
import AssetsInfoEdit from './assets-info-edit.vue';
|
||||
import { ExportOutlined } from '@ant-design/icons-vue';
|
||||
import {openNew} from "@/utils/common";
|
||||
|
||||
defineProps<{
|
||||
data: Assets;
|
||||
logo: [] | any;
|
||||
assetsQrcode: any | undefined;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
}>();
|
||||
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
const showAssetsSecretForm = ref<boolean>(false);
|
||||
|
||||
const openAssetsSecretForm = () => {
|
||||
showAssetsSecretForm.value = true;
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = () => {
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
emit('done');
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<a-space style="margin-bottom: 20px">
|
||||
<SelectStaff
|
||||
v-if="hasRole('superAdmin') || hasRole('admin')"
|
||||
:placeholder="`添加成员`"
|
||||
@done="addAssetsDevUser"
|
||||
/>
|
||||
<a-button>邀请添加</a-button>
|
||||
</a-space>
|
||||
<div class="content">
|
||||
<table class="ele-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>用户ID</th>
|
||||
<th>角色</th>
|
||||
<th>昵称</th>
|
||||
<th>加入时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(user, index) in data.users" :key="index">
|
||||
<td>
|
||||
<span style="padding-left: 5px">{{ user.userId }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span style="padding-left: 5px">{{ user.nickname }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="user.role === 20">项目成员</span>
|
||||
<span v-if="user.role === 30">管理员</span>
|
||||
</td>
|
||||
<td>{{ user.createTime }}</td>
|
||||
<td>
|
||||
<div v-if="user.role !== 30">
|
||||
<a
|
||||
@click="removeUser(user)"
|
||||
v-if="hasRole('superAdmin') || hasRole('admin')"
|
||||
>
|
||||
移除
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { Assets } from '@/api/oa/assets/model';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { AssetsUser } from '@/api/oa/assets/user/model';
|
||||
import { addAssetsUser, removeAssetsUser } from '@/api/oa/assets/user';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const props = defineProps<{
|
||||
assetsId: any;
|
||||
data: Assets;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 添加开发成员
|
||||
const addAssetsDevUser = (data: User) => {
|
||||
addAssetsUser({
|
||||
userId: data.userId,
|
||||
assetsId: props.data?.assetsId,
|
||||
role: 20,
|
||||
nickname: data.nickname
|
||||
})
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 移除成员
|
||||
const removeUser = (data: AssetsUser) => {
|
||||
removeAssetsUser(data.id)
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
174
src/views/oa/assets/server/detail/index.vue
Normal file
174
src/views/oa/assets/server/detail/index.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<a-page-header
|
||||
:title="title"
|
||||
:style="{ padding: screenWidth > 480 ? '16px 24px' : '0' }"
|
||||
@back="() => $router.go(-1)"
|
||||
>
|
||||
<a-spin :spinning="spinning">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{ paddingTop: '5px' }"
|
||||
v-if="isShow"
|
||||
>
|
||||
<a-tabs v-model:active-key="active" @change="onChange">
|
||||
<a-tab-pane tab="基本信息" key="base">
|
||||
<AssetsInfo
|
||||
:data="form"
|
||||
:logo="logo"
|
||||
:assets-qrcode="assetsQrcode"
|
||||
@done="reload"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane
|
||||
tab="成员管理"
|
||||
key="users"
|
||||
v-if="hasRole('superAdmin') || hasRole('admin')"
|
||||
>
|
||||
<AssetsUsers :assets-id="assetsId" :data="form" @done="reload" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
<a-card v-else :bordered="false">
|
||||
<div style="max-width: 960px; margin: 0 auto">
|
||||
<a-result
|
||||
status="error"
|
||||
title="无查看权限"
|
||||
sub-title="请先添加为项目成员"
|
||||
>
|
||||
<template #extra>
|
||||
<a-space size="middle">
|
||||
<a-button type="primary" @click="openUrl('/assets/server')"
|
||||
>返回</a-button
|
||||
>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-spin>
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, unref, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import AssetsInfo from './components/assets-info.vue';
|
||||
import AssetsUsers from './components/assets-users.vue';
|
||||
import { getAssets } from '@/api/oa/assets';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { Assets } from '@/api/oa/assets/model';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { setPageTabTitle } from '@/utils/page-tab-util';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import { pageAssetsUser } from '@/api/oa/assets/user';
|
||||
|
||||
const { currentRoute } = useRouter();
|
||||
// 当前选项卡
|
||||
const active = ref('base');
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { screenWidth } = storeToRefs(themeStore);
|
||||
const title = ref('项目名称');
|
||||
const spinning = ref(true);
|
||||
const isShow = ref(true);
|
||||
const logo = ref<any[]>([]);
|
||||
const assetsId = ref<number>(0);
|
||||
const assetsQrcode = ref<any[]>([]);
|
||||
const images = ref<ItemType[]>([]);
|
||||
|
||||
// 服务器信息
|
||||
const { form, assignFields, resetFields } = useFormData<Assets>({
|
||||
type: "服务器",
|
||||
code: "",
|
||||
createTime: "",
|
||||
endTime: "",
|
||||
name: "",
|
||||
brand: undefined,
|
||||
account: "",
|
||||
password: "",
|
||||
panelAccount: "",
|
||||
panelPassword: "",
|
||||
panel: "",
|
||||
financeAmount: 0,
|
||||
financeYears: 0,
|
||||
financeRenew: 0,
|
||||
customerId: undefined,
|
||||
customerName: "",
|
||||
companyName: "",
|
||||
financeCustomerName: "",
|
||||
financeCustomerContact: "",
|
||||
financeCustomerPhone: "",
|
||||
brandAccount: "",
|
||||
brandPassword: "",
|
||||
btSign: "",
|
||||
openPort: "",
|
||||
configuration: "",
|
||||
comments: "",
|
||||
root: "root",
|
||||
sortNumber: 100,
|
||||
status: "0",
|
||||
assetsId: 0,
|
||||
visibility: "private",
|
||||
userList: [],
|
||||
userId: undefined,
|
||||
// 成员管理
|
||||
users: [],
|
||||
});
|
||||
|
||||
const onChange = () => {
|
||||
reload();
|
||||
};
|
||||
|
||||
/**
|
||||
* 加载数据
|
||||
*/
|
||||
const reload = () => {
|
||||
resetFields();
|
||||
// 加载项目详情
|
||||
getAssets(assetsId.value)
|
||||
.then((data) => {
|
||||
console.log(data)
|
||||
assignFields(data);
|
||||
if (data.code) {
|
||||
title.value = data.code;
|
||||
// 修改页签标题
|
||||
setPageTabTitle(data.code);
|
||||
}
|
||||
isShow.value = true;
|
||||
spinning.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
isShow.value = false;
|
||||
spinning.value = false;
|
||||
});
|
||||
// 加载项目成员
|
||||
pageAssetsUser({ assetsId: assetsId.value }).then((res) => {
|
||||
if (res?.list) {
|
||||
form.users = res.list;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
currentRoute,
|
||||
(route) => {
|
||||
const { params } = unref(route);
|
||||
const { id } = params;
|
||||
if (id) {
|
||||
assetsId.value = Number(id);
|
||||
}
|
||||
reload();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'AssetsDetail'
|
||||
};
|
||||
</script>
|
||||
178
src/views/oa/assets/server/dict/components/dict-edit.vue
Normal file
178
src/views/oa/assets/server/dict/components/dict-edit.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<!-- 分类编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="460"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate ? '修改分类' : '添加分类'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="分类标识" name="dictCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
disabled
|
||||
placeholder="请输入分类标识"
|
||||
v-model:value="form.dictCode"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="分类名称" name="dictDataName">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入分类名称"
|
||||
v-model:value="form.dictDataName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sortNumber">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="99999"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入排序号"
|
||||
v-model:value="form.sortNumber"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入备注"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { addDictData, updateDictData } from '@/api/system/dict-data';
|
||||
import { DictData } from '@/api/system/dict-data/model';
|
||||
import {removeSiteInfoCache} from "@/api/cms/website";
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: DictData | null;
|
||||
// 字典ID
|
||||
dictId?: number | 0;
|
||||
}>();
|
||||
|
||||
//
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<DictData>({
|
||||
dictId: undefined,
|
||||
dictDataId: undefined,
|
||||
dictDataName: '',
|
||||
dictCode: 'appType',
|
||||
dictDataCode: '',
|
||||
sortNumber: 100,
|
||||
comments: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
dictDataCode: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入分类名称',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
dictCode: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入分类标识',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const saveOrUpdate = isUpdate.value ? updateDictData : addDictData;
|
||||
form.dictDataCode = form.dictDataName;
|
||||
form.dictId = props.dictId;
|
||||
saveOrUpdate(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
// 清除字典缓存
|
||||
removeSiteInfoCache(form.dictCode + ':' + form.tenantId);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignFields(props.data);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
222
src/views/oa/assets/server/dict/index.vue
Normal file
222
src/views/oa/assets/server/dict/index.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="dictDataId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
:scroll="{ x: 800 }"
|
||||
cache-key="appDictTable"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button type="primary" class="ele-btn-icon" @click="openEdit()">
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="removeBatch"
|
||||
>
|
||||
<template #icon>
|
||||
<delete-outlined />
|
||||
</template>
|
||||
<span>删除</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="openEdit(record)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
placement="topRight"
|
||||
title="确定要删除此分类吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<dict-edit
|
||||
v-model:visible="showEdit"
|
||||
:dictId="dictId"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue/es';
|
||||
import {
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { messageLoading } from 'ele-admin-pro/es';
|
||||
import DictEdit from './components/dict-edit.vue';
|
||||
import {
|
||||
pageDictData,
|
||||
removeDictData,
|
||||
removeDictDataBatch
|
||||
} from '@/api/system/dict-data';
|
||||
import { DictParam } from '@/api/system/dict/model';
|
||||
import { DictData } from '@/api/system/dict-data/model';
|
||||
import { addDict, listDictionaries } from '@/api/system/dict';
|
||||
import { Dictionary } from '@/api/system/dictionary/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
const dictId = ref(0);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'dictDataId',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '分类名称',
|
||||
dataIndex: 'dictDataName',
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '排序号',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'sortNumber'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
align: 'center'
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<DictData[]>([]);
|
||||
|
||||
// 当前编辑数据
|
||||
const current = ref<Dictionary | null>(null);
|
||||
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
where.dictCode = 'appType';
|
||||
return pageDictData({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: DictParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: DictData) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: DictData) => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeDictData(row.dictDataId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的分类吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeDictDataBatch(selection.value.map((d) => d.dictDataId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化字典
|
||||
const loadDict = () => {
|
||||
listDictionaries({ dictCode: 'appType' }).then(async (data) => {
|
||||
if (data?.length == 0) {
|
||||
await addDict({ dictCode: 'appType', dictName: '链接分类' });
|
||||
}
|
||||
await listDictionaries({ dictCode: 'appType' }).then((list) => {
|
||||
list?.map((d) => {
|
||||
dictId.value = Number(d.dictId);
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
loadDict();
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: DictData) => {
|
||||
return {
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'TaskDictData'
|
||||
};
|
||||
</script>
|
||||
371
src/views/oa/assets/server/index.vue
Normal file
371
src/views/oa/assets/server/index.vue
Normal file
@@ -0,0 +1,371 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="assetsId"
|
||||
: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 === 'assetsName'">
|
||||
<div class="assets-box">
|
||||
<a-image
|
||||
:height="45"
|
||||
:width="45"
|
||||
:preview="false"
|
||||
:src="record.assetsIcon"
|
||||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
|
||||
/>
|
||||
<div class="assets-info">
|
||||
<a
|
||||
class="ele-text-heading"
|
||||
@click="openUrl('/assets/server/detail/' + record.assetsId)"
|
||||
>
|
||||
{{ record.assetsName }}
|
||||
</a>
|
||||
<span class="ele-text-placeholder">
|
||||
{{ record.assetsCode }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'code'">
|
||||
<span class="ele-text-heading">{{ record.code }}</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-badge
|
||||
v-if="record.status == '运行中'"
|
||||
status="processing"
|
||||
:text="record.status"
|
||||
/>
|
||||
<a-badge
|
||||
v-if="record.status == '已到期'"
|
||||
status="error"
|
||||
:text="record.status"
|
||||
/>
|
||||
</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 === 'action'">
|
||||
<a-space>
|
||||
<a @click="openUrl('/assets/server/detail/' + record.assetsId)"
|
||||
>详情</a
|
||||
>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
<AssetsEdit 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 { getEndTime, openUrl } from '@/utils/common';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import AssetsEdit from './components/assets-edit.vue';
|
||||
import {
|
||||
pageAssets,
|
||||
removeBatchAssets,
|
||||
removeAssets,
|
||||
getCount
|
||||
} from '@/api/oa/assets';
|
||||
import { Assets, AssetsParam } from '@/api/oa/assets/model';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
|
||||
defineProps<{
|
||||
activeKey?: boolean;
|
||||
data?: any;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'assetsId',
|
||||
width: 80,
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: '所属企业',
|
||||
dataIndex: 'companyName',
|
||||
width: 280,
|
||||
key: 'companyName'
|
||||
},
|
||||
{
|
||||
title: '服务器IP',
|
||||
dataIndex: 'code',
|
||||
align: 'center',
|
||||
width: 200,
|
||||
key: 'code'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
sorter: true,
|
||||
width: 120,
|
||||
align: 'center',
|
||||
key: 'status'
|
||||
},
|
||||
{
|
||||
title: '品牌',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
dataIndex: 'brand'
|
||||
},
|
||||
{
|
||||
title: '付费方式',
|
||||
dataIndex: 'endTime',
|
||||
key: 'endTime',
|
||||
align: 'center',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<Assets[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<Assets | null>(null);
|
||||
// 是否显示资产详情
|
||||
// const showInfo = ref(false);
|
||||
const active = ref<any>('开发中');
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示高级搜索
|
||||
const showAdvancedSearch = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
// 默认类型
|
||||
if (where.keywords == undefined) {
|
||||
where.assetsStatus = '开发中';
|
||||
where.showExpiration = undefined;
|
||||
}
|
||||
if (where.assetsStatus == '未签续费') {
|
||||
where.assetsStatus = '已上架';
|
||||
where.showExpiration = false;
|
||||
where.sort = 'expirationTime';
|
||||
where.order = 'asc';
|
||||
}
|
||||
return pageAssets({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: AssetsParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: Assets) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
const expirationTime = (dateTime) => {
|
||||
const now = new Date().getTime();
|
||||
const expiration = new Date(dateTime).getTime();
|
||||
const mss = expiration - now;
|
||||
let days = Math.floor(mss / (1000 * 60 * 60 * 24));
|
||||
let hours = Math.floor((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));
|
||||
let seconds = Math.round((mss % (1000 * 60)) / 1000);
|
||||
return days;
|
||||
};
|
||||
|
||||
/* 打开高级搜索 */
|
||||
const openAdvanced = () => {
|
||||
showAdvancedSearch.value = !showAdvancedSearch.value;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
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 = () => {
|
||||
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);
|
||||
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: () => {
|
||||
openUrl('/assets/server/detail/' + record.assetsId);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 统计数据
|
||||
const conut = ref({
|
||||
totalNum: 0,
|
||||
totalNum2: 0,
|
||||
totalNum3: 0,
|
||||
totalNum4: 0,
|
||||
totalNum5: 0
|
||||
});
|
||||
getCount().then((data: any) => {
|
||||
conut.value = data;
|
||||
});
|
||||
|
||||
reload();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'AssetsIndex'
|
||||
};
|
||||
</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;
|
||||
}
|
||||
.assets-box {
|
||||
display: flex;
|
||||
.assets-info {
|
||||
display: flex;
|
||||
margin-left: 5px;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.count {
|
||||
display: flex;
|
||||
.btn {
|
||||
margin: 0 12px;
|
||||
padding: 5px 16px;
|
||||
background-color: #f3f3f3;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
.divider {
|
||||
width: 4px;
|
||||
height: 14px;
|
||||
border-radius: 8px;
|
||||
margin-right: 8px;
|
||||
background-color: #c9c9c9;
|
||||
}
|
||||
.divider-active {
|
||||
width: 4px;
|
||||
height: 14px;
|
||||
border-radius: 8px;
|
||||
margin-right: 8px;
|
||||
background-color: #16a90b;
|
||||
}
|
||||
.active {
|
||||
color: #16a90b;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
726
src/views/oa/assets/server2/components/assets-edit.vue
Normal file
726
src/views/oa/assets/server2/components/assets-edit.vue
Normal file
@@ -0,0 +1,726 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="70%"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="`服务器详情`"
|
||||
: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">
|
||||
<template #extra>
|
||||
<a-button type="link" @click="handleEditStatus">{{ editStatus ? "预览" : "编辑" }}</a-button>
|
||||
</template>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="服务器名称" name="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入服务器名称"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{ form.name }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="公网IP" name="code">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入合法的公网IP，如：0.0.0.0"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.code"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{ form.code }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="品牌厂商" name="brand">
|
||||
<DictSelect
|
||||
dict-code="serverBrand"
|
||||
placeholder="请选择品牌厂商"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.brand"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{ form.brand }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="所属企业" name="companyName">
|
||||
<SelectCompany
|
||||
:placeholder="`选择所属企业`"
|
||||
v-model:value="form.companyName"
|
||||
v-if="editStatus"
|
||||
@done="chooseCompanyId"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{ form.companyName }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="服务器配置" name="configuration">
|
||||
<a-select
|
||||
v-if="editStatus"
|
||||
v-model:value="form.configuration"
|
||||
mode="tags"
|
||||
placeholder="请填写服务器配置"
|
||||
></a-select>
|
||||
<a-tag v-else v-for="item in form.configuration">
|
||||
{{ item }}
|
||||
</a-tag>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="宝塔面板" name="panel">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="http://ip:8888"
|
||||
v-model:value="form.panel"
|
||||
v-if="editStatus"
|
||||
/>
|
||||
<a :href="form.panel" target="_blank" v-else class="ele-text-primary">{{ form.panel }}</a>
|
||||
</a-form-item>
|
||||
<a-form-item label="宝塔面板账号" name="panelAccount">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="宝塔面板账号"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.panelAccount"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{ form.panelAccount }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="宝塔面板密码"
|
||||
name="panelPassword"
|
||||
>
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="宝塔面板密码"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.panelPassword"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{ form.panelPassword }}</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="开放端口" name="openPort">
|
||||
<a-select
|
||||
v-if="editStatus"
|
||||
v-model:value="form.openPort"
|
||||
mode="tags"
|
||||
placeholder="请选择开放端口"
|
||||
></a-select>
|
||||
<a-tag v-else v-for="item in form.openPort">
|
||||
{{ item }}
|
||||
</a-tag>
|
||||
</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="状态" name="status">
|
||||
<DictSelect
|
||||
dict-code="serverStatus"
|
||||
placeholder="请选择状态"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.status"
|
||||
/>
|
||||
<template v-else>
|
||||
<a-tag :color="form.status == '正常' ? 'green' : ''">
|
||||
{{ form.status }}
|
||||
</a-tag>
|
||||
</template>
|
||||
</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="addAssetsDevUser"
|
||||
/>
|
||||
</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 assetsUsers">
|
||||
<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 v-if="editStatus" style="height: 8px" />
|
||||
<a-card v-if="editStatus" title="其他信息" :bordered="false">
|
||||
<template #extra>
|
||||
<a-button type="link" @click="handleEditStatus">{{ editStatus ? "预览" : "编辑" }}</a-button>
|
||||
</template>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="宝塔API接口秘钥" name="btSign">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="50"
|
||||
placeholder="宝塔API接口秘钥"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.btSign"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{ form.btSign }}</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 8 }"
|
||||
>
|
||||
<a-form-item label="排序" name="sortNumber">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="排序"
|
||||
v-if="editStatus"
|
||||
v-model:value="form.sortNumber"
|
||||
/>
|
||||
<span v-else class="ele-text-primary">{{ form.sortNumber }}</span>
|
||||
</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">{{ editStatus ? "预览" : "编辑" }}</a-button>
|
||||
</template>
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-editor
|
||||
v-if="editStatus"
|
||||
v-model:value="form.comments"
|
||||
:locale="zh_Hans"
|
||||
:plugins="plugins"
|
||||
height="300px"
|
||||
:editorConfig="{ lineNumbers: true }"
|
||||
/>
|
||||
<byte-md-viewer v-else :value="form.comments" :plugins="plugins" />
|
||||
</a-card>
|
||||
</a-form>
|
||||
</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, RuleObject } from "ant-design-vue/es/form";
|
||||
import { Assets } from "@/api/oa/assets/model";
|
||||
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
|
||||
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 { listAssetsUser, addAssetsUser, removeAssetsUser } from "@/api/oa/assets/user/index";
|
||||
import { AssetsUser } from "@/api/oa/assets/user/model";
|
||||
import { addAssets, updateAssets } from "@/api/oa/assets";
|
||||
import { isIP } from "ele-admin-pro";
|
||||
import { Company } from "@/api/system/company/model";
|
||||
import { Dayjs } from "dayjs";
|
||||
import { listAppUser } from "@/api/oa/app/user";
|
||||
import { pageCompany } from "@/api/system/company";
|
||||
|
||||
// 是否是修改
|
||||
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?: Assets | 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 assetsUsers = ref<AssetsUser[]>([]);
|
||||
const selectUser = ref<string>();
|
||||
const editStatus = ref(false);
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
// 类型 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 startTime = ref<Dayjs>();
|
||||
// 结束日期
|
||||
const endTime = ref<Dayjs>();
|
||||
const showAddUserForm = ref(false);
|
||||
|
||||
// 文件模型
|
||||
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<Assets>({
|
||||
type: "服务器",
|
||||
code: "",
|
||||
createTime: "",
|
||||
endTime: "",
|
||||
name: "",
|
||||
brand: undefined,
|
||||
account: "",
|
||||
password: "",
|
||||
panelAccount: "",
|
||||
panelPassword: "",
|
||||
panel: "",
|
||||
financeAmount: 0,
|
||||
financeYears: 0,
|
||||
financeRenew: 0,
|
||||
customerId: undefined,
|
||||
customerName: "",
|
||||
companyName: "",
|
||||
financeCustomerName: "",
|
||||
financeCustomerContact: "",
|
||||
financeCustomerPhone: "",
|
||||
brandAccount: "",
|
||||
brandPassword: "",
|
||||
btSign: "",
|
||||
openPort: "",
|
||||
configuration: "",
|
||||
comments: "",
|
||||
root: "root",
|
||||
sortNumber: 100,
|
||||
status: "0",
|
||||
assetsId: 0,
|
||||
visibility: "private",
|
||||
userList: [],
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit("update:visible", value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
type: "string",
|
||||
message: "请输入服务器名称",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
type: "string",
|
||||
message: "请输入合法的IP地址",
|
||||
trigger: "blur",
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (!isIP(value)) {
|
||||
const msg = "请输入合法的IP地址";
|
||||
try {
|
||||
if (!isIP(value)) {
|
||||
return Promise.reject(msg);
|
||||
}
|
||||
} catch (_e) {
|
||||
return Promise.reject(msg);
|
||||
}
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
],
|
||||
brand: [
|
||||
{
|
||||
required: true,
|
||||
type: "string",
|
||||
message: "请选择跟进状态",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
companyName: [
|
||||
{
|
||||
required: true,
|
||||
type: "string",
|
||||
message: "请选择所属企业",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
// assetsName: [
|
||||
// {
|
||||
// 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 chooseCompanyId = (data: Company) => {
|
||||
form.companyName = data.companyName;
|
||||
form.companyId = data.companyId;
|
||||
};
|
||||
|
||||
|
||||
// 添加开发成员
|
||||
const addAssetsDevUser = (data: User) => {
|
||||
addAssetsUser({
|
||||
userId: data.userId,
|
||||
assetsId: props.data?.assetsId,
|
||||
role: 20
|
||||
}).then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
|
||||
// 移除成员
|
||||
const removeUser = (data: AssetsUser) => {
|
||||
removeAssetsUser(data.id)
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const handleEditStatus = () => {
|
||||
editStatus.value = !editStatus.value;
|
||||
};
|
||||
|
||||
// const chooseAssetsName = (data: Assets) => {
|
||||
// form.assetsName = data.assetsName;
|
||||
// };
|
||||
|
||||
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 config = ref({
|
||||
width: 1000,
|
||||
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"
|
||||
});
|
||||
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 = "![" + result.name + "](" + FILE_SERVER + result.path + ")\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,
|
||||
openPort: form.openPort.toString(),
|
||||
configuration: form.configuration.toString()
|
||||
};
|
||||
// 转字符串
|
||||
const saveOrUpdate = isUpdate.value ? updateAssets : addAssets;
|
||||
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;
|
||||
// 加载项目成员
|
||||
listAssetsUser({assetsId:props.data?.assetsId}).then(data => {
|
||||
assetsUsers.value = data
|
||||
})
|
||||
// 加载企业信息
|
||||
const companyId = props.data?.companyId;
|
||||
// pageCompany({companyId}).then(res => {
|
||||
// form.tenantId = undefined;
|
||||
// const list = res?.list;
|
||||
// if(list && list.length > 0){
|
||||
// form.tenantId = list[0].tenantId;
|
||||
// }
|
||||
// })
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
content.value = "";
|
||||
requirement.value = "";
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
images.value = [];
|
||||
|
||||
// if (props.data.file1) {
|
||||
// file1.value = JSON.parse(props.data.file1);
|
||||
// }
|
||||
if (props.data.openPort) {
|
||||
form.openPort = props.data.openPort.split(",");
|
||||
}
|
||||
if (props.data.configuration) {
|
||||
form.configuration = props.data.configuration.split(",");
|
||||
}
|
||||
isUpdate.value = true;
|
||||
reload();
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
editStatus.value = true;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<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>
|
||||
130
src/views/oa/assets/server2/components/search.vue
Normal file
130
src/views/oa/assets/server2/components/search.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space>
|
||||
<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"
|
||||
@click="removeBatch"
|
||||
:disabled="props.selection.length === 0"
|
||||
>
|
||||
<template #icon>
|
||||
<DeleteOutlined />
|
||||
</template>
|
||||
<span>批量删除</span>
|
||||
</a-button>
|
||||
<SelectCompany
|
||||
:placeholder="`请选择所属企业`"
|
||||
v-model:value="where.companyName"
|
||||
@done="chooseCompanyName"
|
||||
/>
|
||||
<DictSelect
|
||||
dict-code="serverBrand"
|
||||
:placeholder="`品牌厂商`"
|
||||
v-model:value="where.brand"
|
||||
style="width: 100px"
|
||||
@change="onBrand"
|
||||
/>
|
||||
<DictSelect
|
||||
dict-code="serverStatus"
|
||||
:placeholder="`主机状态`"
|
||||
v-model:value="where.status"
|
||||
style="width: 100px"
|
||||
@change="onStatus"
|
||||
/>
|
||||
<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 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';
|
||||
import { Company } from '@/api/system/company/model';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: AssetsParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 勾选的项目
|
||||
selection?: [];
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<AssetsParam>({
|
||||
keywords: '',
|
||||
name: '',
|
||||
code: '',
|
||||
isExpire: '',
|
||||
companyName: '',
|
||||
userId: undefined
|
||||
});
|
||||
// 日期范围选择
|
||||
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 chooseCompanyName = (data: Company) => {
|
||||
where.companyName = data.companyName;
|
||||
where.companyId = data.companyId;
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
const onStatus = (text) => {
|
||||
where.status = text;
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
const onBrand = (text) => {
|
||||
where.brand = text;
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
// 批量删除
|
||||
const removeBatch = () => {
|
||||
emit('remove');
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
search();
|
||||
};
|
||||
|
||||
// 监听字典id变化
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
295
src/views/oa/assets/server2/index.vue
Normal file
295
src/views/oa/assets/server2/index.vue
Normal file
@@ -0,0 +1,295 @@
|
||||
<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: 1200 }"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
:selection="selection"
|
||||
@search="reload"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'customer'">
|
||||
{{ record.nickname }}
|
||||
</template>
|
||||
<template v-if="column.key === 'name'">
|
||||
<a-tooltip title="查看详情">
|
||||
{{ record.name }}
|
||||
</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 :color="record.status === '正常' ? 'green' : 'red'">
|
||||
{{ record.status }}
|
||||
</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" />
|
||||
</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 { 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 { pageAssets, removeAssets, removeBatchAssets } from '@/api/oa/assets';
|
||||
import type { Assets, AssetsParam } from '@/api/oa/assets/model';
|
||||
import { getEndTime } from '@/utils/common';
|
||||
|
||||
// 表格实例
|
||||
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: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '服务器IP',
|
||||
dataIndex: 'code',
|
||||
key: 'code'
|
||||
},
|
||||
{
|
||||
title: '品牌',
|
||||
dataIndex: 'brand'
|
||||
},
|
||||
{
|
||||
title: '所属企业',
|
||||
dataIndex: 'companyName',
|
||||
key: 'companyName'
|
||||
},
|
||||
// {
|
||||
// title: '备注',
|
||||
// dataIndex: 'comments',
|
||||
// key: 'comments',
|
||||
// ellipsis: true
|
||||
// },
|
||||
{
|
||||
title: '有效期',
|
||||
dataIndex: 'endTime',
|
||||
key: 'endTime',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
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 }) => {
|
||||
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: () => {
|
||||
openEdit(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>
|
||||
701
src/views/oa/company/components/company-edit.vue
Normal file
701
src/views/oa/company/components/company-edit.vue
Normal file
@@ -0,0 +1,701 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="60%"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:title="isUpdate ? '编辑企业' : '添加企业'"
|
||||
:body-style="{ paddingBottom: '28px', backgroundColor: '#F0F2F5FF' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 20 }, sm: { span: 20 }, xs: { span: 24 } }"
|
||||
>
|
||||
<a-card title="基本信息" :bordered="false">
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 11, 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="companyType">
|
||||
<DictSelect
|
||||
dict-code="CompanyType"
|
||||
placeholder="请选择企业类型"
|
||||
v-model:value="form.companyType"
|
||||
/>
|
||||
</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="legal">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请填写法定代表人"
|
||||
v-model:value="form.businessEntity"
|
||||
/>
|
||||
</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-form-item label="座机电话" name="tel">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请填写座机电话"
|
||||
v-model:value="form.tel"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="电子邮箱" name="email">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请填写电子邮箱"
|
||||
v-model:value="form.email"
|
||||
/>
|
||||
</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="LOGO" name="logo">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="1"
|
||||
:data="images"
|
||||
@done="chooseFile"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
<!-- <ele-image-upload-->
|
||||
<!-- v-model:value="images"-->
|
||||
<!-- :accept="'image/png,image/jpeg,image/webp'"-->
|
||||
<!-- :item-style="{ width: '120px', height: '120px' }"-->
|
||||
<!-- :limit="1"-->
|
||||
<!-- @upload="onUpload"-->
|
||||
<!-- />-->
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 11, 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="industry">
|
||||
<industry-select
|
||||
v-model:value="industry"
|
||||
valueField="label"
|
||||
placeholder="请选择所属行业"
|
||||
class="ele-fluid"
|
||||
/>
|
||||
</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="所属区域"
|
||||
/>
|
||||
<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="region">
|
||||
<regions-select
|
||||
v-model:value="city"
|
||||
valueField="label"
|
||||
placeholder="请选择省市区"
|
||||
class="ele-fluid"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="办公地址" name="address">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入企业办公地址"
|
||||
v-model:value="form.address"
|
||||
/>
|
||||
</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-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"
|
||||
/>
|
||||
</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/oa/company/model';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { uploadFile, uploadOss } 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/oa/company";
|
||||
import { CenterPoint } from "ele-admin-pro/es/ele-map-picker/types";
|
||||
import {FileRecord} from "@/api/system/file/model";
|
||||
|
||||
// 是否是修改
|
||||
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: '',
|
||||
businessEntity: '',
|
||||
companyType: undefined,
|
||||
industryParent: '',
|
||||
industryChild: '',
|
||||
shortName: '',
|
||||
tel: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
companyLogo: undefined,
|
||||
domain: '',
|
||||
sortNumber: undefined,
|
||||
comments: '',
|
||||
tenantName: '',
|
||||
province: '',
|
||||
city: '',
|
||||
region: '',
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
address: '',
|
||||
nickname: '',
|
||||
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'
|
||||
}
|
||||
],
|
||||
companyType: [
|
||||
{
|
||||
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 chooseUser = (data: User) => {
|
||||
form.nickname = data.nickname
|
||||
form.userId = data.userId
|
||||
}
|
||||
|
||||
// 移除成员
|
||||
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 = [];
|
||||
uploadOss(file)
|
||||
.then((data) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.url,
|
||||
status: 'done'
|
||||
});
|
||||
form.companyLogo = data.url;
|
||||
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 chooseFile = (data: FileRecord) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.path,
|
||||
status: 'done'
|
||||
});
|
||||
form.companyLogo = data.path;
|
||||
}
|
||||
|
||||
const onDeleteItem = (index: number) => {
|
||||
images.value.splice(index,1)
|
||||
form.companyLogo = '';
|
||||
}
|
||||
|
||||
/* 保存编辑 */
|
||||
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 industry = ref<string[]>([
|
||||
String(form.industryParent),
|
||||
String(form.industryChild)
|
||||
]);
|
||||
|
||||
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: props.data.companyLogo,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
industry.value[0] = String(props.data.industryParent);
|
||||
industry.value[1] = String(props.data.industryChild);
|
||||
|
||||
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);
|
||||
}
|
||||
// 所在地区
|
||||
if(props.data.province){
|
||||
city.value.push(props.data.province)
|
||||
}
|
||||
if(props.data.city){
|
||||
city.value.push(props.data.city)
|
||||
}
|
||||
if(props.data.region){
|
||||
city.value.push(props.data.region)
|
||||
}
|
||||
isUpdate.value = true;
|
||||
reload();
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less">
|
||||
.upload-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.full-modal {
|
||||
.ant-modal {
|
||||
max-width: 100%;
|
||||
top: 0;
|
||||
padding-bottom: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.ant-modal-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh);
|
||||
}
|
||||
.ant-modal-body {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
298
src/views/oa/company/components/company-info.vue
Normal file
298
src/views/oa/company/components/company-info.vue
Normal file
@@ -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/oa/company';
|
||||
import { Company } from '@/api/oa/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>
|
||||
232
src/views/oa/company/components/search.vue
Normal file
232
src/views/oa/company/components/search.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<a-space style="flex-wrap: wrap">
|
||||
<a-button type="primary" class="ele-btn-icon" @click="add">
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
<span>添加</span>
|
||||
</a-button>
|
||||
<!-- <a-button class="ele-btn-icon" @click="openImport">-->
|
||||
<!-- <template #icon>-->
|
||||
<!-- <UploadOutlined />-->
|
||||
<!-- </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
|
||||
class="ele-btn-icon"
|
||||
v-if="selection?.length > 0"
|
||||
@click="handleExport"
|
||||
>
|
||||
<span>导出</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
<a-space :size="10" style="flex-wrap: wrap; margin-right: 20px">
|
||||
<regions-select
|
||||
v-model:value="city"
|
||||
type="provinceCity"
|
||||
valueField="label"
|
||||
placeholder="请选择省市区"
|
||||
class="ele-fluid"
|
||||
@change="handleCity"
|
||||
/>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入关键词"
|
||||
v-model:value="searchText"
|
||||
@pressEnter="search"
|
||||
@search="search"
|
||||
/>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
PlusOutlined,
|
||||
UploadOutlined,
|
||||
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 { 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 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>
|
||||
245
src/views/oa/company/detail/components/company-about-edit.vue
Normal file
245
src/views/oa/company/detail/components/company-about-edit.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="80%"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑' : '新增'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
|
||||
>
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-editor
|
||||
v-model:value="content"
|
||||
placeholder="请输入您的内容，图片请直接粘贴"
|
||||
:locale="zh_Hans"
|
||||
mode="split"
|
||||
:plugins="plugins"
|
||||
height="500px"
|
||||
:editorConfig="{ lineNumbers: true }"
|
||||
@paste="onPaste"
|
||||
/>
|
||||
</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 { addCompany, updateCompany } from '@/api/oa/company';
|
||||
import type { Company } from '@/api/oa/company/model';
|
||||
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 highlight from '@bytemd/plugin-highlight';
|
||||
// 中文语言文件
|
||||
import gfm from '@bytemd/plugin-gfm';
|
||||
// // 预览界面的样式，这里用的 github 的 markdown 主题
|
||||
import 'github-markdown-css/github-markdown-light.css';
|
||||
import {FormInstance} from 'ant-design-vue/es/form';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { uploadFile } from "@/api/system/file";
|
||||
import { TOKEN_STORE_NAME } 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 images = ref<ItemType[]>([]);
|
||||
const content = ref('');
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
const token = localStorage.getItem(TOKEN_STORE_NAME);
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<Company>({
|
||||
// 应用id
|
||||
companyId: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(form);
|
||||
|
||||
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(result.url);
|
||||
} else {
|
||||
error('上传失败');
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
/* 粘贴图片上传服务器并插入编辑器 */
|
||||
const onPaste = (e) => {
|
||||
const items = (e.clipboardData || e.originalEvent.clipboardData).items;
|
||||
let hasFile = false;
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (items[i].type.indexOf('image') !== -1) {
|
||||
let file = items[i].getAsFile();
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).lastModified,
|
||||
name: file.name
|
||||
};
|
||||
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 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 = (item) => {
|
||||
const { file } = item;
|
||||
uploadFile(file)
|
||||
.then((data) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.url,
|
||||
status: 'done'
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
content.value = '';
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
if (props.data.content) {
|
||||
content.value = props.data.content;
|
||||
}
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
60
src/views/oa/company/detail/components/company-about.vue
Normal file
60
src/views/oa/company/detail/components/company-about.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<a-descriptions title="企业简介" :bordered="false">
|
||||
<template #extra>
|
||||
<a @click="openEdit">编辑</a>
|
||||
</template>
|
||||
</a-descriptions>
|
||||
<byte-md-viewer :value="data.content" :plugins="plugins" />
|
||||
<a-empty
|
||||
v-if="data.content == ''"
|
||||
image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
|
||||
:image-style="{
|
||||
height: '60px'
|
||||
}"
|
||||
>
|
||||
<template #description>
|
||||
<span class="ele-text-placeholder">请填写企业简介</span>
|
||||
</template>
|
||||
<a-button type="primary" @click="openEdit">立即填写</a-button>
|
||||
</a-empty>
|
||||
<!-- 编辑弹窗 -->
|
||||
<CompanyAboutEdit v-model:visible="showEdit" :data="data" @done="reload" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import gfm from '@bytemd/plugin-gfm';
|
||||
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
|
||||
import highlight from '@bytemd/plugin-highlight';
|
||||
import 'bytemd/dist/index.min.css';
|
||||
import 'github-markdown-css/github-markdown-light.css';
|
||||
import 'github-markdown-css/github-markdown-light.css';
|
||||
import CompanyAboutEdit from './company-about-edit.vue';
|
||||
|
||||
defineProps<{
|
||||
data: any;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
}>();
|
||||
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = () => {
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
emit('done');
|
||||
};
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
</script>
|
||||
221
src/views/oa/company/detail/components/company-annex-edit.vue
Normal file
221
src/views/oa/company/detail/components/company-annex-edit.vue
Normal file
@@ -0,0 +1,221 @@
|
||||
<!-- 角色编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="600"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate ? '编辑内容' : '上传文件'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="上传文件" name="fileName" v-if="!isUpdate">
|
||||
<span
|
||||
class="ele-text-success"
|
||||
v-if="fileName"
|
||||
style="margin-right: 10px"
|
||||
>
|
||||
{{ fileName }}
|
||||
</span>
|
||||
<a-upload
|
||||
:show-upload-list="false"
|
||||
:accept="'video/*'"
|
||||
v-if="!fileName"
|
||||
:customRequest="onUpload"
|
||||
>
|
||||
<a-button type="primary" class="ele-btn-icon">
|
||||
<template #icon>
|
||||
<UploadOutlined />
|
||||
</template>
|
||||
<span>上传文件</span>
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
<a-form-item label="设置分类" name="name">
|
||||
<SelectDict
|
||||
dict-code="groupId"
|
||||
:placeholder="`选择分类`"
|
||||
v-model:value="form.groupName"
|
||||
@done="chooseGroupId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="文件名称" name="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入文件名称"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</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-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import type { FileRecord } from '@/api/system/file/model';
|
||||
import { messageLoading } from 'ele-admin-pro';
|
||||
import { addFiles, updateFiles, uploadFile } from '@/api/system/file';
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
import { RuleObject } from 'ant-design-vue/es/form';
|
||||
import { DictData } from '@/api/system/dict-data/model';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: FileRecord | null;
|
||||
}>();
|
||||
|
||||
//
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
const fileName = ref('');
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<FileRecord>({
|
||||
id: 0,
|
||||
name: '',
|
||||
comments: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
fileName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请上传文件',
|
||||
type: 'string',
|
||||
trigger: 'blur',
|
||||
validator: async (_rule: RuleObject) => {
|
||||
if (!isUpdate.value && fileName.value.length == 0) {
|
||||
return Promise.reject('请上传文件');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入文件名称',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const chooseGroupId = (item: DictData) => {
|
||||
form.groupId = item.dictDataId;
|
||||
form.groupName = item.dictDataName;
|
||||
};
|
||||
|
||||
// 上传文件
|
||||
const onUpload = (item) => {
|
||||
const { file } = item;
|
||||
if (!file.type.startsWith('video')) {
|
||||
message.error('文件格式不正确！');
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 100) {
|
||||
message.error('大小不能超过 100MB');
|
||||
return;
|
||||
}
|
||||
const hide = messageLoading({
|
||||
content: '上传中..',
|
||||
duration: 0,
|
||||
mask: true
|
||||
});
|
||||
uploadFile(file)
|
||||
.then((data) => {
|
||||
hide();
|
||||
fileName.value = String(data.name);
|
||||
message.success('上传成功');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
hide();
|
||||
});
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const saveOrUpdate = isUpdate.value ? updateFiles : addFiles;
|
||||
saveOrUpdate(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignFields(props.data);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
301
src/views/oa/company/detail/components/company-annex.vue
Normal file
301
src/views/oa/company/detail/components/company-annex.vue
Normal file
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
:scroll="{ x: 800 }"
|
||||
cache-key="proCompanyAnnexTable"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-upload :show-upload-list="false" :customRequest="onUpload">
|
||||
<a-button class="ele-btn-icon">
|
||||
<template #icon>
|
||||
<UploadOutlined />
|
||||
</template>
|
||||
<span>上传文件</span>
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
v-if="selection.length > 0"
|
||||
@click="removeBatch"
|
||||
>
|
||||
<template #icon>
|
||||
<delete-outlined />
|
||||
</template>
|
||||
<span>删除</span>
|
||||
</a-button>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
v-model:value="searchText"
|
||||
placeholder="请输入关键词"
|
||||
@search="reload"
|
||||
@pressEnter="reload"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'name'">
|
||||
<span>{{ record.name }}</span>
|
||||
<a-tooltip :title="`复制链接地址`">
|
||||
<copy-outlined
|
||||
style="padding-left: 4px"
|
||||
@click="copyText(record.url)"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a @click="openNew(record.url)">预览</a>
|
||||
<a-divider type="vertical" />
|
||||
<a :href="record.downloadUrl" target="_blank">下载</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click="openEdit(record)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
placement="topRight"
|
||||
title="确定要删除此文件吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
<!-- 编辑弹窗 -->
|
||||
<company-annex-edit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref, watch } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue/es';
|
||||
import {
|
||||
UploadOutlined,
|
||||
DeleteOutlined,
|
||||
CopyOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { messageLoading, toDateString } from 'ele-admin-pro/es';
|
||||
import CompanyAnnexEdit from './company-annex-edit.vue';
|
||||
import {
|
||||
pageFiles,
|
||||
removeFile,
|
||||
removeFiles,
|
||||
uploadFileLocalByCompany
|
||||
} from '@/api/system/file';
|
||||
import type { FileRecord, FileRecordParam } from '@/api/system/file/model';
|
||||
import { copyText, openNew } from '@/utils/common';
|
||||
|
||||
const props = defineProps<{
|
||||
companyId: any;
|
||||
data: any;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
// 表格选中数据
|
||||
const selection = ref<FileRecord[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<FileRecord | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
const type = ref('name');
|
||||
const groupId = ref<number>(0);
|
||||
const searchText = ref('');
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '文件名称',
|
||||
dataIndex: 'name',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'comments',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '文件大小',
|
||||
dataIndex: 'length',
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => {
|
||||
if (text < 1024) {
|
||||
return text + 'B';
|
||||
} else if (text < 1024 * 1024) {
|
||||
return (text / 1024).toFixed(1) + 'KB';
|
||||
} else if (text < 1024 * 1024 * 1024) {
|
||||
return (text / 1024 / 1024).toFixed(1) + 'M';
|
||||
} else {
|
||||
return (text / 1024 / 1024 / 1024).toFixed(1) + 'G';
|
||||
}
|
||||
},
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '上传者',
|
||||
width: 120,
|
||||
dataIndex: 'createNickname'
|
||||
},
|
||||
{
|
||||
title: '上传时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
width: 180,
|
||||
showSorterTooltip: false,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 260,
|
||||
align: 'center'
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
where = {};
|
||||
if (type.value == 'name') {
|
||||
where.name = searchText.value;
|
||||
}
|
||||
if (type.value == 'createNickname') {
|
||||
where.createNickname = searchText.value;
|
||||
}
|
||||
if (groupId.value > 0) {
|
||||
where.groupId = groupId.value;
|
||||
}
|
||||
// where.contentType = 'companylication';
|
||||
where.companyId = props.companyId;
|
||||
return pageFiles({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: FileRecordParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: FileRecord) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: FileRecord) => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeFile(row.id)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的文件吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeFiles(selection.value.map((d) => d.id))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 上传文件
|
||||
const onUpload = (item) => {
|
||||
const { file } = item;
|
||||
if (file.size / 1024 / 1024 > 100) {
|
||||
message.error('大小不能超过 100MB');
|
||||
return;
|
||||
}
|
||||
const hide = messageLoading({
|
||||
content: '上传中..',
|
||||
duration: 0,
|
||||
mask: true
|
||||
});
|
||||
uploadFileLocalByCompany(file, props.data.companyId)
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
hide();
|
||||
message.success('上传成功');
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
hide();
|
||||
});
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: FileRecord) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
window.open(record.url);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.companyId,
|
||||
(companyId) => {
|
||||
if (companyId) {
|
||||
reload();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CompanyAnnexIndex'
|
||||
};
|
||||
</script>
|
||||
177
src/views/oa/company/detail/components/company-field-edit.vue
Normal file
177
src/views/oa/company/detail/components/company-field-edit.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="1000"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑资料' : '添加资料'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{ md: { span: 2 }, sm: { span: 4 }, xs: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 21 }, sm: { span: 22 }, xs: { span: 24 } }"
|
||||
>
|
||||
<a-form-item label="名称" name="name">
|
||||
<a-input allow-clear placeholder="字段名称" v-model:value="form.name" />
|
||||
</a-form-item>
|
||||
<a-form-item label="资料" name="comments">
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-editor
|
||||
v-model:value="form.comments"
|
||||
placeholder="资料内容"
|
||||
:locale="zh_Hans"
|
||||
mode="split"
|
||||
:plugins="plugins"
|
||||
height="300px"
|
||||
maxLength="500"
|
||||
:editorConfig="{ lineNumbers: true }"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sortNumber">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="99999"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入排序号"
|
||||
v-model:value="form.sortNumber"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { FormInstance } from 'ant-design-vue/es/form';
|
||||
import { CompanyField } from '@/api/oa/company/field/model';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { decrypt, encrypt } from '@/utils/common';
|
||||
import { addCompanyField, updateCompanyField } from '@/api/oa/company/field';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import zh_Hans from 'bytemd/locales/zh_Hans.json';
|
||||
import gfm from '@bytemd/plugin-gfm';
|
||||
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
|
||||
import highlight from '@bytemd/plugin-highlight';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
companyId: number | null | undefined;
|
||||
// 修改回显的数据
|
||||
data?: CompanyField | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
const { form, resetFields, assignFields } = useFormData<CompanyField>({
|
||||
id: undefined,
|
||||
companyId: undefined,
|
||||
name: '',
|
||||
comments: '',
|
||||
status: 0,
|
||||
sortNumber: 0
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
comments: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写内容'
|
||||
}
|
||||
],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const data = {
|
||||
...form,
|
||||
companyId: props.companyId
|
||||
};
|
||||
// 加密信息处理
|
||||
if (form.comments != '') {
|
||||
data.comments = encrypt(form.comments);
|
||||
} else {
|
||||
data.comments = undefined;
|
||||
}
|
||||
const saveOrUpdate = isUpdate.value ? updateCompanyField : addCompanyField;
|
||||
console.log(isUpdate.value);
|
||||
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) {
|
||||
const comments = decrypt(props.data.comments);
|
||||
assignFields(props.data);
|
||||
form.comments = comments;
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<a-button @click="add">添加资料</a-button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const emit = defineEmits<{
|
||||
(e: 'add'): void;
|
||||
}>();
|
||||
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
</script>
|
||||
211
src/views/oa/company/detail/components/company-field.vue
Normal file
211
src/views/oa/company/detail/components/company-field.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div class="company-task">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="fieldId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<CompanyFieldSearch @add="openEdit" @remove="removeBatch" />
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'comments'">
|
||||
<byte-md-viewer
|
||||
:value="decrypt(record.comments)"
|
||||
:plugins="plugins"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a @click="moveUp(record)">上移<ArrowUpOutlined /></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>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
<!-- 编辑弹窗 -->
|
||||
<CompanyFieldEdit
|
||||
v-model:visible="showEdit"
|
||||
:company-id="data.companyId"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref, watch } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import CompanyFieldSearch from './company-field-search.vue';
|
||||
import { decrypt } from '@/utils/common';
|
||||
import { Company } from '@/api/oa/company/model';
|
||||
import CompanyFieldEdit from './company-field-edit.vue';
|
||||
import {
|
||||
CompanyField,
|
||||
CompanyFieldParam
|
||||
} from '@/api/oa/company/field/model';
|
||||
import {
|
||||
pageCompanyField,
|
||||
removeCompanyField,
|
||||
removeBatchCompanyField,
|
||||
updateCompanyField
|
||||
} from '@/api/oa/company/field';
|
||||
import { ArrowUpOutlined } from '@ant-design/icons-vue';
|
||||
import gfm from '@bytemd/plugin-gfm';
|
||||
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
|
||||
import highlight from '@bytemd/plugin-highlight';
|
||||
|
||||
const props = defineProps<{
|
||||
companyId: any;
|
||||
data: Company;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
const selection = ref<any[]>();
|
||||
// 当前编辑数据
|
||||
const current = ref<CompanyField | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
// 搜索条件
|
||||
where.companyId = props.companyId;
|
||||
return pageCompanyField({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<any[]>([
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '内容',
|
||||
dataIndex: 'comments',
|
||||
key: 'comments',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortNumber',
|
||||
sorter: true,
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
const moveUp = (row?: CompanyField) => {
|
||||
updateCompanyField({
|
||||
id: row?.id,
|
||||
sortNumber: Number(row?.sortNumber) + 1
|
||||
}).then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
});
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CompanyField) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CompanyFieldParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CompanyField) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCompanyField(row.id)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value?.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
if (selection.value?.length) {
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchCompanyField(selection.value.map((d) => d.id))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
watch(
|
||||
() => props.companyId,
|
||||
(companyId) => {
|
||||
if (companyId) {
|
||||
reload();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CompanyFieldIndex'
|
||||
};
|
||||
</script>
|
||||
500
src/views/oa/company/detail/components/company-info-edit.vue
Normal file
500
src/views/oa/company/detail/components/company-info-edit.vue
Normal file
@@ -0,0 +1,500 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="80%"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑' : '新增'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<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-descriptions title="基本信息" :column="2" bordered>
|
||||
<a-descriptions-item
|
||||
label="AppId"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.appId }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="状态"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<DictSelect
|
||||
dict-code="appstoreStatus"
|
||||
placeholder="请选择应用状态"
|
||||
style="width: 200px"
|
||||
v-model:value="form.appStatus"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="AppSecret"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<span>****</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="名称"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入应用名称"
|
||||
v-model:value="form.appName"
|
||||
/></a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="标识"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
><a-input
|
||||
allow-clear
|
||||
placeholder="请输入应用标识(英文字母)"
|
||||
v-model:value="form.appCode"
|
||||
@change="changeAppCode"
|
||||
/></a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="所属企业"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<SelectCompany
|
||||
:placeholder="`所属企业`"
|
||||
v-model:value="form.companyName"
|
||||
@done="chooseCompanyName"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="主域名"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入主域名"
|
||||
v-model:value="form.appUrl"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="项目类型"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<DictSelect
|
||||
dict-code="appType"
|
||||
placeholder="请选择项目类型"
|
||||
v-model:value="form.appType"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="描述"
|
||||
:span="2"
|
||||
layout="vertical"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入应用描述"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="头像"
|
||||
layout="vertical"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<ele-image-upload
|
||||
v-model:value="logo"
|
||||
:item-style="{ width: '90px', height: '90px' }"
|
||||
:limit="1"
|
||||
@upload="onUploadIcon"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="二维码"
|
||||
layout="vertical"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<ele-image-upload
|
||||
v-model:value="appQrcode"
|
||||
:item-style="{ width: '90px', height: '90px' }"
|
||||
:limit="1"
|
||||
@upload="onUploadQrcode"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { assignObject, ipReg, isChinese } from 'ele-admin-pro';
|
||||
import { addApp, updateApp } from '@/api/oa/app';
|
||||
import type { App } from '@/api/oa/app/model';
|
||||
import { FormInstance, RuleObject } 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 { uploadFile } from '@/api/system/file';
|
||||
import { TOKEN_STORE_NAME } from '@/config/setting';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: App | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
// 当期时间
|
||||
// 已上传数据
|
||||
const logo = ref<ItemType[]>([]);
|
||||
const appQrcode = ref<ItemType[]>([]);
|
||||
const images = ref<ItemType[]>([]);
|
||||
// 日期范围选择
|
||||
const content = ref('');
|
||||
|
||||
const token = localStorage.getItem(TOKEN_STORE_NAME);
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<App>({
|
||||
// 应用id
|
||||
appId: undefined,
|
||||
// 应用秘钥
|
||||
appSecret: '',
|
||||
enName: '',
|
||||
// 应用名称
|
||||
appName: '',
|
||||
// 上级id, 0是顶级
|
||||
parentId: undefined,
|
||||
// 应用编号
|
||||
appCode: '',
|
||||
// 应用图标
|
||||
appIcon: '',
|
||||
appQrcode: '',
|
||||
// 应用截图
|
||||
images: '',
|
||||
appType: undefined,
|
||||
appTypeMultiple: undefined,
|
||||
// 菜单类型
|
||||
menuType: undefined,
|
||||
// 应用地址
|
||||
appUrl: '',
|
||||
// 后台管理地址
|
||||
adminUrl: undefined,
|
||||
// 下载地址
|
||||
downUrl: undefined,
|
||||
serverUrl: undefined,
|
||||
callbackUrl: undefined,
|
||||
gitUrl: undefined,
|
||||
docsUrl: undefined,
|
||||
prototypeUrl: undefined,
|
||||
ipAddress: undefined,
|
||||
fileUrl: undefined,
|
||||
// 应用包名
|
||||
packageName: '',
|
||||
// 点击次数
|
||||
clicks: '',
|
||||
// 安装次数
|
||||
installs: '',
|
||||
// 项目介绍
|
||||
content: '',
|
||||
// 开发者(个人)
|
||||
developer: '',
|
||||
director: '',
|
||||
projectDirector: '',
|
||||
salesman: '',
|
||||
// 软件定价
|
||||
price: '',
|
||||
// 评分
|
||||
score: '',
|
||||
// 星级
|
||||
star: '',
|
||||
// 菜单组件地址
|
||||
component: '',
|
||||
// 菜单路由地址
|
||||
path: '',
|
||||
// 权限标识
|
||||
authority: '',
|
||||
// 打开位置
|
||||
target: '',
|
||||
// 是否隐藏, 0否, 1是(仅注册路由不显示在左侧菜单)
|
||||
hide: undefined,
|
||||
// 菜单侧栏选中的path
|
||||
active: '',
|
||||
// 其它路由元信息
|
||||
meta: '',
|
||||
// 版本
|
||||
edition: '',
|
||||
// 版本号
|
||||
version: '',
|
||||
// 是否已安装
|
||||
isUse: undefined,
|
||||
// 排序
|
||||
sortNumber: undefined,
|
||||
// 备注
|
||||
comments: undefined,
|
||||
tenantName: '',
|
||||
companyName: '',
|
||||
// 租户编号
|
||||
tenantCode: '',
|
||||
// 租户id
|
||||
tenantId: undefined,
|
||||
// 创建时间
|
||||
createTime: '',
|
||||
appStatus: '开发中',
|
||||
// 状态
|
||||
status: undefined,
|
||||
// 发布者
|
||||
userId: '',
|
||||
// 发布者昵称
|
||||
nickname: '',
|
||||
// 子菜单
|
||||
children: [],
|
||||
// 权限树回显选中状态, 0未选中, 1选中
|
||||
checked: false,
|
||||
//
|
||||
key: undefined,
|
||||
//
|
||||
value: undefined,
|
||||
//
|
||||
parentIds: [],
|
||||
//
|
||||
openType: undefined,
|
||||
//
|
||||
search: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
appName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入应用名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
companyName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请选择所属企业',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
appCode: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入应用标识(英文字母)',
|
||||
trigger: 'blur',
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (isChinese(value)) {
|
||||
return Promise.reject('请输入正确的应用标识');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
],
|
||||
appType: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择项目类型'
|
||||
}
|
||||
],
|
||||
ipAddress: [
|
||||
{
|
||||
pattern: ipReg,
|
||||
message: 'IP地址不合法',
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
appStatus: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请选择应用状态',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const { resetFields, validate } = useForm(form, rules);
|
||||
|
||||
const chooseCompanyName = (data: Company) => {
|
||||
form.appUrl = data.domain;
|
||||
form.companyName = data.companyName;
|
||||
form.companyId = data.companyId;
|
||||
form.tenantId = data.tenantId;
|
||||
};
|
||||
|
||||
const changeAppCode = (e) => {
|
||||
form.packageName = `com.gxwebsoft.${form.appCode}`;
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form,
|
||||
content: content.value,
|
||||
search: form.search ? 1 : 0,
|
||||
images: JSON.stringify(images.value)
|
||||
// appTypeMultiple: JSON.stringify(form.appTypeMultiple)
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateApp : addApp;
|
||||
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 onUploadIcon = (item) => {
|
||||
const { file } = item;
|
||||
logo.value = [];
|
||||
uploadFile(file)
|
||||
.then((data) => {
|
||||
logo.value.push({
|
||||
uid: data.id,
|
||||
url: data.url,
|
||||
status: 'done'
|
||||
});
|
||||
form.appIcon = data.url;
|
||||
message.success('上传成功');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const onUploadQrcode = (item) => {
|
||||
const { file } = item;
|
||||
appQrcode.value = [];
|
||||
uploadFile(file)
|
||||
.then((data) => {
|
||||
appQrcode.value.push({
|
||||
uid: data.id,
|
||||
url: data.url,
|
||||
status: 'done'
|
||||
});
|
||||
form.appQrcode = data.url;
|
||||
message.success('上传成功');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 上传文件
|
||||
const onUpload = (item) => {
|
||||
const { file } = item;
|
||||
uploadFile(file)
|
||||
.then((data) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.url,
|
||||
status: 'done'
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
content.value = '';
|
||||
logo.value = [];
|
||||
images.value = [];
|
||||
appQrcode.value = [];
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
if (props.data.appIcon) {
|
||||
logo.value.push({
|
||||
uid: 0,
|
||||
url: props.data.appIcon,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
if (props.data.appQrcode) {
|
||||
appQrcode.value.push({
|
||||
uid: 0,
|
||||
url: props.data.appQrcode,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
if (props.data.companyId) {
|
||||
console.log(props.data);
|
||||
}
|
||||
if (props.data.images) {
|
||||
const arr = JSON.parse(props.data.images);
|
||||
arr.map((d) => {
|
||||
images.value.push({
|
||||
uid: d.uid,
|
||||
url: d.url,
|
||||
status: 'done'
|
||||
});
|
||||
});
|
||||
}
|
||||
if (props.data.search) {
|
||||
form.search = props.data.search == 1 ? true : 0;
|
||||
}
|
||||
if (props.data.content) {
|
||||
content.value = props.data.content;
|
||||
}
|
||||
isUpdate.value = true;
|
||||
reload();
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
161
src/views/oa/company/detail/components/company-info.vue
Normal file
161
src/views/oa/company/detail/components/company-info.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<a-descriptions title="基本信息" :column="2" bordered>
|
||||
<template #extra>
|
||||
<a @click="openEdit">编辑</a>
|
||||
</template>
|
||||
<a-descriptions-item
|
||||
label="企业名称"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.companyName }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="状态"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<template v-if="data.status == 0">
|
||||
<a-badge status="processing" :text="`正常`" />
|
||||
</template>
|
||||
<template v-if="data.status == 1">
|
||||
<a-badge status="default" :text="`冻结`" />
|
||||
</template>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="客户简称"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.shortName }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="客户类型"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.companyType }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="统一社会信用代码"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.companyCode }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="所属行业"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<a-space class="justify">
|
||||
{{ data.industryParent }}
|
||||
{{ data.industryChild ? data.industryChild : '-' }}
|
||||
</a-space>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="法定代表人"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
{{ data.businessEntity }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="所属区域"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<a-space class="justify">
|
||||
<span
|
||||
>{{ data.province }} {{ data.city }}
|
||||
{{ data.region ? data.region : '-' }}</span
|
||||
>
|
||||
</a-space>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="手机号码"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
{{ data.phone }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="办公地址"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
{{ data.address }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="座机电话"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
{{ data.tel }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="描述"
|
||||
:span="2"
|
||||
layout="vertical"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
{{ data.comments }}
|
||||
</a-descriptions-item>
|
||||
|
||||
<a-descriptions-item
|
||||
label="电子邮箱"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
{{ data.email }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="官方网站"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
{{ data.domain }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="logo"
|
||||
layout="vertical"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<ele-image-upload
|
||||
v-model:value="logo"
|
||||
:disabled="true"
|
||||
:item-style="{ width: '90px', height: '90px' }"
|
||||
:limit="1"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<!-- <a-descriptions-item-->
|
||||
<!-- label="二维码"-->
|
||||
<!-- layout="vertical"-->
|
||||
<!-- :labelStyle="{ width: '200px', color: '#808080' }"-->
|
||||
<!-- >-->
|
||||
<!-- <ele-image-upload-->
|
||||
<!-- v-model:value="companyQrcode"-->
|
||||
<!-- :disabled="true"-->
|
||||
<!-- :item-style="{ width: '90px', height: '90px' }"-->
|
||||
<!-- :limit="1"-->
|
||||
<!-- />-->
|
||||
<!-- </a-descriptions-item>-->
|
||||
</a-descriptions>
|
||||
<!-- 编辑弹窗 -->
|
||||
<CompanyInfoEdit v-model:visible="showEdit" :data="data" @done="reload" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Company } from '@/api/oa/company/model';
|
||||
import { ref } from 'vue';
|
||||
import CompanyInfoEdit from './company-info-edit.vue';
|
||||
|
||||
defineProps<{
|
||||
data: Company;
|
||||
logo: [] | any;
|
||||
companyQrcode: any | undefined;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
}>();
|
||||
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
const showCompanySecretForm = ref<boolean>(false);
|
||||
|
||||
const openCompanySecretForm = () => {
|
||||
showCompanySecretForm.value = true;
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = () => {
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
emit('done');
|
||||
};
|
||||
</script>
|
||||
255
src/views/oa/company/detail/components/company-nenew.vue
Normal file
255
src/views/oa/company/detail/components/company-nenew.vue
Normal file
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<a-button @click="addRecord" style="margin-bottom: 10px">添加</a-button>
|
||||
<table
|
||||
class="ele-table ele-table-border ele-table-stripe ele-table-medium"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>状态</th>
|
||||
<th>续费金额</th>
|
||||
<th>开始时间</th>
|
||||
<th>结束时间</th>
|
||||
<th width="360">描述</th>
|
||||
<th style="text-align: center">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="(item, index) in list" :key="index">
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-select placeholder="请选择" v-model:value="item.status">
|
||||
<a-select-option :value="0">待缴费</a-select-option>
|
||||
<a-select-option :value="1">已缴费</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="item.status == 1">已缴费</span>
|
||||
<span v-if="item.status == 0">待缴费</span>
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="999999"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入续费金额"
|
||||
v-model:value="item.money"
|
||||
/>
|
||||
</template>
|
||||
<template v-else> ￥{{ item.money }} </template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-date-picker
|
||||
placeholder="开始日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model:value="item.startTime"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ toDateString(item.startTime, 'yyyy-MM-dd') }}
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-date-picker
|
||||
placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model:value="item.endTime"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ toDateString(item.endTime, 'yyyy-MM-dd') }}
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="item.editStatus">
|
||||
<a-input
|
||||
class="ele-fluid"
|
||||
placeholder="请输入描述内容"
|
||||
v-model:value="item.comments"
|
||||
/>
|
||||
<a-upload
|
||||
v-model:file-list="item.images"
|
||||
class="upload-list-inline"
|
||||
list-type="picture"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<a-button>
|
||||
<UploadOutlined />
|
||||
上传附件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="comments">{{ item.comments }}</div>
|
||||
<div class="files">
|
||||
<a-upload
|
||||
v-model:file-list="item.images"
|
||||
class="upload-list-inline"
|
||||
>
|
||||
</a-upload>
|
||||
</div>
|
||||
</template>
|
||||
</td>
|
||||
<td style="text-align: center">
|
||||
<template v-if="item.editStatus">
|
||||
<a-space>
|
||||
<a @click="save(item, index)">保存</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="确定要删除此记录吗？" @confirm="remove(index)">
|
||||
<a class="ele-text-info">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-space>
|
||||
<a @click="openEdit(index)">编辑</a>
|
||||
<a-divider type="vertical" v-if="hasRole('superAdmin')" @confirm="removeRel(index)" />
|
||||
<a-popconfirm title="确定要删除此记录吗？" v-if="hasRole('superAdmin')" @confirm="removeRel(index)">
|
||||
<a class="ele-text-info">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { ref, watch } from 'vue';
|
||||
import { addAppRenew, pageAppRenew, removeAppRenew } from "@/api/oa/app/renew";
|
||||
import { AppRenew } from '@/api/oa/app/renew/model';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
|
||||
import { uploadOss } from "@/api/system/file";
|
||||
import { isImage } from "@/utils/common";
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
editStatus?: boolean;
|
||||
appId?: number;
|
||||
companyId?: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const userStore = useUserStore();
|
||||
const list = ref<AppRenew[]>([]);
|
||||
const files = ref<ItemType[]>([]);
|
||||
|
||||
const addRecord = () => {
|
||||
list.value.unshift({
|
||||
money: undefined,
|
||||
comments: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
nickname: userStore.info?.nickname,
|
||||
status: 1,
|
||||
images: undefined,
|
||||
editStatus: true
|
||||
});
|
||||
};
|
||||
|
||||
// 文件上传事件
|
||||
const beforeUpload = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
}
|
||||
if (!file.type.startsWith("image")) {
|
||||
if (file.size / 1024 / 1024 > 100) {
|
||||
message.error("大小不能超过 100MB");
|
||||
return;
|
||||
}
|
||||
}
|
||||
onUpload(item);
|
||||
return false;
|
||||
};
|
||||
|
||||
const onUpload = (d: ItemType) => {
|
||||
uploadOss(<File>d.file)
|
||||
.then((result) => {
|
||||
files.value.push({
|
||||
uid: result.id,
|
||||
url: result.path,
|
||||
name: isImage(result.path) ? 'image' : result.name,
|
||||
status: "done"
|
||||
});
|
||||
message.success("上传成功");
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const remove = (index: number) => {
|
||||
list.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const openEdit = (index: number) => {
|
||||
list.value[index].editStatus = true
|
||||
}
|
||||
|
||||
const removeRel = (index: number) => {
|
||||
removeAppRenew(list.value[index].appRenewId).then(() => {
|
||||
list.value.splice(index, 1);
|
||||
message.success('删除成功')
|
||||
})
|
||||
}
|
||||
|
||||
const save = (item: AppRenew, index: number) => {
|
||||
item.appId = props.appId;
|
||||
item.companyId = props.companyId;
|
||||
item.startTime = item.startTime ? item.startTime + ' 00:00:00' : '';
|
||||
item.endTime = item.endTime ? item.endTime + ' 23:59:59' : '';
|
||||
item.nickname = userStore.info?.nickname;
|
||||
item.userId = userStore.info?.userId;
|
||||
if(files.value.length > 0){
|
||||
item.images = JSON.stringify(files.value)
|
||||
}
|
||||
if (item.money == undefined || item.money == 0) {
|
||||
message.error('请填写金额');
|
||||
return false;
|
||||
}
|
||||
addAppRenew(item).then(() => {
|
||||
list.value[index].editStatus = false;
|
||||
message.success('保存成功');
|
||||
});
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
pageAppRenew({ appId: props.appId }).then((res) => {
|
||||
if (res?.list) {
|
||||
list.value = res?.list.map((d) => {
|
||||
d.editStatus = false;
|
||||
if(d.images){
|
||||
d.images = JSON.parse(d.images);
|
||||
}
|
||||
return d;
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.appId,
|
||||
(options) => {
|
||||
if (options) {
|
||||
reload();
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
220
src/views/oa/company/detail/components/company-photo-edit.vue
Normal file
220
src/views/oa/company/detail/components/company-photo-edit.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="80%"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑' : '添加'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
|
||||
>
|
||||
<div class="content">
|
||||
<ele-image-upload
|
||||
v-model:value="images"
|
||||
:limit="6"
|
||||
:drag="true"
|
||||
:item-style="{ width: '150px', height: '267px' }"
|
||||
:upload-handler="uploadHandler"
|
||||
@upload="onUpload"
|
||||
/>
|
||||
<small class="ele-text-placeholder">
|
||||
请上传应用截图(最多6张)，建议宽度300*533像素，小于2M/张
|
||||
</small>
|
||||
</div>
|
||||
</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 { addApp, updateApp } from '@/api/oa/app';
|
||||
import type { App } from '@/api/oa/app/model';
|
||||
import { FormInstance } from 'ant-design-vue/es/form';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { uploadFileLocal } from '@/api/system/file';
|
||||
import { TOKEN_STORE_NAME } from '@/config/setting';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: App | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
// 当期时间
|
||||
const logo = ref<ItemType[]>([]);
|
||||
const appQrcode = ref<ItemType[]>([]);
|
||||
const images = ref<ItemType[]>([]);
|
||||
const content = ref('');
|
||||
const requirement = ref('');
|
||||
|
||||
const token = localStorage.getItem(TOKEN_STORE_NAME);
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<App>({
|
||||
// 应用id
|
||||
appId: undefined,
|
||||
// 应用截图
|
||||
images: ''
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const { resetFields } = useForm(form);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form,
|
||||
content: content.value,
|
||||
requirement: requirement.value,
|
||||
search: form.search ? 1 : 0,
|
||||
images: JSON.stringify(images.value)
|
||||
// appTypeMultiple: JSON.stringify(form.appTypeMultiple)
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateApp : addApp;
|
||||
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 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 = (item) => {
|
||||
const { file } = item;
|
||||
uploadFileLocal(file, props.data?.appId)
|
||||
.then((data) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.url,
|
||||
status: 'done'
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
content.value = '';
|
||||
requirement.value = '';
|
||||
logo.value = [];
|
||||
images.value = [];
|
||||
appQrcode.value = [];
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
if (props.data.appIcon) {
|
||||
logo.value.push({
|
||||
uid: 0,
|
||||
url: props.data.appIcon,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
if (props.data.appQrcode) {
|
||||
appQrcode.value.push({
|
||||
uid: 0,
|
||||
url: props.data.appQrcode,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
if (props.data.companyId) {
|
||||
console.log(props.data);
|
||||
}
|
||||
if (props.data.images) {
|
||||
const arr = JSON.parse(props.data.images);
|
||||
arr.map((d, i) => {
|
||||
images.value.push({
|
||||
uid: d.uid,
|
||||
url: d.url,
|
||||
status: 'done'
|
||||
});
|
||||
});
|
||||
}
|
||||
if (props.data.search) {
|
||||
form.search = props.data.search == 1 ? true : 0;
|
||||
}
|
||||
if (props.data.content) {
|
||||
content.value = props.data.content;
|
||||
}
|
||||
if (props.data.requirement) {
|
||||
requirement.value = props.data.requirement;
|
||||
}
|
||||
isUpdate.value = true;
|
||||
reload();
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
52
src/views/oa/company/detail/components/company-photo.vue
Normal file
52
src/views/oa/company/detail/components/company-photo.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<a-descriptions title="企业相册" :bordered="false">
|
||||
<template #extra>
|
||||
<a @click="openEdit">编辑</a>
|
||||
</template>
|
||||
</a-descriptions>
|
||||
<div class="content">
|
||||
<template v-if="data.companyType === 'web'">
|
||||
<a-image-preview-group>
|
||||
<a-space :size="20" v-for="(item, index) in images" :key="index">
|
||||
<a-image :width="360" :src="item.url" />
|
||||
</a-space>
|
||||
</a-image-preview-group>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-image-preview-group>
|
||||
<a-space :size="20" v-for="(item, index) in images" :key="index">
|
||||
<a-image :width="200" :src="item.url" />
|
||||
</a-space>
|
||||
</a-image-preview-group>
|
||||
</template>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
<CompanyPhotoEdit v-model:visible="showEdit" :data="data" @done="reload" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Company } from '@/api/oa/company/model';
|
||||
import { ref } from 'vue';
|
||||
import CompanyPhotoEdit from './company-photo-edit.vue';
|
||||
|
||||
defineProps<{
|
||||
visible: boolean;
|
||||
data: Company;
|
||||
images: any[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
}>();
|
||||
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = () => {
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
emit('done');
|
||||
};
|
||||
</script>
|
||||
256
src/views/oa/company/detail/components/company-profile-edit.vue
Normal file
256
src/views/oa/company/detail/components/company-profile-edit.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="80%"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑' : '新增'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
|
||||
>
|
||||
<!-- 编辑器 -->
|
||||
<byte-md-editor
|
||||
v-model:value="requirement"
|
||||
placeholder="请输入您的内容，图片请直接粘贴"
|
||||
:locale="zh_Hans"
|
||||
mode="split"
|
||||
:plugins="plugins"
|
||||
height="500px"
|
||||
:editorConfig="{ lineNumbers: true }"
|
||||
@paste="onPaste"
|
||||
/>
|
||||
</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 { addApp, updateApp } from '@/api/oa/app';
|
||||
import type { App } from '@/api/oa/app/model';
|
||||
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 highlight from '@bytemd/plugin-highlight';
|
||||
// 中文语言文件
|
||||
import gfm from '@bytemd/plugin-gfm';
|
||||
// // 预览界面的样式，这里用的 github 的 markdown 主题
|
||||
import 'github-markdown-css/github-markdown-light.css';
|
||||
import {FormInstance} from 'ant-design-vue/es/form';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { uploadFile } from "@/api/system/file";
|
||||
import { TOKEN_STORE_NAME } from "@/config/setting";
|
||||
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: App | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
const images = ref<ItemType[]>([]);
|
||||
const content = ref('');
|
||||
const requirement = ref('');
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
|
||||
const token = localStorage.getItem(TOKEN_STORE_NAME);
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<App>({
|
||||
// 应用id
|
||||
appId: undefined,
|
||||
// 项目需求
|
||||
requirement: ''
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(form);
|
||||
|
||||
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(result.url);
|
||||
} else {
|
||||
error('上传失败');
|
||||
}
|
||||
})
|
||||
.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,
|
||||
requirement: requirement.value,
|
||||
images: JSON.stringify(images.value)
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateApp : addApp;
|
||||
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 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 = (item) => {
|
||||
const { file } = item;
|
||||
uploadFile(file)
|
||||
.then((data) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.url,
|
||||
status: 'done'
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
content.value = '';
|
||||
requirement.value = '';
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
if (props.data.requirement){
|
||||
requirement.value = props.data.requirement;
|
||||
}
|
||||
if (props.data.content) {
|
||||
content.value = props.data.content;
|
||||
}
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
66
src/views/oa/company/detail/components/company-profile.vue
Normal file
66
src/views/oa/company/detail/components/company-profile.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<a-descriptions title="协同文档" :bordered="false">
|
||||
<template #extra>
|
||||
<a @click="openEdit">编辑</a>
|
||||
</template>
|
||||
</a-descriptions>
|
||||
<byte-md-viewer :value="data.requirement" :plugins="plugins" />
|
||||
<a-empty
|
||||
v-if="data.requirement == ''"
|
||||
image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
|
||||
:image-style="{
|
||||
height: '60px'
|
||||
}"
|
||||
>
|
||||
<template #description>
|
||||
<span class="ele-text-placeholder">类似腾讯文档的功能，支持多人编辑</span>
|
||||
</template>
|
||||
<a-button type="primary" @click="openEdit">编辑</a-button>
|
||||
</a-empty>
|
||||
<!-- 编辑弹窗 -->
|
||||
<AppProfileEdit v-model:visible="showEdit" :data="data" @done="reload" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import gfm from '@bytemd/plugin-gfm';
|
||||
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
|
||||
import highlight from '@bytemd/plugin-highlight';
|
||||
import 'bytemd/dist/index.min.css';
|
||||
import 'github-markdown-css/github-markdown-light.css';
|
||||
import 'github-markdown-css/github-markdown-light.css';
|
||||
import AppProfileEdit from './company-profile-edit.vue';
|
||||
|
||||
defineProps<{
|
||||
appId: number;
|
||||
data: any;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
}>();
|
||||
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = () => {
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
emit('done');
|
||||
};
|
||||
|
||||
// 插件
|
||||
const plugins = ref([
|
||||
gfm({
|
||||
locale: zh_HansGfm
|
||||
}),
|
||||
highlight()
|
||||
]);
|
||||
</script>
|
||||
<style lang="less">
|
||||
.app-profile * {
|
||||
max-width: 1000px;
|
||||
}
|
||||
</style>
|
||||
210
src/views/oa/company/detail/components/company-secret-form.vue
Normal file
210
src/views/oa/company/detail/components/company-secret-form.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<!-- 角色编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="550"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
title="重置AppSecret"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
ok-text="重置"
|
||||
cancel-text="关闭"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<template v-if="!appSecret">
|
||||
<a-form-item label="手机号码" name="phone">
|
||||
<a-input
|
||||
:maxlength="20"
|
||||
:disabled="true"
|
||||
placeholder="请输入短信验证码"
|
||||
v-model:value="form.phone"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="短信验证码" name="code">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
placeholder="请输入验证码"
|
||||
v-model:value="form.code"
|
||||
:maxlength="6"
|
||||
allow-clear
|
||||
/>
|
||||
<a-button
|
||||
class="login-captcha"
|
||||
:disabled="!!countdownTime"
|
||||
@click="openImgCodeModal"
|
||||
>
|
||||
<span v-if="!countdownTime" @click="sendCode">发送验证码</span>
|
||||
<span v-else>已发送 {{ countdownTime }} s</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-form-item label="AppID" name="appId">
|
||||
<a-typography-text copyable code class="ele-text-secondary">{{
|
||||
appId
|
||||
}}</a-typography-text>
|
||||
</a-form-item>
|
||||
<a-form-item label="AppSecret" name="appSecret">
|
||||
<a-typography-text copyable code class="ele-text-secondary">{{
|
||||
appSecret
|
||||
}}</a-typography-text>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import type { FormInstance } from 'ant-design-vue/es/form';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { sendSmsCaptcha } from '@/api/login';
|
||||
import { updateAppSecret } from '@/api/oa/app';
|
||||
import { createCode, encrypt } from '@/utils/common';
|
||||
import { pageAppUser } from '@/api/oa/app/user';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
appId?: number;
|
||||
}>();
|
||||
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
// 验证码倒计时时间
|
||||
const countdownTime = ref(0);
|
||||
// 验证码倒计时定时器
|
||||
let countdownTimer: number | null = null;
|
||||
const loading = ref(false);
|
||||
const appSecret = ref('');
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields } = useFormData<User>({
|
||||
phone: '',
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
/* 显示发送短信验证码弹窗 */
|
||||
const openImgCodeModal = () => {
|
||||
if (!form.phone) {
|
||||
message.error('请输入手机号码');
|
||||
return;
|
||||
}
|
||||
};
|
||||
/* 发送短信验证码 */
|
||||
const sendCode = () => {
|
||||
sendSmsCaptcha({ phone: form.phone }).then(() => {
|
||||
message.success('短信验证码发送成功, 请注意查收!');
|
||||
countdownTime.value = 60;
|
||||
// 开始对按钮进行倒计时
|
||||
countdownTimer = window.setInterval(() => {
|
||||
if (countdownTime.value <= 1) {
|
||||
countdownTimer && clearInterval(countdownTimer);
|
||||
countdownTimer = null;
|
||||
}
|
||||
countdownTime.value--;
|
||||
}, 1000);
|
||||
});
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
if (appSecret.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
updateAppSecret({
|
||||
phone: form.phone,
|
||||
appCode: form.code,
|
||||
appId: props.appId,
|
||||
appSecret: encrypt(createCode())
|
||||
})
|
||||
.then((res) => {
|
||||
loading.value = false;
|
||||
message.success(res.message);
|
||||
appSecret.value = String(res.data);
|
||||
// updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
pageAppUser({ appId: props.appId, role: 30 }).then((res) => {
|
||||
if (res?.list) {
|
||||
form.phone = res.list[0].phone;
|
||||
}
|
||||
});
|
||||
console.log(props.appId);
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 验证码 */
|
||||
.login-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-captcha {
|
||||
width: 102px;
|
||||
height: 33px;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<a-button
|
||||
@click="openNew(`/oa/task/add?appid=${data.appId}&appName=${data.appName}`)"
|
||||
>提交工单</a-button
|
||||
>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { TaskParam } from '@/api/oa/task/model';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { openNew } from '@/utils/common';
|
||||
import { App } from '@/api/oa/app/model';
|
||||
|
||||
defineProps<{
|
||||
data: App;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where: TaskParam): void;
|
||||
(e: 'remove'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where } = useSearch<TaskParam>({
|
||||
keywords: '',
|
||||
status: undefined,
|
||||
commander: undefined
|
||||
});
|
||||
|
||||
/* 搜索 */
|
||||
const search = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
</script>
|
||||
298
src/views/oa/company/detail/components/company-task.vue
Normal file
298
src/views/oa/company/detail/components/company-task.vue
Normal file
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<div class="app-task">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="taskId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<AppTaskSearch :data="data" @search="reload" @remove="removeBatch" />
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'content'">
|
||||
<div class="user-box">
|
||||
<div class="user-info">
|
||||
<a-badge
|
||||
:dot="!record.isRead && record.userId != userStore.info?.userId"
|
||||
>
|
||||
<a-avatar :src="record.avatar" size="large" />
|
||||
</a-badge>
|
||||
</div>
|
||||
<div class="content" style="display: flex; flex-direction: column">
|
||||
<div class="nickname">
|
||||
<a-typography-text strong>
|
||||
{{ `${record.nickname}` }}
|
||||
</a-typography-text>
|
||||
<span class="ele-text-placeholder" style="padding-left: 10px">{{
|
||||
timeAgo(record.createTime)
|
||||
}}</span>
|
||||
</div>
|
||||
<a
|
||||
class="ele-text-heading"
|
||||
@click="openNew('/oa/task/detail/' + record.taskId)"
|
||||
>
|
||||
{{ `工单标题：${record.name}` }}
|
||||
</a>
|
||||
<div class="ele-text-placeholder">{{
|
||||
record.appId > 0 ? `项目名称：【${record.appName}】` : ''
|
||||
}}</div>
|
||||
<div
|
||||
class="ele-text-secondary"
|
||||
style="display: flex; align-items: center"
|
||||
>
|
||||
<a-avatar :size="18" :src="record.lastAvatar" />
|
||||
<div class="content" style="padding-left: 8px">
|
||||
{{ record.content }}
|
||||
</div>
|
||||
<span class="ele-text-placeholder" style="padding-left: 10px">{{
|
||||
timeAgo(record.updateTime)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="last-time ele-text-info"> </div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-tag v-if="record.progress === TOBEARRANGED" color="red"
|
||||
>待安排</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === PENDING" color="orange"
|
||||
>待处理</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === PROCESSING" color="purple"
|
||||
>处理中</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === TOBECONFIRMED" color="cyan"
|
||||
>待评价</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === COMPLETED" color="green"
|
||||
>已完成</a-tag
|
||||
>
|
||||
<a-tag v-if="record.progress === CLOSED">已关闭</a-tag>
|
||||
<div class="ele-text-danger" v-if="record.overdueDays">
|
||||
已逾期{{ record.overdueDays }}天
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'progress'">
|
||||
<a-progress :percent="record.progress * 2" :steps="5" />
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="onDetail(record)">查看</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
title="确定要删除此记录吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref, watch } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { timeAgo } from 'ele-admin-pro';
|
||||
import { pageTask, removeTask, removeBatchTask } from '@/api/oa/task';
|
||||
import type { Task, TaskParam } from '@/api/oa/task/model';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import AppTaskSearch from './company-task-search.vue';
|
||||
import {
|
||||
CLOSED,
|
||||
COMPLETED,
|
||||
PENDING,
|
||||
PROCESSING,
|
||||
TOBEARRANGED,
|
||||
TOBECONFIRMED
|
||||
} from '@/api/oa/task/model/progress';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { openNew } from '@/utils/common';
|
||||
import { App } from '@/api/oa/app/model';
|
||||
|
||||
const props = defineProps<{
|
||||
appId: number | undefined;
|
||||
data: App;
|
||||
}>();
|
||||
|
||||
const userStore = useUserStore();
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
const selection = ref<any[]>();
|
||||
const status = ref<number>();
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
// 搜索条件
|
||||
// 工单发起人
|
||||
if (hasRole('promoter') || hasRole('user')) {
|
||||
where.commander = undefined;
|
||||
where.userId = userStore.info?.userId;
|
||||
}
|
||||
// 管理人员
|
||||
if (hasRole('superAdmin') || hasRole('admin')) {
|
||||
where.commander = undefined;
|
||||
}
|
||||
// 工单受理人员
|
||||
if (hasRole('commander')) {
|
||||
where.commander = userStore.info?.userId;
|
||||
}
|
||||
return pageTask({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<any[]>([
|
||||
{
|
||||
title: '工单号',
|
||||
dataIndex: 'taskId',
|
||||
align: 'center',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '工单类型',
|
||||
dataIndex: 'taskType',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '工单信息',
|
||||
dataIndex: 'content',
|
||||
key: 'content',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
width: 120
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: TaskParam) => {
|
||||
status.value = where?.status;
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
const onDetail = (record?: Task) => {
|
||||
window.location.href = 'detail?id=' + record?.taskId;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Task) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeTask(row.taskId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value?.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
if (selection.value?.length) {
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchTask(selection.value.map((d) => d.taskId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 是否展现多选按钮及批量删除按钮
|
||||
if (hasRole('superAdmin') || hasRole('admin')) {
|
||||
selection.value = [];
|
||||
}
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Task) => {
|
||||
return {
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
window.open('/oa/task/detail/' + record.taskId);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.appId,
|
||||
(appId) => {
|
||||
if (appId) {
|
||||
reload({ appId });
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'AppTaskIndex'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.user-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.last-time {
|
||||
margin-left: 12px;
|
||||
}
|
||||
.content {
|
||||
.text {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nickname {
|
||||
.ele-text-heading {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
110
src/views/oa/company/detail/components/company-users.vue
Normal file
110
src/views/oa/company/detail/components/company-users.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<a-space style="margin-bottom: 20px">
|
||||
<SelectUser
|
||||
style="margin-left: 10px"
|
||||
v-if="hasRole('superAdmin') || hasRole('admin')"
|
||||
:placeholder="`添加成员`"
|
||||
@done="addCompanyExpUser"
|
||||
/>
|
||||
<a-button>邀请添加</a-button>
|
||||
</a-space>
|
||||
<div class="content">
|
||||
<table class="ele-table ele-table-border ele-table-stripe ele-table-medium">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>用户ID</th>
|
||||
<th>角色</th>
|
||||
<th>昵称</th>
|
||||
<th>加入时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(user, index) in data.userList" :key="index">
|
||||
<td>{{ user.userId }}</td>
|
||||
<td>
|
||||
<span v-if="user.role === 10">普通成员</span>
|
||||
<span v-if="user.role === 20">管理成员</span>
|
||||
<span v-if="user.role === 30">所有者</span>
|
||||
</td>
|
||||
<td>
|
||||
<span style="padding-left: 5px">{{ user.nickname }}</span>
|
||||
</td>
|
||||
<td>{{ user.createTime }}</td>
|
||||
<td>
|
||||
<div v-if="user.role !== 30">
|
||||
<a
|
||||
@click="removeUser(user)"
|
||||
v-if="hasRole('superAdmin') || hasRole('admin')"
|
||||
>
|
||||
移除
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { Company } from '@/api/oa/company/model';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { CompanyUser } from '@/api/oa/company/user/model';
|
||||
import { addCompanyUser, removeCompanyUser } from '@/api/oa/company/user';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const props = defineProps<{
|
||||
companyId: any;
|
||||
data: Company;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 添加开发成员
|
||||
const addCompanyDevUser = (data: User) => {
|
||||
addCompanyUser({
|
||||
userId: data.userId,
|
||||
companyId: props.data?.companyId,
|
||||
role: 20
|
||||
})
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 添加体验成员
|
||||
const addCompanyExpUser = (data: User) => {
|
||||
addCompanyUser({
|
||||
userId: data.userId,
|
||||
companyId: props.data?.companyId,
|
||||
role: 10
|
||||
})
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 移除成员
|
||||
const removeUser = (data: CompanyUser) => {
|
||||
removeCompanyUser(data.companyUserId)
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
203
src/views/oa/company/detail/index.vue
Normal file
203
src/views/oa/company/detail/index.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<a-page-header
|
||||
:title="title"
|
||||
:style="{ padding: screenWidth > 480 ? '16px 24px' : '0' }"
|
||||
@back="() => $router.go(-1)"
|
||||
>
|
||||
<a-spin :spinning="spinning">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{ paddingTop: '5px' }"
|
||||
v-if="isShow"
|
||||
>
|
||||
<a-tabs v-model:active-key="active" @change="onChange">
|
||||
<a-tab-pane tab="基本信息" key="base">
|
||||
<CompanyInfo
|
||||
:data="form"
|
||||
:logo="logo"
|
||||
:company-qrcode="companyQrcode"
|
||||
@done="reload"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane
|
||||
tab="成员管理"
|
||||
key="users"
|
||||
v-if="hasRole('superAdmin') || hasRole('admin')"
|
||||
>
|
||||
<CompanyUsers :company-id="companyId" :data="form" @done="reload" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="客户资料" key="param">
|
||||
<CompanyFieldForm
|
||||
:company-id="companyId"
|
||||
:data="form"
|
||||
@done="reload"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="企业附件" key="annex">
|
||||
<CompanyAnnex :company-id="companyId" :data="form" @done="reload" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
<a-card v-else :bordered="false">
|
||||
<div style="max-width: 960px; margin: 0 auto">
|
||||
<a-result
|
||||
status="error"
|
||||
title="无查看权限"
|
||||
sub-title="请先添加为企业成员"
|
||||
>
|
||||
<template #extra>
|
||||
<a-space size="middle">
|
||||
<a-button type="primary" @click="openUrl('/oa/company/index')"
|
||||
>返回</a-button
|
||||
>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-spin>
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, unref, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import CompanyInfo from './components/company-info.vue';
|
||||
import CompanyUsers from './components/company-users.vue';
|
||||
import CompanyAnnex from './components/company-annex.vue';
|
||||
import CompanyFieldForm from './components/company-field.vue';
|
||||
import { pageCompany } from '@/api/oa/company';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { Company } from '@/api/oa/company/model';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { setPageTabTitle } from '@/utils/page-tab-util';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import { pageCompanyUser } from '@/api/oa/company/user';
|
||||
import { pageCompanyField } from '@/api/oa/company/field';
|
||||
import { CompanyField } from '@/api/oa/company/field/model';
|
||||
|
||||
const { currentRoute } = useRouter();
|
||||
// 当前选项卡
|
||||
const active = ref('base');
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { screenWidth } = storeToRefs(themeStore);
|
||||
const title = ref('企业名称');
|
||||
const spinning = ref(true);
|
||||
const isShow = ref(true);
|
||||
const logo = ref<any[]>([]);
|
||||
const companyId = ref<number>(0);
|
||||
const companyQrcode = ref<any[]>([]);
|
||||
const images = ref<ItemType[]>([]);
|
||||
const companyField = ref<CompanyField[]>();
|
||||
|
||||
// 应用信息
|
||||
const { form, assignFields, resetFields } = useFormData<Company>({
|
||||
companyId: undefined,
|
||||
companyName: '',
|
||||
shortName: '',
|
||||
companyCode: '',
|
||||
companyLogo: '',
|
||||
companyType: undefined,
|
||||
industryParent: '',
|
||||
industryChild: '',
|
||||
businessEntity: '',
|
||||
province: '',
|
||||
city: '',
|
||||
region: '',
|
||||
address: '',
|
||||
phone: '',
|
||||
tel: '',
|
||||
email: '',
|
||||
domain: '',
|
||||
serverUrl: undefined,
|
||||
clicks: undefined,
|
||||
version: undefined,
|
||||
sortNumber: undefined,
|
||||
comments: '',
|
||||
tenantName: '',
|
||||
tenantCode: '',
|
||||
tenantId: undefined,
|
||||
createTime: '',
|
||||
status: undefined,
|
||||
nickname: '',
|
||||
fields: [],
|
||||
userList: []
|
||||
});
|
||||
|
||||
const onChange = () => {
|
||||
reload();
|
||||
};
|
||||
|
||||
/**
|
||||
* 加载数据
|
||||
*/
|
||||
const reload = () => {
|
||||
resetFields();
|
||||
logo.value = [];
|
||||
companyQrcode.value = [];
|
||||
images.value = [];
|
||||
// companyField.value = [];
|
||||
// 加载企业详情
|
||||
pageCompany({ companyId: companyId.value })
|
||||
.then((data) => {
|
||||
if (data?.list) {
|
||||
const company = data.list[0];
|
||||
assignFields(company);
|
||||
if (company.companyName) {
|
||||
title.value = company.companyName;
|
||||
// 修改页签标题
|
||||
setPageTabTitle(company.companyName);
|
||||
}
|
||||
if (company.companyLogo) {
|
||||
logo.value.push({
|
||||
uid: company.companyId,
|
||||
url: company.companyLogo,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
}
|
||||
isShow.value = true;
|
||||
spinning.value = false;
|
||||
// 加载企业资料
|
||||
pageCompanyField({ companyId: companyId.value, limit: 50 }).then(
|
||||
(res) => {
|
||||
companyField.value = res?.list;
|
||||
form.fields = res?.list;
|
||||
}
|
||||
);
|
||||
// 加载项目成员
|
||||
pageCompanyUser({ companyId: companyId.value }).then((res) => {
|
||||
if (res?.list) {
|
||||
form.userList = res.list;
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
isShow.value = false;
|
||||
spinning.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
currentRoute,
|
||||
(route) => {
|
||||
const { params } = unref(route);
|
||||
const { id } = params;
|
||||
if (id) {
|
||||
companyId.value = Number(id);
|
||||
}
|
||||
reload();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CompanyDetail'
|
||||
};
|
||||
</script>
|
||||
178
src/views/oa/company/dict/components/dict-edit.vue
Normal file
178
src/views/oa/company/dict/components/dict-edit.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<!-- 分类编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="460"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate ? '修改分类' : '添加分类'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="分类标识" name="dictCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
disabled
|
||||
placeholder="请输入分类标识"
|
||||
v-model:value="form.dictCode"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="分类名称" name="dictDataName">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入分类名称"
|
||||
v-model:value="form.dictDataName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sortNumber">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="99999"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入排序号"
|
||||
v-model:value="form.sortNumber"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入备注"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { addDictData, updateDictData } from '@/api/system/dict-data';
|
||||
import { DictData } from '@/api/system/dict-data/model';
|
||||
import {removeSiteInfoCache} from "@/api/cms/website";
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: DictData | null;
|
||||
// 字典ID
|
||||
dictId?: number | 0;
|
||||
}>();
|
||||
|
||||
//
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<DictData>({
|
||||
dictId: undefined,
|
||||
dictDataId: undefined,
|
||||
dictDataName: '',
|
||||
dictCode: 'companyType',
|
||||
dictDataCode: '',
|
||||
sortNumber: 100,
|
||||
comments: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
dictDataCode: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入分类名称',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
dictCode: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入分类标识',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const saveOrUpdate = isUpdate.value ? updateDictData : addDictData;
|
||||
form.dictDataCode = form.dictDataName;
|
||||
form.dictId = props.dictId;
|
||||
saveOrUpdate(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
// 清除字典缓存
|
||||
removeSiteInfoCache(form.dictCode + ':' + form.tenantId);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignFields(props.data);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
222
src/views/oa/company/dict/index.vue
Normal file
222
src/views/oa/company/dict/index.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="dictDataId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
:scroll="{ x: 800 }"
|
||||
cache-key="companyDictTable"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button type="primary" class="ele-btn-icon" @click="openEdit()">
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="removeBatch"
|
||||
>
|
||||
<template #icon>
|
||||
<delete-outlined />
|
||||
</template>
|
||||
<span>删除</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="openEdit(record)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
placement="topRight"
|
||||
title="确定要删除此分类吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<dict-edit
|
||||
v-model:visible="showEdit"
|
||||
:dictId="dictId"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue/es';
|
||||
import {
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { messageLoading } from 'ele-admin-pro/es';
|
||||
import DictEdit from './components/dict-edit.vue';
|
||||
import {
|
||||
pageDictData,
|
||||
removeDictData,
|
||||
removeDictDataBatch
|
||||
} from '@/api/system/dict-data';
|
||||
import { DictParam } from '@/api/system/dict/model';
|
||||
import { DictData } from '@/api/system/dict-data/model';
|
||||
import { addDict, listDictionaries } from '@/api/system/dict';
|
||||
import { Dictionary } from '@/api/system/dictionary/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
const dictId = ref(0);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'dictDataId',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '分类名称',
|
||||
dataIndex: 'dictDataName',
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '排序号',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'sortNumber'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
align: 'center'
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<DictData[]>([]);
|
||||
|
||||
// 当前编辑数据
|
||||
const current = ref<Dictionary | null>(null);
|
||||
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
where.dictCode = 'companyType';
|
||||
return pageDictData({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: DictParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: DictData) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: DictData) => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeDictData(row.dictDataId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的分类吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeDictDataBatch(selection.value.map((d) => d.dictDataId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化字典
|
||||
const loadDict = () => {
|
||||
listDictionaries({ dictCode: 'companyType' }).then(async (data) => {
|
||||
if (data?.length == 0) {
|
||||
await addDict({ dictCode: 'companyType', dictName: '链接分类' });
|
||||
}
|
||||
await listDictionaries({ dictCode: 'companyType' }).then((list) => {
|
||||
list?.map((d) => {
|
||||
dictId.value = Number(d.dictId);
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
loadDict();
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: DictData) => {
|
||||
return {
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'TaskDictData'
|
||||
};
|
||||
</script>
|
||||
315
src/views/oa/company/index.vue
Normal file
315
src/views/oa/company/index.vue
Normal file
@@ -0,0 +1,315 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :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"
|
||||
@advanced="openAdvanced"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'companyName'">
|
||||
<div class="company-box">
|
||||
<a-image
|
||||
:height="45"
|
||||
:width="45"
|
||||
:preview="false"
|
||||
:src="record.companyLogo"
|
||||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
|
||||
/>
|
||||
<div class="company-info">
|
||||
<a
|
||||
class="ele-text-heading"
|
||||
@click="openUrl('/oa/company/detail/' + record.companyId)"
|
||||
>
|
||||
{{ record.companyName }}
|
||||
</a>
|
||||
<span class="ele-text-placeholder">
|
||||
{{ record.shortName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<template v-if="record.status == 0">
|
||||
<a-badge status="processing" :text="`正常`" />
|
||||
</template>
|
||||
<template v-if="record.status == 1">
|
||||
<a-badge status="default" :text="`冻结`" />
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="column.key === 'expirationTime'">
|
||||
<template v-if="expirationTime(record.expirationTime) < 30">
|
||||
<a-space>
|
||||
<span class="ele-text-danger">{{
|
||||
toDateString(record.expirationTime, 'yyyy-MM-dd')
|
||||
}}</span>
|
||||
<span class="ele-text-placeholder"
|
||||
>(剩余{{ expirationTime(record.expirationTime) }}天)</span
|
||||
>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ toDateString(record.expirationTime, 'yyyy-MM-dd') }}
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<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>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
<CompanyEdit 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 CompanyEdit from './components/company-edit.vue';
|
||||
import {
|
||||
pageCompany,
|
||||
removeBatchCompany,
|
||||
removeCompany
|
||||
} from '@/api/oa/company';
|
||||
import { Company, CompanyParam } from '@/api/oa/company/model';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
|
||||
defineProps<{
|
||||
activeKey?: boolean;
|
||||
data?: any;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'companyId',
|
||||
width: 80,
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: '企业名称',
|
||||
dataIndex: 'companyName',
|
||||
key: 'companyName'
|
||||
},
|
||||
{
|
||||
title: '企业类型',
|
||||
dataIndex: 'companyType',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
key: 'companyType'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
key: 'status',
|
||||
customRender: ({ text }) => ['正常', '冻结'][text]
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
sorter: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:ss')
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<Company[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<Company | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示高级搜索
|
||||
const showAdvancedSearch = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
// 默认类型
|
||||
if (where.keywords == undefined) {
|
||||
where.companyStatus = '开发中';
|
||||
where.showExpiration = undefined;
|
||||
}
|
||||
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 expirationTime = (dateTime) => {
|
||||
const now = new Date().getTime();
|
||||
const expiration = new Date(dateTime).getTime();
|
||||
const mss = expiration - now;
|
||||
let days = Math.floor(mss / (1000 * 60 * 60 * 24));
|
||||
let hours = Math.floor((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));
|
||||
let seconds = Math.round((mss % (1000 * 60)) / 1000);
|
||||
return days;
|
||||
};
|
||||
|
||||
/* 打开高级搜索 */
|
||||
const openAdvanced = () => {
|
||||
showAdvancedSearch.value = !showAdvancedSearch.value;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Company) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCompany(row.companyId)
|
||||
.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);
|
||||
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: () => {
|
||||
openUrl('/oa/company/detail/' + record.companyId);
|
||||
// window.open('/oa/company/detail/' + record.companyId);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
.company-box {
|
||||
display: flex;
|
||||
.company-info {
|
||||
display: flex;
|
||||
margin-left: 5px;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
304
src/views/oa/customer/components/customer-edit.vue
Normal file
304
src/views/oa/customer/components/customer-edit.vue
Normal file
@@ -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>
|
||||
160
src/views/oa/customer/components/customer-info.vue
Normal file
160
src/views/oa/customer/components/customer-info.vue
Normal file
@@ -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>
|
||||
88
src/views/oa/customer/components/customer-move.vue
Normal file
88
src/views/oa/customer/components/customer-move.vue
Normal file
@@ -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>
|
||||
64
src/views/oa/customer/components/customer-search.vue
Normal file
64
src/views/oa/customer/components/customer-search.vue
Normal file
@@ -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>
|
||||
131
src/views/oa/customer/components/search.vue
Normal file
131
src/views/oa/customer/components/search.vue
Normal file
@@ -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>
|
||||
45
src/views/oa/customer/components/status-select.vue
Normal file
45
src/views/oa/customer/components/status-select.vue
Normal file
@@ -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>
|
||||
45
src/views/oa/customer/components/type-select.vue
Normal file
45
src/views/oa/customer/components/type-select.vue
Normal file
@@ -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>
|
||||
56
src/views/oa/customer/index.vue
Normal file
56
src/views/oa/customer/index.vue
Normal file
@@ -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>
|
||||
352
src/views/oa/customer/list.vue
Normal file
352
src/views/oa/customer/list.vue
Normal file
@@ -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>
|
||||
138
src/views/oa/dashboard/components/activities-card.vue
Normal file
138
src/views/oa/dashboard/components/activities-card.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<!-- 最新动态 -->
|
||||
<template>
|
||||
<a-card :title="title" :bordered="false" :body-style="{ padding: '6px 0' }">
|
||||
<template #extra>
|
||||
<more-icon @remove="onRemove" @edit="onEdit" />
|
||||
</template>
|
||||
<div
|
||||
style="height: 346px; padding: 22px 20px 0 20px"
|
||||
class="ele-scrollbar-hover"
|
||||
>
|
||||
<a-timeline>
|
||||
<a-timeline-item
|
||||
v-for="item in activities"
|
||||
:key="item.id"
|
||||
:color="item.color"
|
||||
>
|
||||
<em>{{ item.time }}</em>
|
||||
<em>{{ item.title }}</em>
|
||||
</a-timeline-item>
|
||||
</a-timeline>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import MoreIcon from './more-icon.vue';
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'remove'): void;
|
||||
(e: 'edit'): void;
|
||||
}>();
|
||||
|
||||
interface Activitie {
|
||||
id: number;
|
||||
title: string;
|
||||
time: string;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
// 最新动态数据
|
||||
const activities = ref<Activitie[]>([]);
|
||||
|
||||
/* 查询最新动态 */
|
||||
const queryActivities = () => {
|
||||
activities.value = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'SunSmile 解决了bug 登录提示操作失败',
|
||||
time: '20:30',
|
||||
color: 'gray'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Jasmine 解决了bug 按钮颜色与设计不符',
|
||||
time: '19:30',
|
||||
color: 'gray'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '项目经理 指派了任务 解决项目一的bug',
|
||||
time: '18:30'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '项目经理 指派了任务 解决项目二的bug',
|
||||
time: '17:30'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '项目经理 指派了任务 解决项目三的bug',
|
||||
time: '16:30'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: '项目经理 指派了任务 解决项目四的bug',
|
||||
time: '15:30',
|
||||
color: 'gray'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: '项目经理 指派了任务 解决项目五的bug',
|
||||
time: '14:30',
|
||||
color: 'gray'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: '项目经理 指派了任务 解决项目六的bug',
|
||||
time: '12:30',
|
||||
color: 'gray'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: '项目经理 指派了任务 解决项目七的bug',
|
||||
time: '11:30'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: '项目经理 指派了任务 解决项目八的bug',
|
||||
time: '10:30',
|
||||
color: 'gray'
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
title: '项目经理 指派了任务 解决项目九的bug',
|
||||
time: '09:30',
|
||||
color: 'green'
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
title: '项目经理 指派了任务 解决项目十的bug',
|
||||
time: '08:30',
|
||||
color: 'red'
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
const onRemove = () => {
|
||||
emit('remove');
|
||||
};
|
||||
|
||||
const onEdit = () => {
|
||||
emit('edit');
|
||||
};
|
||||
|
||||
queryActivities();
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ele-scrollbar-hover
|
||||
:deep(.ant-timeline-item-last > .ant-timeline-item-content) {
|
||||
min-height: auto;
|
||||
}
|
||||
</style>
|
||||
91
src/views/oa/dashboard/components/app-list.vue
Normal file
91
src/views/oa/dashboard/components/app-list.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<a-card
|
||||
:title="title"
|
||||
:bordered="false"
|
||||
:body-style="{
|
||||
padding: '2px',
|
||||
minHeight: '252px',
|
||||
maxHeight: '252px',
|
||||
overflow: 'hidden'
|
||||
}"
|
||||
>
|
||||
<template #extra
|
||||
><a @click="openUrl('/oa/app/index')" class="ele-text-placeholder"
|
||||
>更多<RightOutlined /></a
|
||||
></template>
|
||||
<a-list :size="`small`" :split="false" :data-source="list">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<div class="app-box">
|
||||
<a-image
|
||||
:height="45"
|
||||
:width="45"
|
||||
:preview="false"
|
||||
:src="item.appIcon"
|
||||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
|
||||
/>
|
||||
<div class="app-info">
|
||||
<a
|
||||
class="ele-text-heading"
|
||||
@click="openUrl('/oa/app/detail/' + item.appId)"
|
||||
>
|
||||
{{ item.appName }}
|
||||
</a>
|
||||
<span class="ele-text-placeholder">
|
||||
{{ item.appCode }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { Article } from '@/api/cms/article/model';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import { pageApp } from '@/api/oa/app';
|
||||
import { RightOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
const props = defineProps<{
|
||||
title: string;
|
||||
}>();
|
||||
|
||||
const list = ref<Article[]>([]);
|
||||
/**
|
||||
* 加载数据
|
||||
*/
|
||||
const reload = () => {
|
||||
const { title } = props;
|
||||
// 加载文章列表
|
||||
pageApp({
|
||||
limit: 5,
|
||||
status: 0,
|
||||
appStatus: '开发中'
|
||||
}).then((data) => {
|
||||
if (data?.list) {
|
||||
list.value = data.list;
|
||||
}
|
||||
});
|
||||
};
|
||||
reload();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'DashboardArticleList'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.app-box {
|
||||
display: flex;
|
||||
.app-info {
|
||||
display: flex;
|
||||
margin-left: 5px;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
56
src/views/oa/dashboard/components/article-list.vue
Normal file
56
src/views/oa/dashboard/components/article-list.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<a-card :title="title" :bordered="false" :body-style="{ padding: '2px', minHeight: '252px' }">
|
||||
<template #extra
|
||||
><a
|
||||
@click="openNew('/cms/category/' + categoryId)"
|
||||
class="ele-text-placeholder"
|
||||
>更多<RightOutlined /></a
|
||||
></template>
|
||||
<a-list :size="`small`" :split="false" :data-source="list">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<a
|
||||
class="ele-text-heading"
|
||||
@click="openUrl('/cms/article/' + item.articleId)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</a>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { pageArticle } from '@/api/cms/article';
|
||||
import { Article } from '@/api/cms/article/model';
|
||||
import { openNew, openUrl } from '@/utils/common';
|
||||
import { RightOutlined } from '@ant-design/icons-vue';
|
||||
const list = ref<Article[]>([]);
|
||||
|
||||
const props = defineProps<{
|
||||
title: string;
|
||||
categoryId: number;
|
||||
}>();
|
||||
|
||||
/**
|
||||
* 加载数据
|
||||
*/
|
||||
const reload = () => {
|
||||
const { categoryId } = props;
|
||||
// 加载文章列表
|
||||
pageArticle({ categoryId, limit: 6 }).then((data) => {
|
||||
if (data?.list) {
|
||||
list.value = data.list;
|
||||
}
|
||||
});
|
||||
};
|
||||
reload();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'DashboardArticleList'
|
||||
};
|
||||
</script>
|
||||
80
src/views/oa/dashboard/components/count-user.vue
Normal file
80
src/views/oa/dashboard/components/count-user.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<a-card :bordered="false" title="小组成员">
|
||||
<template #extra>
|
||||
<a-tooltip>
|
||||
<template #title>邀请加入</template>
|
||||
<UserAddOutlined @click="onShowQrcode" :style="{ fontSize: '18px' }" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-list
|
||||
class="demo-loadmore-list"
|
||||
item-layout="horizontal"
|
||||
:data-source="list"
|
||||
>
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<template #actions>
|
||||
<a-popover>
|
||||
<template #content> 待处理 </template>
|
||||
<a class="ele-text-danger">{{ item.pending }}</a>
|
||||
</a-popover>
|
||||
<a-popover>
|
||||
<template #content> 本月已处理 </template>
|
||||
<a class="ele-text-secondary">{{ item.month }}</a>
|
||||
</a-popover>
|
||||
</template>
|
||||
<a-skeleton avatar :title="false" :loading="!!item.loading" active>
|
||||
<a-list-item-meta>
|
||||
<template #title>
|
||||
{{ item.nickname }}
|
||||
</template>
|
||||
<template #avatar>
|
||||
<a-avatar :src="item.avatar" />
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-skeleton>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
<!-- 工单二维码 -->
|
||||
<Qrcode v-model:visible="showQrcode" />
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { pageTaskCount } from '@/api/oa/task-count';
|
||||
import { TaskCount } from '@/api/oa/task-count/model';
|
||||
import { UserAddOutlined } from '@ant-design/icons-vue';
|
||||
import Qrcode from './qrcode.vue';
|
||||
|
||||
const showQrcode = ref(false);
|
||||
const list = ref<TaskCount[]>([]);
|
||||
|
||||
pageTaskCount({ limit: 10, roleCode: 'commander' }).then((res) => {
|
||||
if (res) {
|
||||
list.value = res?.list;
|
||||
}
|
||||
});
|
||||
|
||||
const onShowQrcode = () => {
|
||||
showQrcode.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.monitor-evaluate-text {
|
||||
width: 90px;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
opacity: 0.8;
|
||||
|
||||
& > .anticon {
|
||||
font-size: 12px;
|
||||
margin: 0 6px 0 8px;
|
||||
}
|
||||
}
|
||||
/deep/.ant-list-item {
|
||||
padding: 7px 0;
|
||||
}
|
||||
</style>
|
||||
70
src/views/oa/dashboard/components/docs.vue
Normal file
70
src/views/oa/dashboard/components/docs.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<!-- 本月目标 -->
|
||||
<template>
|
||||
<a-card :title="title" :bordered="false">
|
||||
<template #extra>
|
||||
<more-icon @remove="onRemove" @edit="onEdit" />
|
||||
</template>
|
||||
<div class="workplace-goal-group">
|
||||
<a-progress
|
||||
:width="180"
|
||||
:percent="80"
|
||||
type="dashboard"
|
||||
:stroke-width="4"
|
||||
:show-info="false"
|
||||
/>
|
||||
<div class="workplace-goal-content">
|
||||
<ele-tag color="blue" size="large" shape="circle">
|
||||
<trophy-outlined />
|
||||
</ele-tag>
|
||||
<div class="workplace-goal-num">285</div>
|
||||
</div>
|
||||
<div class="workplace-goal-text">恭喜, 本月目标已达标!</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { TrophyOutlined } from '@ant-design/icons-vue';
|
||||
import MoreIcon from './more-icon.vue';
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'remove'): void;
|
||||
(e: 'edit'): void;
|
||||
}>();
|
||||
|
||||
const onRemove = () => {
|
||||
emit('remove');
|
||||
};
|
||||
|
||||
const onEdit = () => {
|
||||
emit('edit');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.workplace-goal-group {
|
||||
height: 310px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.workplace-goal-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 180px;
|
||||
margin: -50px 0 0 -90px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.workplace-goal-num {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
70
src/views/oa/dashboard/components/goal-card.vue
Normal file
70
src/views/oa/dashboard/components/goal-card.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<!-- 本月目标 -->
|
||||
<template>
|
||||
<a-card :title="title" :bordered="false">
|
||||
<template #extra>
|
||||
<more-icon @remove="onRemove" @edit="onEdit" />
|
||||
</template>
|
||||
<div class="workplace-goal-group">
|
||||
<a-progress
|
||||
:width="180"
|
||||
:percent="80"
|
||||
type="dashboard"
|
||||
:stroke-width="4"
|
||||
:show-info="false"
|
||||
/>
|
||||
<div class="workplace-goal-content">
|
||||
<ele-tag color="blue" size="large" shape="circle">
|
||||
<trophy-outlined />
|
||||
</ele-tag>
|
||||
<div class="workplace-goal-num">285</div>
|
||||
</div>
|
||||
<div class="workplace-goal-text">恭喜, 本月目标已达标!</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { TrophyOutlined } from '@ant-design/icons-vue';
|
||||
import MoreIcon from './more-icon.vue';
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'remove'): void;
|
||||
(e: 'edit'): void;
|
||||
}>();
|
||||
|
||||
const onRemove = () => {
|
||||
emit('remove');
|
||||
};
|
||||
|
||||
const onEdit = () => {
|
||||
emit('edit');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.workplace-goal-group {
|
||||
height: 310px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.workplace-goal-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 180px;
|
||||
margin: -50px 0 0 -90px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.workplace-goal-num {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
181
src/views/oa/dashboard/components/link-card.vue
Normal file
181
src/views/oa/dashboard/components/link-card.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<!-- 快捷方式 -->
|
||||
<template>
|
||||
<a-row :gutter="16" ref="wrapRef">
|
||||
<a-col v-for="item in data" :key="item.url" :lg="3" :md="6" :sm="9" :xs="8">
|
||||
<a-card :bordered="false" hoverable :body-style="{ padding: 0 }">
|
||||
<div class="app-link-block" @click="navTo(item)">
|
||||
<component
|
||||
:is="item.icon"
|
||||
class="app-link-icon"
|
||||
:style="{ color: item.color }"
|
||||
/>
|
||||
<div class="app-link-title">{{ item.title }}</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
import SortableJs from 'sortablejs';
|
||||
import type { Row as ARow } from 'ant-design-vue';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import { getOriginDomain } from '@/utils/domain';
|
||||
const CACHE_KEY = 'workplace-links';
|
||||
// 当前开发环境
|
||||
const env = import.meta.env.MODE;
|
||||
|
||||
interface LinkItem {
|
||||
icon: string;
|
||||
title: string;
|
||||
url: string;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
// 默认顺序
|
||||
const DEFAULT: LinkItem[] = [
|
||||
{
|
||||
icon: 'settingOutlined',
|
||||
title: '系统设置',
|
||||
url: '/system/profile'
|
||||
},
|
||||
{
|
||||
icon: 'AntDesignOutlined',
|
||||
title: '项目管理系统',
|
||||
url: '/oa/app/index'
|
||||
},
|
||||
{
|
||||
icon: 'CheckSquareOutlined',
|
||||
title: '工单管理系统',
|
||||
url: '/oa/task/index'
|
||||
},
|
||||
{
|
||||
icon: 'GatewayOutlined',
|
||||
title: '资产管理系统',
|
||||
url: '/assets/server'
|
||||
},
|
||||
{
|
||||
icon: 'RedditOutlined',
|
||||
title: '客户管理系统',
|
||||
url: '/system/company'
|
||||
},
|
||||
// {
|
||||
// icon: 'ShoppingOutlined',
|
||||
// title: '产品管理',
|
||||
// url: '/product/index'
|
||||
// },
|
||||
// {
|
||||
// icon: 'FileSearchOutlined',
|
||||
// title: '文章管理',
|
||||
// url: '/cms/article'
|
||||
// },
|
||||
{
|
||||
icon: 'ChromeOutlined',
|
||||
title: '网址导航',
|
||||
url: '/oa/link'
|
||||
},
|
||||
{
|
||||
icon: 'AppstoreAddOutlined',
|
||||
title: '扩展插件',
|
||||
url: '/system/plug'
|
||||
}
|
||||
];
|
||||
|
||||
// 获取缓存的顺序
|
||||
const cache = (() => {
|
||||
const str = localStorage.getItem(CACHE_KEY);
|
||||
try {
|
||||
return str ? JSON.parse(str) : null;
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
})();
|
||||
|
||||
const data = ref<LinkItem[]>([...(cache ?? DEFAULT)]);
|
||||
|
||||
const wrapRef = ref<InstanceType<typeof ARow> | null>(null);
|
||||
|
||||
let sortableIns: SortableJs | null = null;
|
||||
|
||||
/* 重置布局 */
|
||||
const reset = () => {
|
||||
data.value = [...DEFAULT];
|
||||
cacheData();
|
||||
};
|
||||
|
||||
/* 缓存布局 */
|
||||
const cacheData = () => {
|
||||
localStorage.setItem(CACHE_KEY, JSON.stringify(data.value));
|
||||
};
|
||||
|
||||
const navTo = (item) => {
|
||||
if (item.icon == 'DesktopOutlined') {
|
||||
if (env == 'development') {
|
||||
return openUrl(getOriginDomain());
|
||||
}
|
||||
return openUrl(`http://www.${domain.value}`);
|
||||
}
|
||||
openUrl(item.url);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const isTouchDevice = 'ontouchstart' in document.documentElement;
|
||||
if (isTouchDevice) {
|
||||
return;
|
||||
}
|
||||
sortableIns = new SortableJs(wrapRef.value?.$el, {
|
||||
animation: 300,
|
||||
onUpdate: ({ oldIndex, newIndex }) => {
|
||||
if (typeof oldIndex === 'number' && typeof newIndex === 'number') {
|
||||
const temp = [...data.value];
|
||||
temp.splice(newIndex, 0, temp.splice(oldIndex, 1)[0]);
|
||||
data.value = temp;
|
||||
cacheData();
|
||||
}
|
||||
},
|
||||
setData: () => {}
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (sortableIns) {
|
||||
sortableIns.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
defineExpose({ reset });
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import * as icons from './link-icons';
|
||||
import { getSiteInfo } from '@/api/layout';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const tenantId = ref<number>();
|
||||
const domain = ref<string>();
|
||||
|
||||
getSiteInfo().then((data) => {
|
||||
tenantId.value = data.tenantId;
|
||||
domain.value = data.domain;
|
||||
});
|
||||
|
||||
export default {
|
||||
components: icons
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.app-link-block {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
color: inherit;
|
||||
|
||||
.app-link-icon {
|
||||
color: #666666;
|
||||
font-size: 30px;
|
||||
margin: 6px 0 10px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
15
src/views/oa/dashboard/components/link-icons.ts
Normal file
15
src/views/oa/dashboard/components/link-icons.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
export {
|
||||
UserOutlined,
|
||||
TeamOutlined,
|
||||
FileSearchOutlined,
|
||||
ChromeOutlined,
|
||||
ShoppingOutlined,
|
||||
LaptopOutlined,
|
||||
AppstoreAddOutlined,
|
||||
DesktopOutlined,
|
||||
AntDesignOutlined,
|
||||
SettingOutlined,
|
||||
CheckSquareOutlined,
|
||||
GatewayOutlined,
|
||||
RedditOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
54
src/views/oa/dashboard/components/link-list.vue
Normal file
54
src/views/oa/dashboard/components/link-list.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<a-card :title="linkType" :bordered="false" :body-style="{ padding: '2px', minHeight: '252px' }">
|
||||
<template #extra
|
||||
><a @click="openNew('/oa/link')" class="ele-text-placeholder"
|
||||
>更多<RightOutlined /></a
|
||||
></template>
|
||||
<a-list :size="`small`" :split="false" :data-source="list">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<a-list-item-meta>
|
||||
<template #avatar>
|
||||
<a-avatar :src="item.icon" />
|
||||
</template>
|
||||
<template #title>
|
||||
<a @click="openUrl(item.url)">{{ item.name }}</a>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { openNew, openUrl } from '@/utils/common';
|
||||
import { pageLink } from '@/api/oa/link';
|
||||
import { RightOutlined } from '@ant-design/icons-vue';
|
||||
const list = ref<any[]>([]);
|
||||
|
||||
const props = defineProps<{
|
||||
linkType: string;
|
||||
}>();
|
||||
|
||||
/**
|
||||
* 加载数据
|
||||
*/
|
||||
const reload = () => {
|
||||
const { linkType } = props;
|
||||
// 加载文章列表
|
||||
pageLink({ linkType, limit: 5 }).then((data) => {
|
||||
if (data?.list) {
|
||||
list.value = data.list;
|
||||
}
|
||||
});
|
||||
};
|
||||
reload();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'DashboardArticleList'
|
||||
};
|
||||
</script>
|
||||
38
src/views/oa/dashboard/components/more-icon.vue
Normal file
38
src/views/oa/dashboard/components/more-icon.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<a-dropdown placement="bottomRight">
|
||||
<more-outlined class="ele-text-secondary" style="font-size: 18px" />
|
||||
<template #overlay>
|
||||
<a-menu :selectable="false" @click="onClick">
|
||||
<a-menu-item key="edit">
|
||||
<div class="ele-cell">
|
||||
<edit-outlined />
|
||||
<div class="ele-cell-content">编辑</div>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="remove">
|
||||
<div class="ele-cell ele-text-danger">
|
||||
<delete-outlined />
|
||||
<div class="ele-cell-content">删除</div>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
MoreOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'edit'): void;
|
||||
(e: 'remove'): void;
|
||||
}>();
|
||||
|
||||
const onClick = ({ key }) => {
|
||||
emit(key);
|
||||
};
|
||||
</script>
|
||||
121
src/views/oa/dashboard/components/profile-card.vue
Normal file
121
src/views/oa/dashboard/components/profile-card.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<!-- 用户信息 -->
|
||||
<template>
|
||||
<a-card :bordered="false" :body-style="{ padding: '20px' }">
|
||||
<div class="ele-cell workplace-user-card">
|
||||
<div class="ele-cell-content ele-cell">
|
||||
<a-avatar :size="68" :src="loginUser.avatar">
|
||||
<template v-if="!loginUser.avatar" #icon>
|
||||
<user-outlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<div class="ele-cell-content">
|
||||
<h4 class="ele-elip">
|
||||
早安, {{ loginUser.nickname }}, 开始您一天的工作吧!
|
||||
</h4>
|
||||
<div class="ele-elip ele-text-secondary">
|
||||
<cloud-outlined />
|
||||
<em>{{ elip[Math.floor(Math.random() * elip.length)] }}</em>
|
||||
<!-- <em>今日多云转阴，18℃ - 22℃，出门记得穿外套哦~</em>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="workplace-count-group">
|
||||
<!-- <div class="workplace-count-item">-->
|
||||
<!-- <div class="workplace-count-header">-->
|
||||
<!-- <ele-tag color="blue" shape="circle" size="small">-->
|
||||
<!-- <appstore-filled />-->
|
||||
<!-- </ele-tag>-->
|
||||
<!-- <span class="workplace-count-name">项目数</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <h2>0</h2>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="workplace-count-item">-->
|
||||
<!-- <div class="workplace-count-header">-->
|
||||
<!-- <ele-tag color="orange" shape="circle" size="small">-->
|
||||
<!-- <check-square-outlined />-->
|
||||
<!-- </ele-tag>-->
|
||||
<!-- <span class="workplace-count-name">待办项</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <h2>6 / 24</h2>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="workplace-count-item">-->
|
||||
<!-- <div class="workplace-count-header">-->
|
||||
<!-- <ele-tag color="green" shape="circle" size="small">-->
|
||||
<!-- <bell-filled />-->
|
||||
<!-- </ele-tag>-->
|
||||
<!-- <span class="workplace-count-name">消息</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <h2>0</h2>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import {
|
||||
UserOutlined,
|
||||
CloudOutlined,
|
||||
AppstoreFilled,
|
||||
CheckSquareOutlined,
|
||||
BellFilled
|
||||
} from '@ant-design/icons-vue';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
// 当前登录用户信息
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
const elip = ref<string[]>([
|
||||
'小事成就大事，细节成就完美~',
|
||||
'心态决定命运，自信走向成功',
|
||||
'人生能有几回博，今日不博何时博',
|
||||
'成功需要成本，时间也是一种成本，对时间的珍惜就是对成本的节约',
|
||||
'有志者自有千方百计，无志者只感千难万难',
|
||||
'积一时之跬步，臻千里之遥程'
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.workplace-user-card {
|
||||
.ele-cell-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.workplace-count-group {
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.workplace-count-item {
|
||||
display: inline-block;
|
||||
margin: 0 4px 0 24px;
|
||||
}
|
||||
|
||||
.workplace-count-name {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
.workplace-count-item {
|
||||
margin: 0 2px 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.workplace-user-card {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.workplace-count-group {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
src/views/oa/dashboard/components/qrcode.vue
Normal file
66
src/views/oa/dashboard/components/qrcode.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="400"
|
||||
:visible="visible"
|
||||
:title="`邀请新成员`"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
:footer="null"
|
||||
@ok="save"
|
||||
>
|
||||
<div
|
||||
class="qrcode-list"
|
||||
style="display: flex; justify-content: space-around"
|
||||
>
|
||||
<div>
|
||||
<img :src="qrcode" width="240" height="240" />
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 26px;
|
||||
padding-top: 20px;
|
||||
"
|
||||
>使用微信扫一扫</div
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</ele-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { reactive, ref } from 'vue';
|
||||
import { taskJoinQRCode } from '@/api/oa/task';
|
||||
|
||||
defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', user: User): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const qrcode = ref('');
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<User>({
|
||||
userId: undefined,
|
||||
nickname: undefined
|
||||
});
|
||||
|
||||
const save = () => {
|
||||
emit('done', form);
|
||||
};
|
||||
|
||||
taskJoinQRCode({}).then((text) => {
|
||||
qrcode.value = String(text);
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less"></style>
|
||||
116
src/views/oa/dashboard/components/task-card.vue
Normal file
116
src/views/oa/dashboard/components/task-card.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<a-card
|
||||
:title="title"
|
||||
:bordered="false"
|
||||
:body-style="{ padding: '2px', minHeight: '252px' }"
|
||||
>
|
||||
<template #extra
|
||||
><a @click="openUrl('/oa/task')" class="ele-text-placeholder"
|
||||
>更多<RightOutlined /></a
|
||||
></template>
|
||||
<a-list :size="`small`" :split="false" :data-source="list">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<div class="app-box">
|
||||
<div class="app-info">
|
||||
<a
|
||||
class="ele-text-secondary"
|
||||
@click="openNew('/oa/task/detail/' + item.taskId)"
|
||||
>
|
||||
<a-typography-paragraph
|
||||
ellipsis
|
||||
:content="`【${item.taskType}】${item.name}`"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<a class="ele-text-placeholder">
|
||||
<a-tag v-if="item.progress === TOBEARRANGED" color="red"
|
||||
>待安排</a-tag
|
||||
>
|
||||
<a-tag v-if="item.progress === PENDING" color="orange"
|
||||
>待处理</a-tag
|
||||
>
|
||||
<a-tag v-if="item.progress === PROCESSING" color="purple"
|
||||
>处理中</a-tag
|
||||
>
|
||||
<a-tag v-if="item.progress === TOBECONFIRMED" color="cyan"
|
||||
>待评价</a-tag
|
||||
>
|
||||
<a-tag v-if="item.progress === COMPLETED" color="green"
|
||||
>已完成</a-tag
|
||||
>
|
||||
<a-tag v-if="item.progress === CLOSED">已关闭</a-tag>
|
||||
<div class="ele-text-danger" v-if="item.overdueDays">
|
||||
已逾期{{ item.overdueDays }}天
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import { Task } from '@/api/oa/task/model';
|
||||
import { pageTask } from '@/api/oa/task';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import {
|
||||
CLOSED,
|
||||
COMPLETED,
|
||||
PENDING,
|
||||
PROCESSING,
|
||||
TOBEARRANGED,
|
||||
TOBECONFIRMED
|
||||
} from '@/api/oa/task/model/progress';
|
||||
import { RightOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
const props = defineProps<{
|
||||
title: string;
|
||||
}>();
|
||||
|
||||
const list = ref<Task[]>([]);
|
||||
/**
|
||||
* 加载数据
|
||||
*/
|
||||
const reload = () => {
|
||||
const { title } = props;
|
||||
const userStore = useUserStore();
|
||||
const where = {
|
||||
userId: undefined,
|
||||
commander: userStore.info?.userId,
|
||||
limit: 6,
|
||||
status: 0
|
||||
};
|
||||
// 加载列表
|
||||
pageTask(where).then((data) => {
|
||||
if (data?.list) {
|
||||
list.value = data.list;
|
||||
}
|
||||
});
|
||||
};
|
||||
reload();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'DashboardArticleList'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.app-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
.app-info {
|
||||
display: flex;
|
||||
margin-left: 5px;
|
||||
flex-direction: column;
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
84
src/views/oa/dashboard/components/user-list.vue
Normal file
84
src/views/oa/dashboard/components/user-list.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<!-- 小组成员 -->
|
||||
<template>
|
||||
<a-card :title="title" :bordered="false" :body-style="{ padding: '2px 0px' }">
|
||||
<template #extra>
|
||||
<more-icon @remove="onRemove" @edit="onEdit" />
|
||||
</template>
|
||||
<div
|
||||
v-for="(item, index) in userList"
|
||||
:key="index"
|
||||
class="ele-cell user-list-item"
|
||||
>
|
||||
<div style="flex-shrink: 0">
|
||||
<a-avatar :size="46" :src="item.avatar" />
|
||||
</div>
|
||||
<div class="ele-cell-content">
|
||||
<span class="ele-cell-title ele-elip">{{ item.nickname }}</span>
|
||||
<div class="ele-cell-desc ele-elip">{{ item.phone }}</div>
|
||||
</div>
|
||||
<div style="flex-shrink: 0">
|
||||
<a-tag :color="['green', 'red'][item.status]">
|
||||
{{ ['在线', '离线'][item.status] }}
|
||||
</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import MoreIcon from './more-icon.vue';
|
||||
import { pageUsers } from '@/api/system/user';
|
||||
import type { User } from '@/api/system/user/model';
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'remove'): void;
|
||||
(e: 'edit'): void;
|
||||
}>();
|
||||
|
||||
// 小组成员数据
|
||||
const userList = ref<User[]>([]);
|
||||
|
||||
/* 查询小组成员 */
|
||||
const queryUserList = () => {
|
||||
pageUsers({ parentId: 11, limit: 5 }).then((data: any) => {
|
||||
userList.value = data.list;
|
||||
});
|
||||
};
|
||||
|
||||
const onRemove = () => {
|
||||
emit('remove');
|
||||
};
|
||||
|
||||
const onEdit = () => {
|
||||
emit('edit');
|
||||
};
|
||||
|
||||
queryUserList();
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.user-list-item {
|
||||
padding: 12px 18px;
|
||||
|
||||
& + .user-list-item {
|
||||
border-top: 1px solid hsla(0, 0%, 60%, 0.15);
|
||||
}
|
||||
|
||||
.ele-cell-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ele-cell-desc {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ant-tag {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user