新增：一机一档的详情页
This commit is contained in:
gxwebsoft
@@ -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>
|
||||
Reference in New Issue
Block a user