新增：一机一档的详情页
This commit is contained in:
gxwebsoft
@@ -8,9 +8,7 @@ import type {
|
||||
* 设备数据
|
||||
*/
|
||||
export async function towerEquipmentData() {
|
||||
const res = await request.get(
|
||||
'/tower/tower-equipment/data'
|
||||
);
|
||||
const res = await request.get('/tower/tower-equipment/data');
|
||||
if (res.data.code === 0) {
|
||||
return res.data.data;
|
||||
}
|
||||
@@ -49,6 +47,16 @@ export async function listTowerEquipment(params?: TowerEquipmentParam) {
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
export async function getTowerEquipment(id: number) {
|
||||
const res = await request.get<ApiResult<TowerEquipment>>(
|
||||
'/tower/tower-equipment/' + id
|
||||
);
|
||||
if (res.data.code === 0 && res.data.data) {
|
||||
return res.data.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加设备
|
||||
*/
|
||||
|
||||
@@ -23,18 +23,18 @@
|
||||
>
|
||||
</a-space>
|
||||
<template v-if="loginType === 'account'">
|
||||
<a-form-item v-bind="validateInfos.tenantId">
|
||||
<a-input
|
||||
allow-clear
|
||||
size="large"
|
||||
v-model:value="form.tenantId"
|
||||
:placeholder="`企业ID`"
|
||||
>
|
||||
<template #prefix>
|
||||
<BankOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item v-bind="validateInfos.tenantId">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- size="large"-->
|
||||
<!-- v-model:value="form.tenantId"-->
|
||||
<!-- :placeholder="`企业ID`"-->
|
||||
<!-- >-->
|
||||
<!-- <template #prefix>-->
|
||||
<!-- <BankOutlined />-->
|
||||
<!-- </template>-->
|
||||
<!-- </a-input>-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item v-bind="validateInfos.username">
|
||||
<a-input
|
||||
allow-clear
|
||||
@@ -80,9 +80,7 @@
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-checkbox v-model:checked="form.remember">
|
||||
记住密码
|
||||
</a-checkbox>
|
||||
<a-checkbox v-model:checked="form.remember"> 记住密码 </a-checkbox>
|
||||
<!-- <router-link-->
|
||||
<!-- to="/forget"-->
|
||||
<!-- class="ele-pull-right"-->
|
||||
@@ -157,7 +155,7 @@
|
||||
import { login, getCaptcha, getWxWorkQrConnect } from '@/api/passport/login';
|
||||
// import { navTo } from '@/utils/common';
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { THEME_STORE_NAME } from "@/config/setting";
|
||||
import { THEME_STORE_NAME } from '@/config/setting';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
||||
@@ -176,7 +174,7 @@
|
||||
password: '',
|
||||
code: '',
|
||||
remember: true,
|
||||
tenantId: undefined
|
||||
tenantId: 10049
|
||||
});
|
||||
// 验证码 base64 数据
|
||||
const captcha = ref('');
|
||||
|
||||
@@ -51,6 +51,11 @@
|
||||
disabled
|
||||
v-model:value="form.surplusYear"
|
||||
/>
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入设备编号"-->
|
||||
<!-- v-model:value="form.equipmentNo"-->
|
||||
<!-- />-->
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<a-button class="ele-btn-icon">
|
||||
<template #icon>
|
||||
<QrcodeOutlined />
|
||||
</template>
|
||||
<span>批量生产二维码</span>
|
||||
</a-button>
|
||||
<!-- <a-button class="ele-btn-icon">-->
|
||||
<!-- <template #icon>-->
|
||||
<!-- <QrcodeOutlined />-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>批量生产二维码</span>-->
|
||||
<!-- </a-button>-->
|
||||
<!-- <a-space>-->
|
||||
<!-- <a-button @click="onTab(undefined)"-->
|
||||
<!-- >设备总数：{{ equipmentData.totalNum }}</a-button-->
|
||||
|
||||
247
src/views/tower/machine/detail/components/app-about-edit.vue
Normal file
247
src/views/tower/machine/detail/components/app-about-edit.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<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 { 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 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 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 ? 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/tower/machine/detail/components/app-about.vue
Normal file
60
src/views/tower/machine/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/tower/machine/detail/components/app-annex-edit.vue
Normal file
221
src/views/tower/machine/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/tower/machine/detail/components/app-annex.vue
Normal file
302
src/views/tower/machine/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(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>
|
||||
<!-- 编辑弹窗 -->
|
||||
<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 } from '@/utils/common';
|
||||
|
||||
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: () => {
|
||||
window.open(record.url);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.appId,
|
||||
(appId) => {
|
||||
if (appId) {
|
||||
console.log(appId);
|
||||
reload();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'AppAnnexIndex'
|
||||
};
|
||||
</script>
|
||||
177
src/views/tower/machine/detail/components/app-field-edit.vue
Normal file
177
src/views/tower/machine/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>
|
||||
@@ -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/tower/machine/detail/components/app-field.vue
Normal file
208
src/views/tower/machine/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>
|
||||
500
src/views/tower/machine/detail/components/app-info-edit.vue
Normal file
500
src/views/tower/machine/detail/components/app-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>
|
||||
194
src/views/tower/machine/detail/components/app-info.vue
Normal file
194
src/views/tower/machine/detail/components/app-info.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<a-descriptions bordered>
|
||||
<!-- <template #extra>-->
|
||||
<!-- <a @click="openEdit">编辑</a>-->
|
||||
<!-- </template>-->
|
||||
<a-descriptions-item
|
||||
label="设备名称"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.name }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="设备状态"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>
|
||||
<a-tag v-if="data.status === 0" color="green">闲置</a-tag>
|
||||
<a-tag v-if="data.status === 1" color="red">报废</a-tag>
|
||||
<a-tag v-if="data.status === 2" color="purple">注销</a-tag>
|
||||
<a-tag v-if="data.status === 3" color="orange">转卖</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item
|
||||
label="二维码"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
><ele-qr-code
|
||||
:value="`http://1.14.159.185:10042/tower/machine/detail/${data.equipmentId}`"
|
||||
:size="100"
|
||||
/></a-descriptions-item>
|
||||
|
||||
<a-descriptions-item
|
||||
label="设备型号"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.model }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="备案编号"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.filingNo }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="出厂编号"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.factoryNo }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="出厂日期"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.factoryDate }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="制造厂家"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.manufactor }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="报废日期"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.scrapDate }}</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.lifeYear }}</a-descriptions-item
|
||||
>
|
||||
|
||||
<a-descriptions-item
|
||||
label="剩余使用年限"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.surplusYear }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="产权单位"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.company }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="所属仓库"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.warehouse }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="采购日期"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.buyDate }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="设备来源"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.source }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="设计高度"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.designHeight }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="额定载重"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.ratedLoad }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="最大起升高度(m)"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.maxLiftingHeight }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="独立高度"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.height }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="最大幅度处额定载重"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.maxRatedLoad }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="臂长"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.armLength }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="采购合同"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.file1 }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="发票"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.file2 }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="制造许可证"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.file3 }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="出厂合格证"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.file4 }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="备案证书"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.file5 }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="整机性能参数表"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.file6 }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item
|
||||
label="其他"
|
||||
:labelStyle="{ width: '200px', color: '#808080' }"
|
||||
>{{ data.file7 }}</a-descriptions-item
|
||||
>
|
||||
</a-descriptions>
|
||||
<!-- 编辑弹窗 -->
|
||||
<AppInfoEdit v-model:visible="showEdit" :data="data" @done="reload" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import AppInfoEdit from './app-info-edit.vue';
|
||||
import { TowerEquipment } from '@/api/tower/equipment/model';
|
||||
|
||||
defineProps<{
|
||||
data: TowerEquipment;
|
||||
logo: [] | any;
|
||||
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 reload = () => {
|
||||
emit('done');
|
||||
};
|
||||
</script>
|
||||
255
src/views/tower/machine/detail/components/app-nenew.vue
Normal file
255
src/views/tower/machine/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>
|
||||
220
src/views/tower/machine/detail/components/app-photo-edit.vue
Normal file
220
src/views/tower/machine/detail/components/app-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/tower/machine/detail/components/app-photo.vue
Normal file
52
src/views/tower/machine/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/tower/machine/detail/components/app-profile-edit.vue
Normal file
256
src/views/tower/machine/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/tower/machine/detail/components/app-profile.vue
Normal file
66
src/views/tower/machine/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/tower/machine/detail/components/app-secret-form.vue
Normal file
210
src/views/tower/machine/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 } 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/tower/machine/detail/components/app-task.vue
Normal file
298
src/views/tower/machine/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>
|
||||
121
src/views/tower/machine/detail/components/app-users.vue
Normal file
121
src/views/tower/machine/detail/components/app-users.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<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>用户</th>
|
||||
<th>角色</th>
|
||||
<!-- <th>邮箱</th>-->
|
||||
<th>加入时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(user, index) in data.users" :key="index">
|
||||
<td>
|
||||
<a-avatar :src="user.avatar">
|
||||
<template #icon>
|
||||
<user-outlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<span style="padding-left: 5px">{{ user.nickname }}</span>
|
||||
</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>{{ user.email }}</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 { getMobile } from '@/utils/common';
|
||||
import { AppUser } from '@/api/oa/app/user/model';
|
||||
import { addAppUser, removeAppUser } from '@/api/oa/app/user';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const props = defineProps<{
|
||||
appId: any;
|
||||
data: App;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 添加开发成员
|
||||
const addAppDevUser = (data: User) => {
|
||||
addAppUser({
|
||||
userId: data.userId,
|
||||
appId: props.data?.appId,
|
||||
role: 20
|
||||
})
|
||||
.then((msg) => {
|
||||
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) => {
|
||||
message.success(msg);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 移除成员
|
||||
const removeUser = (data: AppUser) => {
|
||||
removeAppUser(data.appUserId)
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
200
src/views/tower/machine/detail/index.vue
Normal file
200
src/views/tower/machine/detail/index.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<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="profile" />-->
|
||||
</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 useFormData from '@/utils/use-form-data';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { setPageTabTitle } from '@/utils/page-tab-util';
|
||||
import { getTowerEquipment } from '@/api/tower/equipment';
|
||||
import { TowerEquipment } from '@/api/tower/equipment/model';
|
||||
import { openUrl } from '@/utils/common';
|
||||
|
||||
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 equipmentId = ref<number>(0);
|
||||
const appQrcode = ref<any[]>([]);
|
||||
const images = ref<ItemType[]>([]);
|
||||
const appField = ref<TowerEquipment[]>();
|
||||
|
||||
// 应用信息
|
||||
const { form, assignFields, resetFields } = useFormData<TowerEquipment>({
|
||||
equipmentId: undefined,
|
||||
name: undefined,
|
||||
model: undefined,
|
||||
equipmentNo: undefined,
|
||||
factoryNo: undefined,
|
||||
factoryDate: undefined,
|
||||
manufactor: undefined,
|
||||
lifeYear: undefined,
|
||||
surplusYear: undefined,
|
||||
scrapDate: undefined,
|
||||
beianNo: undefined,
|
||||
licenceNo: undefined,
|
||||
company: undefined,
|
||||
organization: undefined,
|
||||
warehouse: undefined,
|
||||
source: undefined,
|
||||
filingNo: undefined,
|
||||
machineNo: undefined,
|
||||
maxLiftingHeight: undefined,
|
||||
armLength: undefined,
|
||||
isOutOrg: undefined,
|
||||
buyDate: undefined,
|
||||
currentLocation: undefined,
|
||||
designHeight: undefined,
|
||||
height: undefined,
|
||||
ratedLoad: undefined,
|
||||
files: undefined,
|
||||
file1: undefined,
|
||||
file2: undefined,
|
||||
file3: undefined,
|
||||
file4: undefined,
|
||||
file5: undefined,
|
||||
file6: undefined,
|
||||
file7: undefined,
|
||||
users: undefined,
|
||||
status: undefined,
|
||||
comments: undefined,
|
||||
userId: undefined,
|
||||
deleted: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
maxRatedLoad: undefined,
|
||||
securityStatus: undefined,
|
||||
projectName: undefined,
|
||||
competentDepartment: undefined,
|
||||
projectList: undefined
|
||||
});
|
||||
|
||||
const onChange = () => {
|
||||
reload();
|
||||
};
|
||||
|
||||
/**
|
||||
* 加载数据
|
||||
*/
|
||||
const reload = () => {
|
||||
resetFields();
|
||||
logo.value = [];
|
||||
appQrcode.value = [];
|
||||
images.value = [];
|
||||
appField.value = [];
|
||||
// 加载项目详情
|
||||
getTowerEquipment(equipmentId.value)
|
||||
.then((data) => {
|
||||
assignFields(data);
|
||||
if (data.name) {
|
||||
title.value = data.name;
|
||||
// 修改页签标题
|
||||
setPageTabTitle(data.name);
|
||||
}
|
||||
// if (data.appIcon) {
|
||||
// logo.value.push({
|
||||
// uid: data.appId,
|
||||
// url: data.appIcon,
|
||||
// status: 'done'
|
||||
// });
|
||||
// }
|
||||
// if (data.appQrcode) {
|
||||
// appQrcode.value.push({
|
||||
// uid: data.appId,
|
||||
// url: data.appQrcode,
|
||||
// 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;
|
||||
})
|
||||
.catch((err) => {
|
||||
isShow.value = false;
|
||||
spinning.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
currentRoute,
|
||||
(route) => {
|
||||
const { params } = unref(route);
|
||||
const { id } = params;
|
||||
console.log(id);
|
||||
if (id) {
|
||||
equipmentId.value = Number(id);
|
||||
}
|
||||
reload();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'EquipmentIdDetail'
|
||||
};
|
||||
</script>
|
||||
@@ -57,7 +57,6 @@
|
||||
row-key="equipmentId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
:scroll="{ x: 1200 }"
|
||||
@@ -88,7 +87,7 @@
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a>一机一档</a>
|
||||
<a @click="openInfo(record)">一机一档</a>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
@@ -111,14 +110,15 @@
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import Search from './components/search.vue';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import EquipmentEdit from './components/equipment-edit.vue';
|
||||
import {
|
||||
pageTowerEquipment,
|
||||
removeBatchTowerEquipment,
|
||||
towerEquipmentData,
|
||||
getTowerEquipment,
|
||||
// statusBatchTowerEquipment,
|
||||
updateBatchTowerEquipment,
|
||||
updateTowerEquipment
|
||||
updateBatchTowerEquipment
|
||||
} from '@/api/tower/equipment';
|
||||
import {
|
||||
TowerEquipment,
|
||||
@@ -310,6 +310,10 @@
|
||||
});
|
||||
};
|
||||
|
||||
const openInfo = (record: TowerEquipment) => {
|
||||
openUrl('/tower/machine/detail/' + record.equipmentId);
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: TowerEquipment) => {
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user