版本更新0.2.0:创特云盘
This commit is contained in:
磷叶
parent
730089b9a1
commit
80e44ef31a
44
src/api/bst/attach.js
Normal file
44
src/api/bst/attach.js
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 查询资源列表
|
||||
export function listAttach(query) {
|
||||
return request({
|
||||
url: '/bst/attach/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询资源详细
|
||||
export function getAttach(id) {
|
||||
return request({
|
||||
url: '/bst/attach/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增资源
|
||||
export function addAttach(data) {
|
||||
return request({
|
||||
url: '/bst/attach',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改资源
|
||||
export function updateAttach(data) {
|
||||
return request({
|
||||
url: '/bst/attach',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除资源
|
||||
export function delAttach(id) {
|
||||
return request({
|
||||
url: '/bst/attach/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
52
src/api/bst/attachClassify.js
Normal file
52
src/api/bst/attachClassify.js
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 查询资源分类列表
|
||||
export function listAttachClassify(query) {
|
||||
return request({
|
||||
url: '/bst/attachClassify/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询资源分类详细
|
||||
export function getAttachClassify(id) {
|
||||
return request({
|
||||
url: '/bst/attachClassify/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增资源分类
|
||||
export function addAttachClassify(data) {
|
||||
return request({
|
||||
url: '/bst/attachClassify',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改资源分类
|
||||
export function updateAttachClassify(data) {
|
||||
return request({
|
||||
url: '/bst/attachClassify',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除资源分类
|
||||
export function delAttachClassify(id) {
|
||||
return request({
|
||||
url: '/bst/attachClassify/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 查询所有分类
|
||||
export function listAttachClassifyAll() {
|
||||
return request({
|
||||
url: '/bst/attachClassify/listAll',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
|
@ -46,6 +46,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 额外内容 -->
|
||||
<div class="extra-box">
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
|
|
@ -65,7 +71,7 @@ export default {
|
|||
type: Array,
|
||||
default: () => [],
|
||||
required: false
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="avatar-list" v-if="list.length > 0">
|
||||
<el-tooltip
|
||||
v-for="(item, index) in list"
|
||||
v-for="(item, index) in displayList"
|
||||
:key="item[idProp]"
|
||||
:content="item[showProp]"
|
||||
placement="top"
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<div
|
||||
class="avatar-item"
|
||||
:style="{
|
||||
marginLeft: index !== 0 ? '-10px' : '0',
|
||||
marginLeft: index !== 0 ? `-${size * 0.3}px` : '0',
|
||||
zIndex: list.length - index,
|
||||
backgroundColor: item[avatarProp] ? 'transparent' : getRandomColor(item[idProp])
|
||||
}"
|
||||
|
|
@ -28,6 +28,43 @@
|
|||
</el-avatar>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
|
||||
<!-- 总数显示 -->
|
||||
<el-popover
|
||||
v-if="showTotal"
|
||||
placement="top"
|
||||
trigger="hover"
|
||||
popper-class="avatar-list-popover"
|
||||
:width="360"
|
||||
>
|
||||
<div class="total-list">
|
||||
<div v-for="item in list" :key="item[idProp]" class="total-item">
|
||||
<el-avatar
|
||||
:size="size"
|
||||
:src="item[avatarProp]"
|
||||
v-if="item[avatarProp]"
|
||||
></el-avatar>
|
||||
<el-avatar
|
||||
:size="size"
|
||||
v-else
|
||||
:style="{ backgroundColor: getRandomColor(item[idProp]) }"
|
||||
>
|
||||
{{ getFirstChar(item[showProp]) }}
|
||||
</el-avatar>
|
||||
<span class="total-item-name">{{ item[showProp] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
slot="reference"
|
||||
class="avatar-item total-text"
|
||||
:style="{
|
||||
marginLeft: `0px`,
|
||||
zIndex: 0
|
||||
}"
|
||||
>
|
||||
<span class="total-count">共{{ list.length }}{{ unit }}</span>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -54,24 +91,53 @@ export default {
|
|||
idProp: {
|
||||
type: String,
|
||||
default: 'userId'
|
||||
},
|
||||
charIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
maxCount: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
unit: {
|
||||
type: String,
|
||||
default: '项'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showTotal() {
|
||||
return this.maxCount > 0 && this.list.length > this.maxCount;
|
||||
},
|
||||
displayList() {
|
||||
if (this.maxCount > 0 && this.list.length > this.maxCount) {
|
||||
return this.list.slice(0, this.maxCount);
|
||||
}
|
||||
return this.list;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取首字
|
||||
getFirstChar(name) {
|
||||
return name ? name.charAt(0) : '?'
|
||||
if (!name) {
|
||||
return '?';
|
||||
}
|
||||
if (this.charIndex < 0) {
|
||||
return name.charAt(name.length + this.charIndex);
|
||||
}
|
||||
return name.charAt(this.charIndex);
|
||||
},
|
||||
// 根据ID生成固定的随机颜色
|
||||
getRandomColor(id) {
|
||||
const colors = [
|
||||
'#FFB5C5', // 浅粉色
|
||||
'#98FB98', // 浅绿色
|
||||
'#87CEFA', // 浅蓝色
|
||||
'#DDA0DD', // 梅红色
|
||||
'#F0E68C', // 浅黄色
|
||||
'#E6E6FA', // 薰衣草色
|
||||
'#FFA07A', // 浅珊瑚色
|
||||
'#B0E0E6' // 粉蓝色
|
||||
'#BBDEFB', // 浅蓝色
|
||||
'#E1BEE7', // 浅紫色
|
||||
'#C8E6C9', // 浅绿色
|
||||
'#FFE0B2', // 浅橙色
|
||||
'#CFD8DC', // 浅灰蓝色
|
||||
'#B3E5FC', // 天蓝色
|
||||
'#F8BBD0', // 浅粉色
|
||||
'#D7CCC8' // 浅棕色
|
||||
]
|
||||
const index = parseInt(id) % colors.length
|
||||
return colors[index]
|
||||
|
|
@ -101,7 +167,52 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: inherit;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.total-text {
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.total-count {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
padding: 8px;
|
||||
|
||||
.total-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.total-item-name {
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .avatar-list-popover {
|
||||
.el-popover__title {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<el-cascader
|
||||
v-model="selectValue"
|
||||
:placeholder="placeholder"
|
||||
:clearable="clearable"
|
||||
filterable
|
||||
v-on="$listeners"
|
||||
style="width: 100%;"
|
||||
:options="options"
|
||||
:show-all-levels="false"
|
||||
:props="{
|
||||
emitPath: false,
|
||||
multiple: multiple,
|
||||
expandTrigger: 'hover',
|
||||
checkStrictly: checkStrictly,
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listAttachClassifyAll } from '@/api/bst/attachClassify';
|
||||
|
||||
export default {
|
||||
name: "AttachClassifySelect",
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Array],
|
||||
|
||||
default: null
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "请选择分类"
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
productType: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
checkStrictly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
selectValue: {
|
||||
get() {
|
||||
return this.value;
|
||||
},
|
||||
set(val) {
|
||||
this.$emit("input", val);
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getOptions();
|
||||
},
|
||||
methods: {
|
||||
getOptions() {
|
||||
listAttachClassifyAll().then(response => {
|
||||
this.options = this.handleTree(response.data, 'id', 'parentId', 'children');
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -25,6 +25,12 @@
|
|||
:data="uploadData"
|
||||
drag
|
||||
>
|
||||
<!-- 粘贴区域（隐藏） -->
|
||||
<textarea
|
||||
ref="pasteArea"
|
||||
class="paste-area"
|
||||
@paste="handlePaste"
|
||||
></textarea>
|
||||
<i class="el-icon-plus"></i>
|
||||
<template #file="{ file }">
|
||||
<div :class="['el-upload-list__item', { 'is-office-file': !isImage(file.name) }]">
|
||||
|
|
@ -234,14 +240,14 @@ export default {
|
|||
// 新增：鼠标进入处理
|
||||
handleMouseEnter() {
|
||||
if (!this.isListening) {
|
||||
document.addEventListener('paste', this.handlePaste);
|
||||
this.$refs.pasteArea.focus();
|
||||
this.isListening = true;
|
||||
}
|
||||
},
|
||||
// 新增：鼠标离开处理
|
||||
handleMouseLeave() {
|
||||
if (this.isListening) {
|
||||
document.removeEventListener('paste', this.handlePaste);
|
||||
this.$refs.pasteArea.blur();
|
||||
this.isListening = false;
|
||||
}
|
||||
},
|
||||
|
|
@ -560,5 +566,17 @@ export default {
|
|||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 粘贴区域样式 */
|
||||
.paste-area {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div :class="{'hidden':hidden}" class="pagination-container">
|
||||
<div :class="{'hidden':hidden}" class="pagination-container" :style="{justifyContent: justifyContent}">
|
||||
<el-pagination
|
||||
:background="background"
|
||||
:current-page.sync="currentPage"
|
||||
|
|
@ -59,6 +59,10 @@ export default {
|
|||
hidden: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
justifyContent: {
|
||||
type: String,
|
||||
default: 'flex-end'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -106,7 +110,6 @@ export default {
|
|||
<style scoped>
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.pagination-container.hidden {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -91,3 +91,11 @@ export function ProgressFormat(val) {
|
|||
}
|
||||
return val.toFixed(0) + '%';
|
||||
}
|
||||
|
||||
// 文件类型
|
||||
export const FileType = {
|
||||
// 图片
|
||||
IMAGE: ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'],
|
||||
// 办公
|
||||
OFFICE: ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx'],
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { FileType } from '@/utils/constants';
|
||||
import { parseTime } from '@/utils/ruoyi';
|
||||
import Decimal from 'decimal.js';
|
||||
import { parseTime } from './ruoyi';
|
||||
|
||||
/**
|
||||
* 表格时间格式化
|
||||
*/
|
||||
|
|
@ -562,12 +562,12 @@ export function getExt(fileName) {
|
|||
// 是否为办公文件
|
||||
export function isOfficeFile(fileName) {
|
||||
const ext = getExt(fileName);
|
||||
return ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx'].includes(ext);
|
||||
return FileType.OFFICE.includes(ext);
|
||||
}
|
||||
// 是否为图片
|
||||
export function isImage(url) {
|
||||
const ext = getExt(url);
|
||||
return ['png', 'jpg', 'jpeg', 'gif', 'bmp'].includes(ext);
|
||||
return FileType.IMAGE.includes(ext);
|
||||
}
|
||||
|
||||
// 为文件名在后缀和名称之间拼接时间戳
|
||||
|
|
|
|||
142
src/views/bst/attach/components/AttachEditDialog.vue
Normal file
142
src/views/bst/attach/components/AttachEditDialog.vue
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="1000px"
|
||||
append-to-body
|
||||
@close="handleClose"
|
||||
@open="handleOpen"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" v-loading="loading">
|
||||
<el-form-item label="分类" prop="classifyId">
|
||||
<attach-classify-select v-model="form.classifyId" check-strictly/>
|
||||
</el-form-item>
|
||||
<el-form-item label="资源名称" prop="name" v-if="form.id != null">
|
||||
<el-input v-model="form.name" placeholder="请输入资源名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="资源" prop="url" v-if="form.id == null">
|
||||
<image-upload v-model="form.url" :limit="100" :file-type="fileType" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
|
||||
<el-button @click="handleClose">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addAttach, updateAttach, getAttach } from "@/api/bst/attach"
|
||||
import AttachClassifySelect from '@/components/Business/AttachClassify/AttachClassifySelect.vue'
|
||||
import { FileType } from '@/utils/constants'
|
||||
|
||||
export default {
|
||||
name: "AttachClassifyEditDialog",
|
||||
components: {
|
||||
AttachClassifySelect
|
||||
},
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
initData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
submitLoading: false,
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
classifyId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: "资源名称不能为空", trigger: "blur" }
|
||||
],
|
||||
url: [
|
||||
{ required: true, message: "资源不能为空", trigger: "blur" }
|
||||
]
|
||||
},
|
||||
fileType: [
|
||||
// 图片
|
||||
...FileType.IMAGE,
|
||||
// 办公
|
||||
...FileType.OFFICE
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return this.id ? '修改资源' : '新增资源'
|
||||
},
|
||||
dialogVisible: {
|
||||
get() {
|
||||
return this.show
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('update:show', value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 获取详细信息 */
|
||||
getInfo(id) {
|
||||
this.loading = true
|
||||
getAttach(id).then(response => {
|
||||
this.form = response.data
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
name: null,
|
||||
classifyId: null,
|
||||
urls: null,
|
||||
...this.initData
|
||||
}
|
||||
this.resetForm('form')
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.submitLoading = true
|
||||
const submitFunc = this.form.id ? updateAttach : addAttach
|
||||
submitFunc(this.form).then(() => {
|
||||
this.$modal.msgSuccess(this.form.id ? "修改成功" : "新增成功")
|
||||
this.$emit('success')
|
||||
this.handleClose()
|
||||
}).finally(() => {
|
||||
this.submitLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
handleClose() {
|
||||
this.$emit('update:show', false)
|
||||
},
|
||||
// 打开事件
|
||||
handleOpen() {
|
||||
if (this.id) {
|
||||
this.getInfo(this.id)
|
||||
} else {
|
||||
this.reset()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
288
src/views/bst/attach/index.vue
Normal file
288
src/views/bst/attach/index.vue
Normal file
|
|
@ -0,0 +1,288 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="40">
|
||||
<el-col :lg="4" :md="8" :xs="24" style="border-right: 1px solid #ebeef5;">
|
||||
<attach-classify-tree @node-click="handleClassifyNodeClick"/>
|
||||
</el-col>
|
||||
<el-col :lg="20" :md="16" :xs="24" >
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="资源名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入资源名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建人" prop="createId">
|
||||
<user-select v-model="queryParams.createId" @change="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="URL" prop="url">
|
||||
<el-input
|
||||
v-model="queryParams.url"
|
||||
placeholder="请输入URL"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-has-permi="['bst:attach:add']"
|
||||
>上传</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" v-loading="loading" v-if="attachList.length > 0">
|
||||
<el-col :lg="4" :md="8" :xs="12" v-for="item in attachList" :key="item.id">
|
||||
<attach-card :url="item.url" :preview-list="[item.url]">
|
||||
<template #extra>
|
||||
<div class="attach-info">
|
||||
<div class="info-item" v-for="column in showColumns" :key="column.key" v-if="isShow(column.key)">
|
||||
<span class="label">{{ column.label }}:</span>
|
||||
<el-tooltip :content="item[column.key]" placement="top" :disabled="!item[column.key]">
|
||||
<span class="value">{{ item[column.key] | dv }}</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(item)"
|
||||
v-has-permi="['bst:attach:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(item)"
|
||||
v-has-permi="['bst:attach:remove']"
|
||||
>删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</attach-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-empty v-else description="暂无文件"></el-empty>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 资源编辑弹窗 -->
|
||||
<attach-edit-dialog
|
||||
:show.sync="open"
|
||||
:id="row.id"
|
||||
:init-data="{classifyId: queryParams.classifyId}"
|
||||
@success="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listAttach, delAttach } from "@/api/bst/attach";
|
||||
import { $showColumns } from '@/utils/mixins';
|
||||
import FormCol from "@/components/FormCol/index.vue";
|
||||
import AttachClassifyTree from '../attachClassify/components/AttachClassifyTree.vue';
|
||||
import AttachCard from '@/components/AttachCard/index.vue';
|
||||
import UserSelect from '@/components/Business/User/UserSelect.vue';
|
||||
import AttachEditDialog from '@/views/bst/attach/components/AttachEditDialog.vue';
|
||||
|
||||
// 默认排序字段
|
||||
const defaultSort = {
|
||||
prop: "createTime",
|
||||
order: "descending"
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "Attach",
|
||||
mixins: [$showColumns],
|
||||
components: {FormCol, AttachClassifyTree, AttachCard, UserSelect, AttachEditDialog},
|
||||
data() {
|
||||
return {
|
||||
row: {},
|
||||
span: 24,
|
||||
// 字段列表
|
||||
columns: [
|
||||
{key: 'id', visible: false, label: '资源ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'classifyId', visible: false, label: '分类ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'name', visible: true, label: '名称', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'url', visible: false, label: 'URL', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'createName', visible: true, label: '创建人', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
],
|
||||
// 排序方式
|
||||
orderSorts: ['ascending', 'descending', null],
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 资源表格数据
|
||||
attachList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
defaultSort,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 18,
|
||||
orderByColumn: defaultSort.prop,
|
||||
isAsc: defaultSort.order,
|
||||
id: null,
|
||||
classifyId: null,
|
||||
name: null,
|
||||
url: null,
|
||||
createId: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
classifyId: [
|
||||
{ required: true, message: "分类ID不能为空", trigger: "blur" }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
url: [
|
||||
{ required: true, message: "URL不能为空", trigger: "blur" }
|
||||
],
|
||||
createTime: [
|
||||
{ required: true, message: "创建时间不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 分类树节点点击事件
|
||||
handleClassifyNodeClick(node) {
|
||||
this.queryParams.classifyId = node.id;
|
||||
this.getList();
|
||||
},
|
||||
/** 查询资源列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listAttach(this.queryParams).then(response => {
|
||||
this.attachList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.row = {};
|
||||
this.open = true;
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.row = row;
|
||||
this.open = true;
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal.confirm('是否确认删除资源编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delAttach(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('bst/attach/export', {
|
||||
...this.queryParams
|
||||
}, `attach_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.attach-info {
|
||||
padding: 10px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
|
||||
.info-item {
|
||||
margin-bottom: 5px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
color: #909399;
|
||||
margin-right: 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #606266;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="500px"
|
||||
append-to-body
|
||||
@close="handleClose"
|
||||
@open="handleOpen"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" v-loading="loading">
|
||||
<el-form-item label="上级分类" prop="parentId">
|
||||
<attach-classify-select v-model="form.parentId" check-strictly/>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入分类名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="form.sort" placeholder="请输入排序" style="width: 100%;" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
|
||||
<el-button @click="handleClose">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addAttachClassify, updateAttachClassify, getAttachClassify } from "@/api/bst/attachClassify"
|
||||
import AttachClassifySelect from '@/components/Business/AttachClassify/AttachClassifySelect.vue'
|
||||
|
||||
export default {
|
||||
name: "AttachClassifyEditDialog",
|
||||
components: {
|
||||
AttachClassifySelect
|
||||
},
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
initData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
submitLoading: false,
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
parentId: [
|
||||
{ required: true, message: "上级分类不能为空", trigger: "blur" }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: "分类名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return this.id ? '修改分类' : '新增分类'
|
||||
},
|
||||
dialogVisible: {
|
||||
get() {
|
||||
return this.show
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('update:show', value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 获取详细信息 */
|
||||
getInfo(id) {
|
||||
this.loading = true
|
||||
getAttachClassify(id).then(response => {
|
||||
this.form = response.data
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
name: null,
|
||||
parentId: null,
|
||||
sort: 1,
|
||||
...this.initData
|
||||
}
|
||||
this.resetForm('form')
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.submitLoading = true
|
||||
const submitFunc = this.form.id ? updateAttachClassify : addAttachClassify
|
||||
submitFunc(this.form).then(() => {
|
||||
this.$modal.msgSuccess(this.form.id ? "修改成功" : "新增成功")
|
||||
this.$emit('success')
|
||||
this.handleClose()
|
||||
}).finally(() => {
|
||||
this.submitLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
handleClose() {
|
||||
this.$emit('update:show', false)
|
||||
},
|
||||
// 打开事件
|
||||
handleOpen() {
|
||||
if (this.id) {
|
||||
this.getInfo(this.id)
|
||||
} else {
|
||||
this.reset()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
149
src/views/bst/attachClassify/components/AttachClassifyTree.vue
Normal file
149
src/views/bst/attachClassify/components/AttachClassifyTree.vue
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
<template>
|
||||
<div v-loading="loading">
|
||||
<div style="margin-bottom: 10px;">
|
||||
<el-input v-model="searchValue" placeholder="请输入分类名称" @input="handleSearch" size="small" />
|
||||
</div>
|
||||
<el-tree
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
v-on="$listeners"
|
||||
ref="tree"
|
||||
>
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<span>{{ node.label }}</span>
|
||||
<span class="operation-group">
|
||||
<el-button type="text" size="mini" icon="el-icon-plus" @click.stop="handleAdd(data)"></el-button>
|
||||
<el-button type="text" size="mini" icon="el-icon-edit" @click.stop="handleEdit(data)"></el-button>
|
||||
<el-button type="text" size="mini" icon="el-icon-delete" @click.stop="handleDelete(data)"></el-button>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
|
||||
<!-- 使用新的弹窗组件 -->
|
||||
<attach-classify-edit-dialog
|
||||
:show.sync="dialogVisible"
|
||||
:id="row.id"
|
||||
:init-data="{parentId: parentId}"
|
||||
@success="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listAttachClassifyAll, delAttachClassify } from '@/api/bst/attachClassify'
|
||||
import AttachClassifyEditDialog from '@/views/bst/attachClassify/components/AttachClassifyEditDialog.vue'
|
||||
|
||||
export default {
|
||||
name: 'AttachClassifyTree',
|
||||
components: {
|
||||
AttachClassifyEditDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
classifyList: [],
|
||||
loading: false,
|
||||
treeData: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
// 弹窗相关
|
||||
dialogVisible: false,
|
||||
row: {},
|
||||
parentId: null,
|
||||
searchValue: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleSearch() {
|
||||
this.$refs.tree.filter(this.searchValue)
|
||||
},
|
||||
// 筛选节点
|
||||
filterNode(value, data) {
|
||||
if (!value) {
|
||||
return true;
|
||||
}
|
||||
return data.name.indexOf(value) !== -1;
|
||||
},
|
||||
// 获取数据列表
|
||||
getList() {
|
||||
this.loading = true
|
||||
listAttachClassifyAll().then(response => {
|
||||
this.classifyList = response.data
|
||||
this.treeData = this.handleTree(this.classifyList, 'id', 'parentId', 'children')
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 新增按钮操作
|
||||
handleAdd(row) {
|
||||
this.row = {};
|
||||
this.parentId = row ? row.id : '0';
|
||||
this.dialogVisible = true
|
||||
},
|
||||
// 修改按钮操作
|
||||
handleEdit(row) {
|
||||
this.row = row;
|
||||
this.parentId = row.parentId;
|
||||
this.dialogVisible = true
|
||||
},
|
||||
// 删除按钮操作
|
||||
handleDelete(row) {
|
||||
if (row.children && row.children.length > 0) {
|
||||
this.$modal.msgError('该分类下存在子分类，不能删除')
|
||||
return;
|
||||
}
|
||||
if (row.parentId === '0') {
|
||||
this.$modal.msgError('不能删除根目录')
|
||||
return;
|
||||
}
|
||||
this.$modal.confirm('是否确认删除名称为"' + row.name + '"的数据项?').then(() => {
|
||||
return delAttachClassify(row.id)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess('删除成功')
|
||||
}).catch(() => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
|
||||
.operation-group {
|
||||
.el-button {
|
||||
opacity: 0;
|
||||
margin-left: 8px;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&[class*="el-icon-delete"] {
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.operation-group {
|
||||
.el-button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
238
src/views/bst/attachClassify/index.vue
Normal file
238
src/views/bst/attachClassify/index.vue
Normal file
|
|
@ -0,0 +1,238 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-has-permi="['bst:attachClassify:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-has-permi="['bst:attachClassify:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-has-permi="['bst:attachClassify:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="attachClassifyList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="onSortChange">
|
||||
<template v-for="column of showColumns">
|
||||
<el-table-column
|
||||
:key="column.key"
|
||||
:label="column.label"
|
||||
:prop="column.key"
|
||||
:align="column.align"
|
||||
:min-width="column.minWidth"
|
||||
:sort-orders="orderSorts"
|
||||
:sortable="column.sortable"
|
||||
:show-overflow-tooltip="column.overflow"
|
||||
:width="column.width"
|
||||
>
|
||||
<template slot-scope="d">
|
||||
<template v-if="column.key === 'id'">
|
||||
{{d.row[column.key]}}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{d.row[column.key]}}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-has-permi="['bst:attachClassify:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-has-permi="['bst:attachClassify:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 使用新的弹窗组件 -->
|
||||
<attach-classify-edit-dialog
|
||||
:show.sync="dialogVisible"
|
||||
:id="row.id"
|
||||
@success="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listAttachClassify, getAttachClassify, delAttachClassify, addAttachClassify, updateAttachClassify } from "@/api/bst/attachClassify";
|
||||
import { $showColumns } from '@/utils/mixins';
|
||||
import AttachClassifyEditDialog from './components/AttachClassifyEditDialog';
|
||||
|
||||
// 默认排序字段
|
||||
const defaultSort = {
|
||||
prop: "createTime",
|
||||
order: "descending"
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "AttachClassify",
|
||||
mixins: [$showColumns],
|
||||
components: {
|
||||
AttachClassifyEditDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 字段列表
|
||||
columns: [
|
||||
{key: 'id', visible: true, label: 'id', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'parentId', visible: true, label: '上级ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'ancestors', visible: true, label: '祖级列表', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'name', visible: true, label: '名称', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'sort', visible: true, label: '排序', minWidth: null, sortable: true, overflow: false, align: 'center', width: null}
|
||||
],
|
||||
// 排序方式
|
||||
orderSorts: ['ascending', 'descending', null],
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 资源分类表格数据
|
||||
attachClassifyList: [],
|
||||
// 弹出层相关
|
||||
dialogVisible: false,
|
||||
row: {},
|
||||
defaultSort,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
orderByColumn: defaultSort.prop,
|
||||
isAsc: defaultSort.order,
|
||||
name: null
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 当排序按钮被点击时触发 **/
|
||||
onSortChange(column) {
|
||||
if (column.order == null) {
|
||||
this.queryParams.orderByColumn = defaultSort.prop;
|
||||
this.queryParams.isAsc = defaultSort.order;
|
||||
} else {
|
||||
this.queryParams.orderByColumn = column.prop;
|
||||
this.queryParams.isAsc = column.order;
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
/** 查询资源分类列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listAttachClassify(this.queryParams).then(response => {
|
||||
this.attachClassifyList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.row = {};
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.row = row;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal.confirm('是否确认删除资源分类编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delAttachClassify(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('bst/attachClassify/export', {
|
||||
...this.queryParams
|
||||
}, `attachClassify_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -29,6 +29,12 @@
|
|||
:hide-columns="['customerName']"
|
||||
:init-data="{customerId: detail.id, customerName: detail.name}" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="项目列表">
|
||||
<project
|
||||
:query="{customerId: detail.id}"
|
||||
:hide-columns="['customerName']"
|
||||
:init-data="{customerId: detail.id, customerName: detail.name}" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
|
|
@ -37,12 +43,14 @@
|
|||
<script>
|
||||
import { getCustomer } from '@/api/bst/customer'
|
||||
import CustomerFollow from '@/views/bst/customerFollow/index.vue'
|
||||
import Project from '@/views/bst/project/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'CustomerView',
|
||||
dicts: ['customer_status', 'customer_intent_level'],
|
||||
components: {
|
||||
CustomerFollow
|
||||
CustomerFollow,
|
||||
Project
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
311
src/views/bst/index/components/NoticePanel.vue
Normal file
311
src/views/bst/index/components/NoticePanel.vue
Normal file
|
|
@ -0,0 +1,311 @@
|
|||
<template>
|
||||
<el-card class="card-box notice-panel" v-loading="loading">
|
||||
<div slot="header">
|
||||
<span>公告</span>
|
||||
<el-button
|
||||
style="float: right;"
|
||||
size="mini"
|
||||
type="text"
|
||||
v-has-permi="['bst:notice:list']"
|
||||
@click="handleClickAllNotice">
|
||||
查看全部 <i class="el-icon-d-arrow-right"/>
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="notice-list">
|
||||
<div v-for="item in noticeList" :key="item.id" class="notice-item" @click="handleView(item)">
|
||||
<div class="notice-content">
|
||||
<div class="notice-main">
|
||||
<div class="notice-title-row">
|
||||
<h3 class="notice-title" :class="{ 'is-top': item.top }">{{ item.title | dv }}</h3>
|
||||
<div class="notice-badges">
|
||||
<el-tag v-if="item.top" size="mini" type="danger" class="badge-item">置顶</el-tag>
|
||||
<dict-tag :options="dict.type.notice_level" :value="item.level" size="mini" class="badge-item"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notice-meta">
|
||||
<span class="meta-item">
|
||||
<i class="el-icon-user"></i>
|
||||
{{ item.userName | dv }}
|
||||
</span>
|
||||
<span class="meta-item">
|
||||
<i class="el-icon-time"></i>
|
||||
{{ item.createTime | dv }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-if="noticeList.length === 0" description="暂无公告" />
|
||||
|
||||
<!-- 查看详情弹窗 -->
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
width="720px"
|
||||
append-to-body
|
||||
custom-class="notice-dialog"
|
||||
>
|
||||
<template #title>
|
||||
<div class="dialog-header">
|
||||
<h2 class="header-title">{{ detail.title | dv }}</h2>
|
||||
<div class="header-meta">
|
||||
<div class="meta-left">
|
||||
<el-tag v-if="detail.top" size="mini" type="danger">置顶</el-tag>
|
||||
<dict-tag :options="dict.type.notice_level" :value="detail.level" size="mini"/>
|
||||
</div>
|
||||
<div class="meta-right">
|
||||
<span class="meta-item">
|
||||
<i class="el-icon-user"></i>
|
||||
{{ detail.userName | dv }}
|
||||
</span>
|
||||
<span class="meta-item">
|
||||
<i class="el-icon-time"></i>
|
||||
{{ detail.createTime | dv }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-loading="detailLoading" class="dialog-body">
|
||||
<div class="notice-detail">{{ detail.content | dv}}</div>
|
||||
<div v-if="detail.attaches != null && detail.attaches.length > 0" class="notice-attachments">
|
||||
<div class="attachments-title">附件</div>
|
||||
<attach-list :file-list="detail.attaches" :column="4" :max-show="4" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">关闭</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listNotice, getNotice } from '@/api/bst/notice';
|
||||
import AttachList from '@/components/AttachList/index.vue';
|
||||
|
||||
export default {
|
||||
name: 'NoticeBoard',
|
||||
components: { AttachList },
|
||||
dicts: ['notice_level'],
|
||||
data() {
|
||||
return {
|
||||
noticeList: [],
|
||||
loading: false,
|
||||
dialogVisible: false,
|
||||
detailLoading: false,
|
||||
detail: {},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 5,
|
||||
orderByColumn: 'top',
|
||||
isAsc: 'desc'
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
handleClickAllNotice() {
|
||||
this.$router.push("/notice");
|
||||
},
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listNotice(this.queryParams).then(response => {
|
||||
this.noticeList = response.rows;
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleView(row) {
|
||||
this.dialogVisible = true;
|
||||
this.detailLoading = true;
|
||||
getNotice(row.id).then(res => {
|
||||
this.detail = res.data;
|
||||
}).finally(() => {
|
||||
this.detailLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.notice-panel {
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.notice-list {
|
||||
.notice-item {
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #fafafa;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.notice-content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.notice-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.notice-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.notice-title {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #2c3e50;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
&.is-top {
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-badges {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
|
||||
.badge-item {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
|
||||
i {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.notice-dialog) {
|
||||
.el-dialog__header {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-dialog.notice-dialog > .el-dialog__body) {
|
||||
padding-top: 8px !important;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
background: #fff;
|
||||
|
||||
.header-title {
|
||||
margin: 0 0 12px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.header-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
|
||||
.meta-left {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
|
||||
:deep(.el-tag) {
|
||||
border-radius: 3px;
|
||||
padding: 0 6px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.meta-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
i {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
|
||||
.notice-detail {
|
||||
margin-top: -16px;
|
||||
line-height: 1.7;
|
||||
color: #2c3e50;
|
||||
font-size: 14px;
|
||||
background: #f8f9fa;
|
||||
padding: 16px 20px;
|
||||
border-radius: 6px;
|
||||
min-height: 100px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.notice-attachments {
|
||||
margin-top: 16px;
|
||||
|
||||
.attachments-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 12px;
|
||||
padding-left: 10px;
|
||||
border-left: 2px solid #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<el-card class="project-list" v-loading="loading">
|
||||
|
||||
<div slot="header">
|
||||
<span>项目列表</span>
|
||||
<el-button
|
||||
|
|
@ -67,6 +66,8 @@ export default {
|
|||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
orderByColumn: 'createTime',
|
||||
isAsc: 'desc'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -14,10 +14,7 @@
|
|||
<el-card class="card-box">
|
||||
<month-project-chart height="180px" bar-width="50%"/>
|
||||
</el-card>
|
||||
<el-card class="card-box" header="公告">
|
||||
开发中...
|
||||
<!-- <notice-board/> -->
|
||||
</el-card>
|
||||
<notice-panel/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
|
@ -25,14 +22,14 @@
|
|||
|
||||
<script>
|
||||
import PanelGroup from '@/views/dashboard/PanelGroup.vue';
|
||||
import NoticeBoard from '@/views/dashboard/NoticeBoard.vue';
|
||||
import NoticePanel from '@/views/bst/index/components/NoticePanel.vue';
|
||||
import MonthProjectChart from '@/views/dashboard/MonthProjectChart.vue';
|
||||
import ProjectRateChart from '@/views/dashboard/ProjectRateChart.vue';
|
||||
import ProjectListPanel from './components/ProjectListPanel.vue';
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: { PanelGroup, NoticeBoard, MonthProjectChart, ProjectRateChart, ProjectListPanel },
|
||||
components: { PanelGroup, NoticePanel, MonthProjectChart, ProjectRateChart, ProjectListPanel },
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -100,10 +100,10 @@
|
|||
<boolean-tag :value="d.row[column.key]"/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'receiveUserIds'">
|
||||
<avatar-list :list="d.row.receiveUserList"/>
|
||||
<avatar-list :list="d.row.receiveUserList" :char-index="-1" :max-count="5"/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'receiveDeptIds'">
|
||||
<avatar-list :list="d.row.receiveDeptList" show-prop="deptName" id-prop="deptId"/>
|
||||
<avatar-list :list="d.row.receiveDeptList" show-prop="deptName" id-prop="deptId" :max-count="5"/>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{d.row[column.key]}}
|
||||
|
|
@ -157,7 +157,7 @@ import AvatarList from '@/components/AvatarList/index.vue';
|
|||
|
||||
// 默认排序字段
|
||||
const defaultSort = {
|
||||
prop: "createTime",
|
||||
prop: "top",
|
||||
order: "descending"
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -128,6 +128,10 @@
|
|||
<template v-else-if="column.key === 'customerName'">
|
||||
<customer-link :id="d.row.customerId" :text="d.row.customerName"/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'expectedCompleteDate'">
|
||||
{{d.row.expectedCompleteDate | dv}}
|
||||
<boolean-tag :value="!d.row.devOverdue" true-text="正常" false-text="超期" size="mini" />
|
||||
</template>
|
||||
<template v-else>
|
||||
{{d.row[column.key]}}
|
||||
</template>
|
||||
|
|
@ -240,6 +244,7 @@ import ProjectMaintenanceDialog from '@/views/bst/project/components/ProjectMain
|
|||
import TaskEditDialog from '@/views/bst/task/components/TaskEditDialog.vue';
|
||||
import ProjectLink from '@/components/Business/Project/ProjectLink.vue';
|
||||
import CustomerLink from '@/components/Business/Customer/CustomerLink.vue';
|
||||
import BooleanTag from '@/components/BooleanTag/index.vue';
|
||||
|
||||
// 默认排序字段
|
||||
const defaultSort = {
|
||||
|
|
@ -257,7 +262,18 @@ export default {
|
|||
ProjectMaintenanceDialog,
|
||||
TaskEditDialog,
|
||||
ProjectLink,
|
||||
CustomerLink
|
||||
CustomerLink,
|
||||
BooleanTag
|
||||
},
|
||||
props: {
|
||||
query: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
initData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -276,8 +292,8 @@ export default {
|
|||
{key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'customerName', visible: true, label: '客户', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'expireTime', visible: true, label: '到期时间', minWidth: null, sortable: false, overflow: false, align: 'center', width: "100"},
|
||||
{key: 'expectedCompleteDate', visible: true, label: '开发时间', minWidth: null, sortable: false, overflow: false, align: 'center', width: "100"},
|
||||
{key: 'maintenanceEndDate', visible: true, label: '运维时间', minWidth: null, sortable: false, overflow: false, align: 'center', width: "100"},
|
||||
{key: 'expectedCompleteDate', visible: true, label: '预计开发', minWidth: null, sortable: false, overflow: false, align: 'center', width: "100"},
|
||||
{key: 'maintenanceEndDate', visible: true, label: '运维结束', minWidth: null, sortable: false, overflow: false, align: 'center', width: "100"},
|
||||
{key: 'ownerName', visible: true, label: '负责人', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'followName', visible: true, label: '跟进人', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'amount', visible: true, label: '项目金额', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
|
|
@ -324,6 +340,13 @@ export default {
|
|||
this.getList();
|
||||
},
|
||||
created() {
|
||||
this.initColumns();
|
||||
|
||||
this.queryParams = {
|
||||
...this.queryParams,
|
||||
...this.query
|
||||
}
|
||||
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -411,7 +434,7 @@ export default {
|
|||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.$router.push({ path: '/edit/project' });
|
||||
this.$router.push({ path: '/edit/project', query: this.initData });
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@
|
|||
<el-descriptions-item label="负责人">{{ detail.ownerName | dv}}</el-descriptions-item>
|
||||
<el-descriptions-item label="跟进人">{{ detail.followName | dv}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<avatar-list :list="detail.memberList" :size="32" />
|
||||
<avatar-list :list="detail.memberList" :size="32" :char-index="-1"/>
|
||||
</el-card>
|
||||
<!-- 附件信息 -->
|
||||
<el-card class="box-card" header="附件">
|
||||
|
|
|
|||
|
|
@ -1,169 +0,0 @@
|
|||
<template>
|
||||
<div v-loading="loading">
|
||||
<div class="notice-list">
|
||||
<div v-for="item in noticeList" :key="item.id" class="notice-item" @click="handleView(item)">
|
||||
<div class="notice-content">
|
||||
<div class="notice-title">
|
||||
<el-tag v-if="item.top" size="mini" type="danger">置顶</el-tag>
|
||||
<dict-tag :options="dict.type.notice_level" :value="item.level" size="mini"/>
|
||||
<span class="title-text" :class="{ 'is-top': item.top }">{{ item.title | dv }}</span>
|
||||
</div>
|
||||
<div class="notice-info">
|
||||
<span class="info-item">{{ item.userName | dv }}</span>
|
||||
<span class="info-item">{{ item.createTime | dv }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-if="noticeList.length === 0" description="暂无公告" />
|
||||
|
||||
<!-- 查看详情弹窗 -->
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
width="600px"
|
||||
append-to-body
|
||||
>
|
||||
<template #title>
|
||||
<div class="detail-header">
|
||||
<div class="detail-meta">
|
||||
<el-tag v-if="detail.top" size="mini" type="danger">置顶</el-tag>
|
||||
<dict-tag :options="dict.type.notice_level" :value="detail.level" size="mini"/>
|
||||
<span>{{ detail.title | dv }}</span>
|
||||
</div>
|
||||
<div class="detail-meta">
|
||||
<span>{{ detail.userName | dv }}</span>
|
||||
<span>{{ detail.createTime | dv }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-loading="detailLoading">
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="公告内容">
|
||||
<div class="detail-content">{{ detail.content | dv}}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="附件" v-if="detail.attaches != null && detail.attaches.length > 0">
|
||||
<attach-list :file-list="detail.attaches" :column="4" :max-show="4" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listNotice, getNotice } from '@/api/bst/notice';
|
||||
import { parseTime } from '@/utils';
|
||||
import AttachList from '@/components/AttachList/index.vue';
|
||||
|
||||
export default {
|
||||
name: 'NoticeBoard',
|
||||
components: { AttachList },
|
||||
dicts: ['notice_level'],
|
||||
data() {
|
||||
return {
|
||||
noticeList: [],
|
||||
loading: false,
|
||||
dialogVisible: false,
|
||||
detailLoading: false,
|
||||
detail: {},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 5,
|
||||
orderByColumn: 'top',
|
||||
isAsc: 'desc'
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
parseTime,
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listNotice(this.queryParams).then(response => {
|
||||
this.noticeList = response.rows;
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleView(row) {
|
||||
this.dialogVisible = true;
|
||||
this.detailLoading = true;
|
||||
getNotice(row.id).then(res => {
|
||||
this.detail = res.data;
|
||||
}).finally(() => {
|
||||
this.detailLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.notice-list {
|
||||
.notice-item {
|
||||
padding: 8px 0;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #F5F7FA;
|
||||
}
|
||||
|
||||
.notice-content {
|
||||
.notice-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
.title-text {
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&.is-top {
|
||||
color: #F56C6C;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.info-item {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
|
||||
.detail-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.detail-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user