Commit 254df117 authored by “yiyousong”'s avatar “yiyousong”

perf: 优化页面组件

parent e77312e7
#门户
VUE_APP_API_portal_URL=http://192.168.0.98:11072
# 系统名称
VUE_APP_sysName = '数字化样表系统'
#开发环境
NODE_ENV = "development"
VUE_APP_API_BASE_URL=http://192.168.0.98:11078
#图片地址拼接
VUE_APP_API_IMG_URL=http://192.168.0.98:11078/
\ No newline at end of file
......@@ -4,5 +4,4 @@ VUE_APP_API_BASE_URL=/basics_api
#门户
VUE_APP_API_portal_URL=/portal_home
#图片地址拼接
VUE_APP_API_IMG_URL=
......@@ -353,21 +353,21 @@
.auto-scroll{
overflow-y: auto;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
overflow-y: auto;
}
// ::-webkit-scrollbar {
// width: 6px;
// height: 6px;
// overflow-y: auto;
// }
::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: rgba(144, 147, 153, 0.5);
}
// ::-webkit-scrollbar-thumb {
// border-radius: 6px;
// background-color: rgba(144, 147, 153, 0.5);
// }
::-webkit-scrollbar-track {
border-radius: 6px;
background: rbga(0, 0, 0, 0);
}
// ::-webkit-scrollbar-track {
// border-radius: 6px;
// background: rbga(0, 0, 0, 0);
// }
.autoWidth {
min-width: 120px;
......
<template>
<div class="tab-header">
<i v-if="icon" :class="['mr5', 'primary', icon]"></i>
<span class="label">{{ label }}</span>
</div>
</template>
<script>
export default {
name: "TabHeader",
props: {
icon: {
type: String,
default: "",
},
label: {
type: String,
default: "",
},
},
};
</script>
<style lang="less" scoped>
.tab-header {
display: flex;
align-items: center;
width: 100%;
height: 40px;
padding: 0px 15px;
font-size: 14px;
position: relative;
cursor: default;
&::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #e4e7ed;
z-index: 1;
}
.label {
font-weight: bold;
color: rgba(0, 0, 0, 0.65);
}
}
</style>
<template>
<el-date-picker
:value="value"
type="daterange"
:value-format="valueFormat"
unlink-panels
:picker-options="pickerOptions"
:clearable="Clearable"
v-bind="$attrs"
@input="handleChange"
v-on="$listeners"
>
</el-date-picker>
</template>
<script>
export default {
name: "YDatePicker",
model: {
event: "change",
prop: "value",
},
props: {
value: {
type: Array,
default: () => {
return [];
},
},
clearable: {
type: Boolean,
default: false,
},
valueFormat: {
type: String,
default: "yyyy-MM-dd",
},
},
data() {
return {
pickerOptions: {
shortcuts: [
{
text: "今天",
onClick(picker) {
const end = new Date();
const start = new Date();
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
},
],
},
};
},
computed: {
Clearable() {
return !!this.clearable;
},
},
methods: {
handleChange(val) {
this.$emit("change", val);
},
},
};
</script>
<style lang="less" scoped></style>
<template>
<div class="pagination" v-if="total">
<el-pagination
:background="background"
:layout="layout"
:pager-count="5"
:total="total"
:current-page="current"
:page-size="PageSize"
:page-sizes="pageSizes"
v-bind="$attrs"
@current-change="changePagination"
@size-change="changeSize"
v-on="$listeners"
>
</el-pagination>
</div>
</template>
<script>
import { pageSizeOptions } from "@/config";
export default {
name: "YPagination",
props: {
total: {
required: true,
type: Number,
default: 0,
},
pageSize: {
required: true,
type: Number,
default: 10,
},
page: {
required: true,
type: Number,
default: 1,
},
layout: {
type: String,
default: "total,prev,pager,next,sizes,jumper",
},
pageSizes: {
type: Array,
default: () => pageSizeOptions,
},
background: {
type: Boolean,
default: true,
},
},
data() {
return {};
},
computed: {
PageSize: {
get() {
return this.pageSize;
},
set(value) {
this.$emit("update:pageSize", value);
},
},
current: {
get() {
return this.page;
},
set(value) {
this.$emit("update:page", value);
},
},
},
methods: {
changePagination(cur) {
this.current = cur;
if (this.$listeners.change) {
this.$listeners.change();
}
this.$emit("currentChange", cur);
},
changeSize(size) {
this.PageSize = size;
if (this.$listeners.change) {
this.$listeners.change();
}
this.$emit("sizeChange", size);
},
},
};
</script>
<style lang="less" scoped></style>
<template>
<div>
<el-switch
:value="value"
class="y-switch"
:active-value="activeValue"
:inactive-value="inactiveValue"
v-bind="$attrs"
v-on="$listeners"
>
</el-switch>
</div>
</template>
<script>
export default {
name: "YSwitch",
model: {
prop: "value",
event: "change",
},
props: {
value: {
default: 0,
},
activeValue: {
default: 1,
},
inactiveValue: {
default: 0,
},
},
methods: {},
};
</script>
<style lang="less" scoped>
:deep(.el-switch) {
.el-switch__label {
position: absolute;
display: none;
color: #fff;
}
.el-switch__label--right {
z-index: 1;
left: 0px; /*不同场景下可能不同,自行调整*/
}
.el-switch__label--left {
z-index: 1;
right: 0px; /*不同场景下可能不同,自行调整*/
}
.el-switch__label.is-active {
display: block;
}
.el-switch__core,
.el-switch .el-switch__label {
width: 60px !important; /*开关按钮的宽度大小*/
}
}
</style>
<template>
<div class="y-table">
<el-table
ref="MyTable"
v-loading="loading"
:data="data"
style="width: 100%"
:size="size"
:row-key="rowkey"
v-bind="$attrs"
v-on="$listeners"
>
<template v-for="(v, i) in column">
<el-table-column
v-if="!v.slot"
:key="i"
:reserve-selection="v.reserveSelection"
:prop="v.prop"
:type="v.type"
:index="v.index"
:label="v.label"
:width="v.width"
:align="v.align"
:fixed="v.fixed"
:formatter="v.formatter"
:min-width="v.minWidth"
:show-overflow-tooltip="v.showOverflowTooltip"
>
</el-table-column>
<el-table-column
v-else
:key="'a' + i"
:reserve-selection="v.reserveSelection"
:prop="v.prop"
:type="v.type"
:index="v.index"
:label="v.label"
:width="v.width"
:align="v.align"
:fixed="v.fixed"
:formatter="v.formatter"
:min-width="v.minWidth"
:show-overflow-tooltip="v.showOverflowTooltip"
>
<template slot-scope="scope">
<slot :name="v.prop" v-bind="scope"></slot>
</template>
</el-table-column>
</template>
</el-table>
</div>
</template>
<script>
export default {
name: "YTable",
props: {
loading: {
type: Boolean,
default: false,
},
size: {
type: String,
default: "",
},
data: {
type: Array,
default: () => [],
},
column: {
type: Array,
default: () => [],
},
rowkey: {
type: [String, Function],
default: "id",
},
},
data() {
return {};
},
watch: {
data: {
handler() {
this.$nextTick(() => {
this.$refs.MyTable.bodyWrapper.scrollTop = 0;
this.$refs.MyTable.bodyWrapper.scrollLeft = 0;
});
},
immediate: true,
deep: true,
},
},
computed: {},
created() {},
methods: {
clearSelection() {
this.$refs.MyTable.clearSelection();
},
toggleAllSelection() {
this.$refs.MyTable.toggleAllSelection();
},
clearSort() {
this.$refs.MyTable.clearSort();
},
doLayout() {
this.$refs.MyTable.doLayout();
},
clearFilter() {
this.$refs.MyTable.clearFilter(...arguments);
},
sort() {
this.$refs.MyTable.sort(...arguments);
},
toggleRowExpansion() {
this.$refs.MyTable.toggleRowExpansion(...arguments);
},
setCurrentRow() {
this.$refs.MyTable.setCurrentRow(...arguments);
},
toggleRowSelection() {
this.$refs.MyTable.toggleRowSelection(...arguments);
},
},
};
</script>
<style lang="less" scoped>
.y-table {
width: 100%;
height: 100%;
}
</style>
<template>
<div>
<el-upload
v-if="listType === 'picture' || listType === 'text'"
ref="upload"
:headers="Headers"
:name="name"
:list-type="listType"
:action="action"
:multiple="multiple"
:accept="accept"
:limit="limit"
:file-list="FileList"
v-bind="$attrs"
v-on="$listeners"
:before-upload="beforeUpload"
:on-preview="handlePreview"
:on-success="handleSuccess"
:on-remove="handleRemove"
:on-exceed="handleExceed"
>
<slot>
<el-button size="small" type="primary">点击上传</el-button>
</slot>
</el-upload>
<el-upload
v-else
ref="upload"
:headers="Headers"
:name="name"
:list-type="listType"
:action="action"
:multiple="multiple"
:accept="accept"
:limit="limit"
:file-list="FileList"
v-bind="$attrs"
v-on="$listeners"
:before-upload="beforeUpload"
:on-preview="handlePreview"
:on-success="handleSuccess"
:on-remove="handleRemove"
:on-exceed="handleExceed"
>
<slot>
<i class="el-icon-plus"></i>
</slot>
</el-upload>
<!-- 图片查看 -->
<el-image-viewer
v-if="preview"
:appendToBody="false"
:on-close="closePreview"
:url-list="filepaths"
/>
<!-- 视频\音频预览 -->
<div class="preview-box" v-if="show">
<video
v-if="previewData.type === 'video'"
class="h-[400px]"
:src="previewData.url"
autoplay
muted
controls
></video>
<audio
v-else-if="previewData.type === 'audio'"
:src="previewData.url"
autoplay
controls
></audio>
<i class="el-icon-circle-close" @click="show = false"></i>
</div>
</div>
</template>
<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import { mapGetters } from "vuex";
export default {
name: "YUpload",
model: {
prop: "value",
event: "success",
},
components: {
ElImageViewer,
},
props: {
name: {
type: String,
default: "file",
},
listType: {
type: String,
default: "text",
},
fileList: {
type: Array,
default: () => [],
},
multiple: {
type: Boolean,
default: false,
},
value: {
required: true,
type: [String, Array],
default: "",
},
headers: {
type: Object,
default: () => {},
},
// 文件限制
accept: {
type: String,
default: "",
},
// 上传数量
limit: {
type: Number,
validator: (value) => {
return value >= 0;
},
default: 1, // 0为不限制
},
// 上传文件大小限制mb 0为不限制
maxSize: {
type: Number,
validator: (value) => {
return value >= 0;
},
default: 10,
},
action: {
type: String,
default: "/fm/file/commonupload",
},
},
data() {
return {
FileList: [],
imageType: ["png", "jpg", "jpeg", "gif", "svg"],
videoType: ["mp4", "avi", "wmv", "rmvb", "flv", "mkv"],
audioType: [
"mp3",
"wav",
"amr",
"aac",
"ogg",
"wma",
"flac",
"ape",
"mid",
"m4a",
"m4r",
"m4p",
"m4b",
],
// 图片预览
filepaths: [],
preview: false,
previewData: {
type: "",
url: "",
},
show: false,
};
},
watch: {
fileList: {
handler(newValue) {
this.initFileList(newValue);
},
deep: true,
immediate: true,
},
},
computed: {
...mapGetters(["token"]),
Headers() {
let form = {
Authorization: this.token,
};
return {
...form,
...this.headers,
};
},
},
created() {},
methods: {
// 初始化文件列表
initFileList(fileList) {
this.FileList = fileList.map((v) => {
return {
uid: v.url,
name: v.name,
url: v.url,
status: "success",
};
});
},
// 上传成功
handleSuccess(response, file, fileList) {
if (this.limit) {
fileList = fileList.slice(-this.limit);
}
// this.FileList = [...fileList];
if (file.status == "success") {
if (file.response && file.response.code === -1) {
let msg = file.response.msg || "上传失败";
this.$message.error(msg);
fileList = fileList.filter((file) => file.response.code !== -1);
}
fileList = fileList.map((v) => {
if (v.response) {
v.url = v.response.url;
}
return v;
});
let value;
if (Array.isArray(this.value)) {
value = fileList.map((v) => v.url);
} else {
value = fileList.map((v) => v.url).join(",");
}
this.$emit("success", value);
this.$emit("change", { file, fileList });
}
},
// 删除文件
handleRemove(file, fileList) {
let value;
if (Array.isArray(this.value)) {
value = fileList.map((v) => v.url);
} else {
value = fileList.map((v) => v.url).join(",");
}
this.$emit("success", value);
this.$emit("change", { file, fileList });
},
// 上传之前
beforeUpload(file) {
let isType = true;
let isExceed = true;
return new Promise((resolve, reject) => {
if (this.accept) {
const fileType = this.accept.split(","); // 限制文件类型
let index = file.name.lastIndexOf(".");
let type = file.name.slice(index);
isType = fileType.includes(type);
}
if (!isType) {
let msg = this.accept.replaceAll(",", "或者");
this.$message.error(`请上传${msg}文件!`);
}
if (this.maxSize) {
isExceed = file.size / 1024 / 1024 <= this.maxSize;
}
if (!isExceed) {
this.$message.error(`文件大小不能超过${this.maxSize}MB!`);
}
if (isType && isExceed) {
resolve(file);
} else {
reject();
}
});
},
// 预览
handlePreview(file) {
let { url } = file;
if (!url) return;
let index = url.lastIndexOf(".");
let type = url.slice(index + 1);
if (this.imageType.includes(type)) {
this.filepaths = [url];
this.preview = true;
} else if (this.videoType.includes(type)) {
this.previewData.type = "video";
this.previewData.url = url;
this.show = true;
} else if (this.audioType.includes(type)) {
this.previewData.type = "audio";
this.previewData.url = url;
this.show = true;
} else {
let a = document.createElement("a");
a.href = url;
a.download = file.name;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
},
// 超出上传数量提示
handleExceed() {
this.$message.warning(
`文件数量超出限制,当前限制为 ${this.limit} 个文件`
);
},
closePreview() {
this.preview = false;
this.filepaths = [];
},
clearFiles() {
this.$refs.upload.clearFiles();
},
abort() {
this.$refs.upload.abort(...arguments);
},
submit() {
this.$refs.upload.submit();
},
},
beforeDestroy() {
this.$refs.upload.clearFiles();
},
};
</script>
<style lang="less" scoped>
.preview-box {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: 999;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
.el-icon-circle-close {
font-size: 40px;
color: #fff;
cursor: pointer;
}
}
</style>
let customComponents = {
install: function (Vue) {
//在use的时候vue会自动调用此方法
const files = require.context("@/components/autoRegister", true, /\.vue$/); //返回的是一个函数
// require.context()的参数
// 参数一 {String}:读取文件的目录路径
// 参数二 {Boolean}:是否深入遍历,即是否遍历子目录(二级目录)
// 参数三 {RegExp}:匹配目录内文件的正则表达式/\.vue$/表示匹配所有.vue后缀名的文件
files.keys().forEach((item) => {
const componentConfig = files(item);
const name =
componentConfig.default.name ||
item
.split("/")
.pop()
.replace(/\.\w+$/, "");
const component = componentConfig.default || componentConfig;
Vue.component(name, component); //注册当前组件
});
},
};
export default customComponents;
export const pageSizeOptions = [10, 30, 50, 100, 200]; // 翻页-每页显示数量
export const systemName = "智慧数字化样表服务系统"; // 系统名称
// 服务器请求错误状态码
export const responseErr = {
400: "请求参数错误",
403: "禁止访问",
404: "请求错误,未找到该资源",
405: "请求方法未允许",
408: "请求超时",
500: "服务器内部错误",
501: "服务未实现",
502: "网关错误",
503: "服务不可用",
504: "网关超时",
505: "http版本不支持该请求",
};
// 登录失效状态码
export const loginErr = [401, 201, 9001, 9002];
......@@ -24,6 +24,10 @@ Vue.prototype.$message = message;
import { resetForm } from "@/utils";
Vue.prototype.resetForm = resetForm;
// 注册全局组件
import customComponents from "@/components";
Vue.use(customComponents);
// 表格生成
import plugins from "./components/formDes/index";
Vue.use(plugins);
......
......@@ -9,7 +9,7 @@
>
<el-form
ref="form"
size="small"
size="medium"
:model="form"
:rules="rules"
label-width="80px"
......@@ -164,8 +164,8 @@
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="handleReset">重 置</el-button>
<el-button size="small" type="primary" @click="handleOk"
<el-button size="medium" @click="handleReset">重 置</el-button>
<el-button size="medium" type="primary" @click="handleOk"
>确 定</el-button
>
</span>
......
......@@ -106,9 +106,10 @@
<!-- 表格 -->
<div class="table-content">
<div @click.stop>
<el-table
<y-table
ref="curTable"
v-loading="loading"
:column="columns"
:loading="loading"
:data="tableData"
size="small"
tooltip-effect="dark"
......@@ -118,64 +119,27 @@
:row-key="(row) => row.id"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
reserve-selection
width="40"
align="center"
>
</el-table-column>
<el-table-column
type="index"
label="序号"
width="50"
align="center"
:index="(index) => (current - 1) * size + index + 1"
>
</el-table-column>
<el-table-column
prop="name"
show-overflow-tooltip
label="事项名称"
>
<template slot-scope="scope">
<p class="short">{{ scope.row.matterName }}</p>
<p class="full-name">
事项全称:{{ scope.row.matterFullName }}
</p>
</template>
</el-table-column>
<el-table-column
label="部门"
align="center"
width="180"
prop="deptName"
>
</el-table-column>
<el-table-column
prop="datumCount"
label="材料数量"
align="center"
width="80"
>
</el-table-column>
<el-table-column align="center" label="操作" width="80">
<template slot-scope="scope">
<span class="primary pointer" @click="handleJoin(scope.row)"
>选择</span
>
</template>
</el-table-column>
</el-table>
<template slot="matterName" slot-scope="scope">
<p class="short">{{ scope.row.matterName }}</p>
<p class="full-name">
事项全称:{{ scope.row.matterFullName }}
</p>
</template>
<template slot="action" slot-scope="scope">
<span class="primary pointer" @click="handleJoin(scope.row)"
>选择</span
>
</template>
</y-table>
</div>
</div>
<Pagination
<y-pagination
:total="total"
:current="current"
:size="size"
@currentChange="changePagination"
@sizeChange="changeSize"
></Pagination>
:page.sync="page"
:pageSize.sync="size"
@change="getSampleformMatterList"
></y-pagination>
</div>
</div>
<div class="footer">
......@@ -191,7 +155,6 @@
<script>
import { mapGetters } from "vuex";
import TableHeader from "@/components/TableHeader.vue";
import Pagination from "@/components/Pagination.vue";
import { getSampleformMatterList } from "@/api/matter";
import {
getDeviceMatterList,
......@@ -203,7 +166,6 @@ import local from "@/utils/local";
export default {
components: {
TableHeader,
Pagination,
},
props: {
matterDrawer: {
......@@ -220,7 +182,7 @@ export default {
: "",
department: "",
searchVal: "",
current: 1,
page: 1,
size: 10,
total: 0,
tableData: [],
......@@ -228,6 +190,52 @@ export default {
selectionKeys: [],
devInfo: {},
devMatterIdList: [],
columns: [
{
label: "全选",
type: "selection",
width: "55",
align: "center",
reserveSelection: true,
},
{
label: "序号",
type: "index",
width: "55",
align: "center",
index: (index) => {
return (this.page - 1) * this.size + index + 1;
},
},
{
label: "事项名称",
slot: true,
prop: "matterName",
showOverflowTooltip: true,
},
{
label: "所属部门",
prop: "deptName",
align: "center",
showOverflowTooltip: true,
width: "180",
},
{
label: "材料数量",
prop: "datumCount",
align: "center",
width: "80",
},
{
label: "操作",
slot: true,
prop: "action",
align: "center",
width: "80",
},
],
};
},
computed: {
......@@ -277,7 +285,7 @@ export default {
async getSampleformMatterList() {
this.loading = true;
let res = await getSampleformMatterList({
page: this.current,
page: this.page,
size: this.size,
matterFullName: `%${this.searchVal}%`,
deptCode: this.department,
......@@ -289,12 +297,11 @@ export default {
let { data, total } = res.data.data;
this.tableData = data;
this.total = total;
this.$refs.curTable.bodyWrapper.scrollTop = 0;
}
},
// 搜索
handleSearch() {
this.current = 1;
this.page = 1;
this.$refs.curTable.clearSelection();
this.getSampleformMatterList();
},
......@@ -302,20 +309,11 @@ export default {
handleReset() {
this.department = "";
this.searchVal = "";
this.current = 1;
this.page = 1;
this.$refs.curTable.clearSelection();
this.getSampleformMatterList();
},
// 翻页
changePagination(cur) {
this.current = cur;
this.getSampleformMatterList();
},
// 改变每页显示数量
changeSize(size) {
this.size = size;
this.getSampleformMatterList();
},
// 表格批量选中
handleSelectionChange(select) {
this.selectionKeys = select;
......@@ -396,7 +394,7 @@ export default {
this.$refs.curTable.clearSelection();
this.department = "";
this.searchVal = "";
this.current = 1;
this.page = 1;
this.size = 10;
this.drawer = false;
},
......
......@@ -48,13 +48,14 @@ import { getdeptList } from "@/api/department";
import { mapMutations, mapState } from "vuex";
import local from "@/utils/local";
import { findBottomSubarrays } from "@/utils";
import { systemName } from "@/config";
export default {
components: {
Header,
},
data() {
return {
systemName: process.env.VUE_APP_sysName,
systemName,
portalUrl: process.env.VUE_APP_API_portal_URL,
breads: [],
subMenus: [],
......@@ -150,4 +151,4 @@ export default {
overflow-y: auto;
}
}
</style>
\ No newline at end of file
</style>
......@@ -3,7 +3,7 @@
<div class="left flex aic">
<img
class="pointer mr10 logo"
:src="sysLogo ? api + sysLogo : require('@/assets/img/logo.png')"
:src="sysLogo ? sysLogo : require('@/assets/img/logo.png')"
alt="LOGO"
@click="handleGoHome"
/>
......@@ -54,7 +54,7 @@
<!-- 返回门户 -->
<div class="back-btn">
<el-tooltip effect="dark" content="返回门户" placement="bottom">
<a class="pointer" :href="portal + (path ? path : '')">
<a class="pointer" :href="portal + (path ? path : '/')">
<i class="el-icon-s-home"></i> 返回门户
</a>
</el-tooltip>
......@@ -64,6 +64,7 @@
<script>
import HeaderSite from "./HeaderSite.vue";
import { systemName } from "@/config";
import { mapState } from "vuex";
export default {
components: {
......@@ -71,8 +72,7 @@ export default {
},
data() {
return {
systemName: process.env.VUE_APP_sysName,
api: process.env.VUE_APP_API_IMG_URL,
systemName,
portal: process.env.VUE_APP_API_portal_URL + "/#",
};
},
......@@ -186,4 +186,4 @@ export default {
background-color: #1890ff !important;
}
}
</style>
\ No newline at end of file
</style>
......@@ -55,8 +55,8 @@
</el-button>
</div>
<div class="mt50">
<el-button size="small" @click="handleReset"> </el-button>
<el-button size="small" type="primary" @click="handleOk"
<el-button size="medium" @click="handleReset"> </el-button>
<el-button size="medium" type="primary" @click="handleOk"
>
</el-button>
</div>
......
......@@ -48,70 +48,40 @@
</TableHeader>
<!-- 表格 -->
<div class="table-content">
<el-table
ref="multipleTable"
v-loading="loading"
<y-table
:max-height="650"
:data="tableData"
:column="columns"
border
:loading="loading"
tooltip-effect="dark"
style="width: 100%"
:row-key="(row) => row.id"
@selection-change="handleSelectionChange"
ref="multipleTable"
>
<el-table-column type="selection" width="55" align="center">
</el-table-column>
<el-table-column
type="index"
label="序号"
width="55"
align="center"
:index="(index) => (current - 1) * size + index + 1"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
label="部门名称"
align="center"
prop="deptName"
width="200"
>
</el-table-column>
<el-table-column prop="name" show-overflow-tooltip label="材料名称">
<template slot-scope="scope">
<p class="short">{{ scope.row.materialName }}</p>
<p class="full-name">材料全称:{{ scope.row.materiaFullName }}</p>
</template>
</el-table-column>
<el-table-column
prop="createTime"
label="添加时间"
align="center"
width="150"
>
</el-table-column>
<el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<div class="flex jca">
<span class="primary pointer" @click="handlePreview(scope.row)"
>预览</span
>
<span class="delete pointer" @click="handleDel(scope.row.id)"
>移除</span
>
</div>
</template>
</el-table-column>
</el-table>
<template slot="materialName" slot-scope="scope">
<p class="short">{{ scope.row.materialName }}</p>
<p class="full-name">材料全称:{{ scope.row.materiaFullName }}</p>
</template>
<template slot="action" slot-scope="scope">
<div class="flex jca">
<span class="primary pointer" @click="handlePreview(scope.row)"
>预览</span
>
<span class="delete pointer" @click="handleDel(scope.row.id)"
>移除</span
>
</div>
</template>
</y-table>
</div>
<Pagination
<y-pagination
:total="total"
:current="current"
:size="size"
@currentChange="changePagination"
@sizeChange="changeSize"
></Pagination>
:page.sync="page"
:pageSize.sync="size"
@change="getPbuList"
></y-pagination>
</div>
<!-- 添加材料 -->
<!-- <AddMaterals
ref="AddMaterals"
......@@ -129,31 +99,75 @@
<script>
import TableHeader from "@/components/TableHeader.vue";
import PreviewMaterals from "./modal/PreviewMaterals.vue";
import Pagination from "@/components/Pagination.vue";
import TabHeader from "@/components/TabHeader.vue";
import local from "@/utils/local";
import { getPubdatumList, delPubdatum } from "@/api/libray";
import { mapGetters } from "vuex";
export default {
components: {
TableHeader,
PreviewMaterals,
Pagination,
TabHeader,
},
data() {
return {
department: "",
searchVal: "",
tableData: [],
current: 1,
page: 1,
size: 10,
total: 10,
loading: false,
selectKeys: [],
depList: [],
columns: [
{
label: "全选",
type: "selection",
width: "55",
align: "center",
reserveSelection: true,
},
{
label: "序号",
type: "index",
width: "55",
align: "center",
index: (index) => {
return (this.page - 1) * this.size + index + 1;
},
},
{
label: "部门名称",
prop: "deptName",
align: "center",
showOverflowTooltip: true,
width: "200",
},
{
label: "材料名称",
slot: true,
prop: "materialName",
showOverflowTooltip: true,
},
{
label: "添加时间",
prop: "createTime",
align: "center",
width: "150",
},
{
label: "操作",
slot: true,
prop: "action",
align: "center",
width: "100",
},
],
libVisible: false,
materalsInfo: {},
previewVisible: false,
siteId: local.getLocal("writeSiteId"),
};
},
created() {
......@@ -167,21 +181,21 @@ export default {
async getPbuList() {
this.loading = true;
let res = await getPubdatumList({
page: this.current,
page: this.page,
size: this.size,
materiaFullName: `%${this.searchVal}%`,
deptCode: this.department,
siteId: this.siteId,
});
this.loading = false;
if (res.data.code === 1) {
let { data, total } = res.data.data;
if (!data.length && this.current > 1) {
this.current -= 1;
if (!data.length && this.page > 1) {
this.page -= 1;
this.getPbuList();
}
this.tableData = data;
this.total = total;
this.$refs.multipleTable.bodyWrapper.scrollTop = 0;
}
},
......@@ -195,13 +209,12 @@ export default {
this.$message.warning("请先勾选数据");
return;
}
let ids = this.selectKeys.map((v) => v.id).join(",");
this.handleDel(ids);
},
// 搜索
handleSearch() {
this.current = 1;
this.page = 1;
this.$refs.multipleTable.clearSelection();
this.getPbuList();
},
......@@ -209,6 +222,7 @@ export default {
handleReset() {
this.department = "";
this.searchVal = "";
this.page = 1;
this.$refs.multipleTable.clearSelection();
this.getPbuList();
},
......@@ -216,17 +230,7 @@ export default {
handleSelectionChange(select) {
this.selectKeys = select;
},
// 翻页
changePagination(cur) {
this.current = cur;
this.getPbuList();
},
// 改变没有显示数量
changeSize(size) {
this.size = size;
this.getPbuList();
},
// 预览
handlePreview(row) {
this.materalsInfo = row;
......@@ -251,7 +255,6 @@ export default {
this.$message.success(msg);
this.getPbuList();
this.$refs.multipleTable.clearSelection();
this.selectKeys = [];
}
})
.catch(() => {
......@@ -277,6 +280,7 @@ export default {
text-overflow: ellipsis;
white-space: nowrap;
}
// .table-content {
// height: 550px;
// }
......
<template>
<div>
<el-dialog title="材料预览" :visible.sync="Visible" width="50%" top="2vh">
<el-dialog
title="材料预览"
destroy-on-close
:visible.sync="Visible"
width="50%"
top="2vh"
>
<div class="main flex flexc aic">
<div class="header tac mb20">
<div class="materals-name mb10">{{ materialsInfo.materialName }}</div>
......@@ -9,7 +15,7 @@
</p>
</div>
<div class="preview-box">
<img class="sample-sheet-img" :src="api2 + materialsPreview" />
<img class="sample-sheet-img" :src="materialsPreview" />
</div>
</div>
<div slot="footer" class="tac">
......@@ -55,15 +61,13 @@ export default {
},
data() {
return {
api: process.env.VUE_APP_API_BASE_URL + "/",
api2: process.env.VUE_APP_API_IMG_URL,
loading: false,
};
},
methods: {
handlePrint(info) {
const a = document.createElement("a");
a.href = this.api2 + info.samplePath;
a.href = info.samplePath;
a.download = info.sampleName;
a.click();
},
......@@ -75,20 +79,6 @@ export default {
:deep(.el-dialog__body) {
height: 78vh;
overflow-y: auto;
&::-webkit-scrollbar {
width: 6px;
overflow-y: auto;
}
&::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: rgba(144, 147, 153, 0.5);
}
&::-webkit-scrollbar-track {
border-radius: 6px;
background: #fff;
}
}
.main {
width: 100%;
......@@ -108,4 +98,4 @@ export default {
}
}
}
</style>
\ No newline at end of file
</style>
......@@ -8,25 +8,23 @@
:close-on-click-modal="false"
>
<el-form
size="small"
size="medium"
ref="form"
:model="form"
:rules="rules"
label-width="100px"
>
<el-form-item label="所属事项">
<el-input size="small" disabled :value="form.matterName"></el-input>
<el-input disabled :value="form.matterName"></el-input>
</el-form-item>
<el-form-item label="文件夹名称" prop="categoryName">
<el-input
size="small"
v-model="form.categoryName"
placeholder="请输入文件夹名称"
></el-input>
</el-form-item>
<el-form-item label="文件夹编码" prop="categoryCode">
<el-input
size="small"
v-model="form.categoryCode"
placeholder="请输入文件夹编码"
></el-input>
......@@ -40,10 +38,10 @@
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="handleRest">重 置</el-button>
<el-button size="medium" @click="handleRest">重 置</el-button>
<el-button
:loading="loading"
size="small"
size="medium"
type="primary"
@click="handleOk"
>确 定</el-button
......
......@@ -8,7 +8,7 @@
:close-on-click-modal="false"
>
<el-form
size="small"
size="medium"
ref="form"
:model="form"
:rules="rules"
......@@ -16,23 +16,21 @@
>
<el-form-item label="材料简称" prop="materialName">
<el-input
size="small"
v-model="form.materialName"
placeholder="请输入材料简称"
></el-input>
</el-form-item>
<el-form-item label="材料全称" prop="materiaFullName">
<el-input
size="small"
v-model="form.materiaFullName"
placeholder="请输入材料全称"
></el-input>
</el-form-item>
<el-form-item label="所属事项">
<el-input disabled size="small" v-model="form.matterName"></el-input>
<el-input disabled v-model="form.matterName"></el-input>
</el-form-item>
<el-form-item label="事项编码">
<el-input disabled size="small" v-model="form.matterNo"></el-input>
<el-input disabled v-model="form.matterNo"></el-input>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
......@@ -54,27 +52,22 @@
</el-switch>
</el-form-item>
<el-form-item label="上传样表" prop="samplePath">
<el-upload
class="upload-demo"
:action="api + 'sampleform/file/commonupload'"
:on-remove="handleRemoveSamplePath"
:file-list="samplePathFileList"
:on-success="OnsuccessSamplePath"
:headers="{
Authorization: token,
}"
<YUpload
:fileList="samplePathFileList"
accept=".docx,.doc,.pdf,.png,.jpg,.jpeg"
:limit="1"
v-model="form.samplePath"
@change="handleFileName"
>
<!-- accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document" -->
<el-button size="small" type="primary">上传文件</el-button>
<!-- <span class="tips">提示:请上传.docx格式</span> -->
</el-upload>
<el-button type="primary">上传文件</el-button>
</YUpload>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="handleRest">重 置</el-button>
<el-button size="medium" @click="handleRest">重 置</el-button>
<el-button
:loading="loading"
size="small"
size="medium"
type="primary"
@click="handleOk"
>确 定</el-button
......@@ -103,7 +96,6 @@ export default {
},
data() {
return {
api: process.env.VUE_APP_API_BASE_URL + "/",
form: {
materialName: "", // 材料名称
materiaFullName: "", // 材料全名
......@@ -209,21 +201,11 @@ export default {
this.loading = false;
this.Visible = false;
},
// 上传样表
OnsuccessSamplePath(response, file, fileList) {
if (response.code == 1) {
this.samplePathFileList = fileList.slice(-1);
this.form.samplePath = response.url;
this.form.sampleName = response.fileName;
} else {
let msg = response.msg || "上传失败";
this.$message.error(msg);
}
},
// 删除样表
handleRemoveSamplePath() {
this.form.samplePath = "";
this.form.sampleName = "";
handleFileName({ fileList }) {
let fileName = fileList.length ? fileList[0].name : "";
this.form.sampleName = fileName;
this.samplePathFileList = fileList;
},
},
};
......
......@@ -4,11 +4,30 @@
:destroy-on-close="true"
title="从公共库中选择"
:visible.sync="Visible"
width="70%"
:close-on-click-modal="false"
width="50%"
>
<TableHeader>
<div slot="right" class="flex">
<el-select
v-model="department"
class="autoWidth"
size="small"
placeholder="选择部门"
filterable
>
<template slot="prefix">
{{
(deptList.find((s) => s.deptNumber === department) || {}).name
}}
</template>
<el-option
v-for="item in deptList"
:key="item.deptNumber"
:label="item.name"
:value="item.deptNumber"
>
</el-option>
</el-select>
<el-input
size="small"
style="width: 200px"
......@@ -18,69 +37,41 @@
@keyup.native.enter="handleSarch"
></el-input>
<el-button size="small" type="primary" @click="handleSarch"
>
</el-button>
<el-button size="small" @click="resetSearch"> </el-button>
></el-button
>
<el-button size="small" @click="resetSearch">重置</el-button>
</div>
</TableHeader>
<el-table
<y-table
ref="multipleTable"
v-loading="loading"
size="small"
:data="tableData"
reserve-selection
:column="columns"
:loading="loading"
border
tooltip-effect="dark"
style="width: 100%"
max-height="500px"
max-height="460px"
:row-key="(row) => row.id"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center">
</el-table-column>
<el-table-column
type="index"
label="序号"
width="55"
align="center"
:index="(index) => (current - 1) * size + index + 1"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
label="部门名称"
align="center"
prop="deptName"
width="300"
>
</el-table-column>
<el-table-column prop="name" show-overflow-tooltip label="材料名称">
<template slot-scope="scope">
<p class="short">{{ scope.row.materialName }}</p>
<p class="full-name">材料全称:{{ scope.row.materiaFullName }}</p>
</template>
</el-table-column>
<el-table-column
prop="createTime"
label="加入时间"
align="center"
width="140"
>
</el-table-column>
</el-table>
<Pagination
<template slot="materialName" slot-scope="scope">
<p class="short">{{ scope.row.materialName }}</p>
<p class="full-name">材料全称:{{ scope.row.materiaFullName }}</p>
</template>
</y-table>
<y-pagination
:total="total"
:current="current"
:size="size"
@currentChange="changePagination"
@sizeChange="changeSize"
></Pagination>
:page.sync="page"
:pageSize.sync="size"
@change="getPbuList"
></y-pagination>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="Visible = false">取 消</el-button>
<el-button size="medium" @click="handleClose"> </el-button>
<el-button
:loading="loading"
size="small"
:loading="addLoading"
size="medium"
type="primary"
@click="handleOk"
> </el-button
......@@ -92,16 +83,13 @@
<script>
import TableHeader from "@/components/TableHeader.vue";
import Pagination from "@/components/Pagination.vue";
import { getPubdatumList } from "@/api/libray";
import { addPubdatum } from "@/api/materials";
import local from "@/utils/local";
import { getPubdatumList } from "@/api/libray";
import { mapGetters } from "vuex";
import local from "@/utils/local";
export default {
components: {
TableHeader,
Pagination,
},
props: {
libVisible: {
......@@ -110,11 +98,10 @@ export default {
default: false,
},
matterId: {
required: false,
default: 0,
required: true,
default: "",
},
},
created() {},
data() {
return {
siteId: local.getLocal("sampleSiteId")
......@@ -123,12 +110,49 @@ export default {
department: "",
searchVal: "",
tableData: [],
current: 1,
total: 10,
size: 10,
selectedRowKeys: [],
loading: false,
addLoading: false,
page: 1,
total: 10,
size: 10,
columns: [
{
label: "全选",
type: "selection",
width: "55",
align: "center",
reserveSelection: true,
},
{
label: "序号",
type: "index",
width: "55",
align: "center",
index: (index) => {
return (this.page - 1) * this.size + index + 1;
},
},
{
label: "部门名称",
prop: "deptName",
align: "center",
width: "300",
showOverflowTooltip: true,
},
{
label: "材料名称",
slot: true,
prop: "materialName",
showOverflowTooltip: true,
},
{
label: "加入时间",
prop: "createTime",
align: "center",
width: "140",
},
],
};
},
computed: {
......@@ -142,13 +166,15 @@ export default {
},
...mapGetters(["deptList"]),
},
created() {},
methods: {
// 公共库材料列表
// 公共库材料
async getPbuList() {
this.loading = true;
let res = await getPubdatumList({
page: this.current,
page: this.page,
size: this.size,
deptCode: this.department,
materiaFullName: `%${this.searchVal}%`,
});
this.loading = false;
......@@ -156,7 +182,6 @@ export default {
let { data, total } = res.data.data;
this.tableData = data;
this.total = total;
this.$refs.multipleTable.bodyWrapper.scrollTop = 0;
}
},
async handleOk() {
......@@ -170,34 +195,31 @@ export default {
this.addLoading = false;
if (code === 1) {
this.$message.success(msg);
this.$refs.multipleTable.clearSelection();
this.Visible = false;
this.handleClose();
this.$emit("ok");
}
},
handleSarch() {
this.current = 1;
this.page = 1;
this.$refs.multipleTable.clearSelection();
this.getPbuList();
},
resetSearch() {
this.current = 1;
this.searchVal = "";
this.department = "";
this.page = 1;
this.$refs.multipleTable.clearSelection();
this.getPbuList();
},
changePagination(cur) {
this.current = cur;
this.getPbuList();
},
changeSize(size) {
this.size = size;
this.getPbuList();
},
handleSelectionChange(select) {
this.selectedRowKeys = select.map((i) => i.id);
// console.log(select);
},
// 关闭
handleClose() {
Object.assign(this.$data, this.$options.data());
this.$refs.multipleTable.clearSelection();
this.Visible = false;
},
},
};
......@@ -209,11 +231,10 @@ export default {
text-overflow: ellipsis;
white-space: nowrap;
}
.full-name {
color: rgb(172, 170, 170);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
\ No newline at end of file
</style>
......@@ -45,10 +45,10 @@
</div>
<el-empty v-else description="暂无文件夹"></el-empty>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="handleClose">关 闭</el-button>
<el-button size="medium" @click="handleClose">关 闭</el-button>
<el-button
:loading="loading"
size="small"
size="medium"
type="primary"
@click="handleOk"
>确 定</el-button
......
......@@ -17,7 +17,7 @@
</div>
<!-- 样表 -->
<div class="sample-sheet flex1">
<img class="sample-sheet-img" :src="api2 + materialsPreview" />
<img class="sample-sheet-img" :src="materialsPreview" />
</div>
</div>
<!-- <div class="right">-->
......@@ -57,8 +57,6 @@ export default {
},
data() {
return {
api: process.env.VUE_APP_API_BASE_URL + "/",
api2: process.env.VUE_APP_API_IMG_URL,
val: "",
};
},
......@@ -153,4 +151,4 @@ export default {
padding-bottom: 20px;
overflow-y: auto;
}
</style>
\ No newline at end of file
</style>
......@@ -7,31 +7,33 @@
@close="handleClose"
:close-on-click-modal="false"
>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form
ref="form"
size="medium"
:model="form"
:rules="rules"
label-width="80px"
>
<el-form-item label="事项简称" prop="matterName">
<el-input
size="small"
v-model="form.matterName"
placeholder="请输入事项简称"
></el-input>
</el-form-item>
<el-form-item label="事项全称" prop="matterFullName">
<el-input
size="small"
v-model="form.matterFullName"
placeholder="请输入事项全称"
></el-input>
</el-form-item>
<el-form-item label="事项编号" prop="matterNo">
<el-input
size="small"
v-model="form.matterNo"
placeholder="请输入事项编号"
></el-input>
</el-form-item>
<el-form-item label="选择部门" prop="deptCode">
<el-select
size="small"
ref="myselected"
v-model="form.deptCode"
placeholder="请选择部门"
......@@ -48,8 +50,8 @@
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="handleRest">重 置</el-button>
<el-button size="small" type="primary" @click="handleOk"
<el-button size="medium" @click="handleRest">重 置</el-button>
<el-button size="medium" type="primary" @click="handleOk"
>确 定</el-button
>
</span>
......
......@@ -26,75 +26,40 @@
</TableHeader>
<!-- 表格 -->
<div class="table-content">
<el-table
ref="multipleTable"
v-loading="loading"
<y-table
:max-height="650"
:data="tableData"
:column="columns"
border
tooltip-effect="dark"
style="width: 100%"
:row-key="(row) => row.id"
:loading="loading"
@selection-change="handleSelectionChange"
ref="multipleTable"
>
<el-table-column
reserve-selection
type="selection"
width="55"
align="center"
>
</el-table-column>
<el-table-column
type="index"
label="序号"
width="55"
align="center"
:index="(index) => (current - 1) * size + index + 1"
>
</el-table-column>
<el-table-column label="参数名称" align="center" prop="name">
</el-table-column>
<el-table-column label="一级组织" align="center" prop="firstOrganize">
</el-table-column>
<el-table-column label="二级组织" align="center" prop="secondOrganize">
</el-table-column>
<el-table-column label="参数键" align="center" prop="paramKey">
</el-table-column>
<el-table-column label="参数值" align="center" prop="paramValue">
</el-table-column>
<el-table-column label="参数有效状态" align="center" prop="validStatus">
<template slot-scope="scope">
<el-tag
size="small"
v-if="scope.row.validStatus == 1"
type="success"
>有效</el-tag
<template slot="validStatus" slot-scope="scope">
<el-tag size="small" v-if="scope.row.validStatus == 1" type="success"
>有效</el-tag
>
<el-tag size="small" v-else type="info">禁用</el-tag>
</template>
<template slot="action" slot-scope="scope">
<div class="flex jca">
<span class="primary pointer" @click="handleEdit(scope.row)"
>编辑</span
>
<span class="delete pointer" @click="handleDel(scope.row.id)"
>删除</span
>
<el-tag size="small" v-else type="info">禁用</el-tag>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark">
</el-table-column>
<el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<div class="flex jca">
<span class="primary pointer" @click="handleEdit(scope.row)"
>编辑</span
>
<span class="delete pointer" @click="handleDel(scope.row.id)"
>删除</span
>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
</y-table>
</div>
<Pagination
<y-pagination
:total="total"
:current="current"
:size="size"
@currentChange="changePagination"
@sizeChange="changeSize"
></Pagination>
:page.sync="page"
:pageSize.sync="size"
@change="getParamList"
></y-pagination>
<!-- 新增参数 -->
<AddParameter
ref="AddParameter"
......@@ -108,20 +73,18 @@
<script>
import TableHeader from "@/components/TableHeader.vue";
import Pagination from "@/components/Pagination.vue";
import AddParameter from "./modal/AddParameter.vue";
import { getParamList, delParam } from "@/api/system";
export default {
components: {
TableHeader,
AddParameter,
Pagination,
},
data() {
return {
searchVal: "",
tableData: [],
current: 1,
page: 1,
size: 10,
total: 10,
loading: false,
......@@ -129,6 +92,69 @@ export default {
addVisible: false,
title: "新增参数",
dict: {}, // 字典
columns: [
{
label: "全选",
type: "selection",
width: "55",
align: "center",
reserveSelection: true,
},
{
label: "序号",
type: "index",
width: "55",
align: "center",
index: (index) => {
return (this.page - 1) * this.size + index + 1;
},
},
{
label: "参数名称",
prop: "name",
align: "center",
},
{
label: "一级组织",
prop: "firstOrganize",
align: "center",
},
{
label: "二级组织",
prop: "secondOrganize",
align: "center",
},
{
label: "参数键",
prop: "secondOrganize",
align: "center",
},
{
label: "参数值",
prop: "paramKey",
align: "center",
},
{
label: "参数有效状态",
slot: true,
prop: "validStatus",
align: "center",
},
{
label: "备注",
prop: "remark",
align: "center",
},
{
label: "操作",
slot: true,
prop: "action",
align: "center",
width: "100",
},
],
};
},
created() {
......@@ -140,20 +166,19 @@ export default {
async getParamList() {
this.loading = true;
let res = await getParamList({
page: this.current,
page: this.page,
size: this.size,
name: `%${this.searchVal}%`,
});
if (res.data.code == 1) {
let { data, total, dict } = res.data.data;
this.dict = dict;
if (!data.length && this.current > 1) {
this.current -= 1;
if (!data.length && this.page > 1) {
this.page -= 1;
this.getParamList();
}
this.tableData = data;
this.total = total;
this.$refs.multipleTable.bodyWrapper.scrollTop = 0;
}
this.loading = false;
},
......@@ -169,14 +194,14 @@ export default {
},
// 搜索
handleSearch() {
this.current = 1;
this.page = 1;
this.$refs.multipleTable.clearSelection();
this.getParamList();
},
// 重置
handleReset() {
this.searchVal = "";
this.current = 1;
this.page = 1;
this.$refs.multipleTable.clearSelection();
this.getParamList();
},
......@@ -184,16 +209,7 @@ export default {
handleSelectionChange(select) {
this.selectKeys = select;
},
// 翻页
changePagination(cur) {
this.current = cur;
this.getParamList();
},
// 改变没有显示数量
changeSize(size) {
this.size = size;
this.getParamList();
},
// 新增
handleAdd() {
this.title = "新增参数";
......@@ -221,7 +237,6 @@ export default {
this.$message.success(msg);
this.getParamList();
this.$refs.multipleTable.clearSelection();
this.selectKeys = [];
}
})
.catch(() => {
......
......@@ -2,44 +2,43 @@
<div>
<el-dialog
:title="title"
:destroy-on-close="true"
:visible.sync="Visible"
width="30%"
@close="handleClose"
:close-on-click-modal="false"
top="10vh"
>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form
ref="form"
:model="form"
:rules="rules"
size="medium"
label-width="100px"
>
<el-form-item label="参数名称" prop="name">
<el-input
size="small"
v-model="form.name"
placeholder="请输入参数名称"
></el-input>
<el-input v-model="form.name" placeholder="请输入参数名称"></el-input>
</el-form-item>
<el-form-item label="一级组织" prop="firstOrganize">
<el-input
size="small"
v-model="form.firstOrganize"
placeholder="请输入一级组织"
></el-input>
</el-form-item>
<el-form-item label="二级组织" prop="secondOrganize">
<el-input
size="small"
v-model="form.secondOrganize"
placeholder="请输入二级组织"
></el-input>
</el-form-item>
<el-form-item label="参数键" prop="paramKey">
<el-input
size="small"
v-model="form.paramKey"
placeholder="请输入参数键"
></el-input>
</el-form-item>
<el-form-item label="参数值" prop="paramValue">
<el-input
size="small"
v-model="form.paramValue"
placeholder="请输入参数值"
></el-input>
......@@ -88,8 +87,8 @@
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="handleRest">重 置</el-button>
<el-button size="small" type="primary" @click="handleOk"
<el-button size="medium" @click="handleRest">重 置</el-button>
<el-button size="medium" type="primary" @click="handleOk"
>确 定</el-button
>
</span>
......
......@@ -18,74 +18,103 @@
</TableHeader>
<!-- 表格 -->
<div class="table-content">
<el-table
ref="multipleTable"
size="small"
v-loading="loading"
<y-table
:max-height="650"
:data="tableData"
:column="columns"
border
tooltip-effect="dark"
style="width: 100%"
:row-key="(row) => row.id"
:loading="loading"
ref="multipleTable"
>
<el-table-column
type="index"
label="序号"
width="55"
align="center"
:index="(index) => (current - 1) * size + index + 1"
>
</el-table-column>
<el-table-column label="用户名称" align="center" prop="userName">
</el-table-column>
<el-table-column label="登录名称" align="center" prop="loginName">
</el-table-column>
<el-table-column label="请求地址" align="center" prop="requestUrl">
</el-table-column>
<el-table-column label="操作内容" align="center" prop="content">
</el-table-column>
<el-table-column label="操作IP地址" align="center" prop="ip">
</el-table-column>
<el-table-column label="操作类型" align="center" prop="operType">
<template slot-scope="scope">
<span v-if="scope.row.operType == 0">新增</span>
<span v-else-if="scope.row.operType == 1">修改</span>
<span v-else-if="scope.row.operType == 2">删除</span>
</template>
</el-table-column>
<el-table-column label="操作时间" align="center" prop="logDate">
</el-table-column>
</el-table>
<template slot="operType" slot-scope="scope">
<span v-if="scope.row.operType == 0">新增</span>
<span v-else-if="scope.row.operType == 1">修改</span>
<span v-else-if="scope.row.operType == 2">删除</span>
</template>
</y-table>
</div>
<Pagination
<y-pagination
:total="total"
:current="current"
:size="size"
@currentChange="changePagination"
@sizeChange="changeSize"
></Pagination>
:page.sync="page"
:pageSize.sync="size"
@change="getlogsList"
></y-pagination>
</div>
</template>
<script>
import TableHeader from "@/components/TableHeader.vue";
import Pagination from "@/components/Pagination.vue";
import { getlogsList } from "@/api/system";
export default {
components: {
TableHeader,
Pagination,
},
data() {
return {
searchVal: "",
tableData: [],
current: 1,
page: 1,
size: 10,
total: 10,
loading: false,
selectKeys: [],
dict: {}, // 字典
columns: [
{
label: "全选",
type: "selection",
width: "55",
align: "center",
reserveSelection: true,
},
{
label: "序号",
type: "index",
width: "55",
align: "center",
index: (index) => {
return (this.page - 1) * this.size + index + 1;
},
},
{
label: "用户名称",
prop: "userName",
align: "center",
},
{
label: "登录名称",
prop: "loginName",
align: "center",
},
{
label: "请求地址",
prop: "requestUrl",
align: "center",
},
{
label: "操作内容",
slot: true,
prop: "content",
align: "center",
},
{
label: "操作IP地址",
prop: "ip",
align: "center",
},
{
label: "操作类型",
slot: true,
prop: "operType",
align: "center",
},
{
label: "操作时间",
prop: "logDate",
align: "center",
},
],
};
},
created() {
......@@ -97,48 +126,36 @@ export default {
async getlogsList() {
this.loading = true;
let res = await getlogsList({
page: this.current,
page: this.page,
size: this.size,
requestUrl: `%${this.searchVal}%`,
});
if (res.data.code == 1) {
let { data, total, dict } = res.data.data;
this.dict = dict;
if (!data.length && this.current > 1) {
this.current -= 1;
if (!data.length && this.page > 1) {
this.page -= 1;
this.getlogsList();
}
this.tableData = data;
this.total = total;
this.$refs.multipleTable.bodyWrapper.scrollTop = 0;
}
this.loading = false;
},
// 搜索
handleSearch() {
this.current = 1;
this.page = 1;
this.$refs.multipleTable.clearSelection();
this.getlogsList();
},
// 重置
handleReset() {
this.searchVal = "";
this.current = 1;
this.page = 1;
this.$refs.multipleTable.clearSelection();
this.getlogsList();
},
// 翻页
changePagination(cur) {
this.current = cur;
this.getlogsList();
},
// 改变没有显示数量
changeSize(size) {
this.size = size;
this.getlogsList();
},
},
};
</script>
......
......@@ -26,85 +26,45 @@
</TableHeader>
<!-- 表格 -->
<div class="table-content">
<el-table
ref="multipleTable"
v-loading="loading"
<y-table
:max-height="650"
:data="tableData"
:column="columns"
border
tooltip-effect="dark"
style="width: 100%"
:row-key="(row) => row.id"
:loading="loading"
@selection-change="handleSelectionChange"
ref="multipleTable"
>
<el-table-column
reserve-selection
type="selection"
width="55"
align="center"
>
</el-table-column>
<el-table-column
type="index"
label="序号"
width="55"
align="center"
:index="(index) => (current - 1) * size + index + 1"
>
</el-table-column>
<el-table-column label="任务名称" align="center" prop="name">
</el-table-column>
<el-table-column label="执行主机" align="center" prop="excuteHost">
</el-table-column>
<el-table-column label="执行关键字" align="center" prop="taskKey">
</el-table-column>
<el-table-column label="执行策略" align="center" prop="excuteStrategy">
<template slot-scope="scope">
<el-tag type="info">{{
filterItems(scope.row.excuteStrategy, dict.excuteStrategy)
}}</el-tag>
</template>
</el-table-column>
<el-table-column
label="最后执行主机"
align="center"
prop="lastExcuteHost"
>
</el-table-column>
<el-table-column
label="最后执行时间"
align="center"
prop="lastExcuteTime"
>
</el-table-column>
<el-table-column label="任务状态" align="center" prop="status">
<template slot-scope="scope">
<!-- <el-tag v-if="scope.row.status == 1" type="success">执行中</el-tag> -->
<el-tag size="small" type="info">{{
filterItems(scope.row.status, dict.status)
}}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<div class="flex jca">
<span class="primary pointer" @click="handleEdit(scope.row)"
>编辑</span
>
<span class="delete pointer" @click="handleDel(scope.row.id)"
>删除</span
>
</div>
</template>
</el-table-column>
</el-table>
<template slot="excuteStrategy" slot-scope="scope">
<el-tag size="small" type="info">{{
dict.excuteStrategy[scope.row.excuteStrategy]
}}</el-tag>
</template>
<template slot="status" slot-scope="scope">
<el-tag size="small" type="info">{{
dict.status[scope.row.status]
}}</el-tag>
</template>
<template slot="action" slot-scope="scope">
<div class="flex jca">
<span class="primary pointer" @click="handleEdit(scope.row)"
>编辑</span
>
<span class="delete pointer" @click="handleDel(scope.row.id)"
>删除</span
>
</div>
</template>
</y-table>
</div>
<Pagination
<y-pagination
:total="total"
:current="current"
:size="size"
@currentChange="changePagination"
@sizeChange="changeSize"
></Pagination>
:page="page"
:pageSize="size"
@change="getTaskList"
></y-pagination>
<!-- 新增参数 -->
<AddTask
ref="AddTask"
......@@ -118,20 +78,18 @@
<script>
import TableHeader from "@/components/TableHeader.vue";
import Pagination from "@/components/Pagination.vue";
import AddTask from "./modal/AddTask.vue";
import { getTaskList, delTask } from "@/api/system";
export default {
components: {
TableHeader,
AddTask,
Pagination,
},
data() {
return {
searchVal: "",
tableData: [],
current: 1,
page: 1,
size: 10,
total: 10,
loading: false,
......@@ -139,6 +97,71 @@ export default {
addVisible: false,
title: "新增参数",
dict: {}, // 字典
columns: [
{
label: "全选",
type: "selection",
width: "55",
align: "center",
reserveSelection: true,
},
{
label: "序号",
type: "index",
width: "55",
align: "center",
index: (index) => {
return (this.page - 1) * this.size + index + 1;
},
},
{
label: "任务名称",
prop: "name",
align: "center",
},
{
label: "执行主机",
prop: "excuteHost",
align: "center",
},
{
label: "执行关键字",
prop: "taskKey",
align: "center",
},
{
label: "执行策略",
slot: true,
prop: "excuteStrategy",
align: "center",
},
{
label: "最后执行主机",
prop: "lastExcuteHost",
align: "center",
},
{
label: "最后执行时间",
prop: "lastExcuteTime",
align: "center",
},
{
label: "任务状态",
slot: true,
prop: "status",
align: "center",
},
{
label: "操作",
slot: true,
prop: "action",
align: "center",
width: "100",
},
],
};
},
created() {
......@@ -150,20 +173,19 @@ export default {
async getTaskList() {
this.loading = true;
let res = await getTaskList({
page: this.current,
page: this.page,
size: this.size,
name: `%${this.searchVal}%`,
});
if (res.data.code == 1) {
let { data, total, dict } = res.data.data;
this.dict = dict;
if (!data.length && this.current > 1) {
this.current -= 1;
if (!data.length && this.page > 1) {
this.page -= 1;
this.getTaskList();
}
this.tableData = data;
this.total = total;
this.$refs.multipleTable.bodyWrapper.scrollTop = 0;
}
this.loading = false;
},
......@@ -179,14 +201,14 @@ export default {
},
// 搜索
handleSearch() {
this.current = 1;
this.page = 1;
this.$refs.multipleTable.clearSelection();
this.getTaskList();
},
// 重置
handleReset() {
this.searchVal = "";
this.current = 1;
this.page = 1;
this.$refs.multipleTable.clearSelection();
this.getTaskList();
},
......@@ -194,16 +216,7 @@ export default {
handleSelectionChange(select) {
this.selectKeys = select;
},
// 翻页
changePagination(cur) {
this.current = cur;
this.getTaskList();
},
// 改变没有显示数量
changeSize(size) {
this.size = size;
this.getTaskList();
},
// 新增
handleAdd() {
this.title = "新增任务";
......@@ -231,23 +244,12 @@ export default {
this.$message.success(msg);
this.getTaskList();
this.$refs.multipleTable.clearSelection();
this.selectKeys = [];
}
})
.catch(() => {
console.log("取消成功!");
});
},
// 过滤表格数据
filterItems(key, dict = {}) {
let val = "";
Object.keys(dict).forEach((keys) => {
if (key == keys) {
val = dict[keys];
}
});
return val;
},
},
};
</script>
......
......@@ -2,30 +2,31 @@
<div>
<el-dialog
:title="title"
:destroy-on-close="true"
:visible.sync="Visible"
width="30%"
@close="handleClose"
:close-on-click-modal="false"
top="10vh"
>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form
ref="form"
:model="form"
:rules="rules"
size="medium"
label-width="100px"
>
<el-form-item label="任务名称" prop="name">
<el-input
size="small"
v-model="form.name"
placeholder="请输入任务名称"
></el-input>
<el-input v-model="form.name" placeholder="请输入任务名称"></el-input>
</el-form-item>
<el-form-item label="关键字" prop="taskKey">
<el-input
size="small"
v-model="form.taskKey"
placeholder="请输入关键字"
></el-input>
</el-form-item>
<el-form-item label="执行服务" prop="excuteService">
<el-input
size="small"
v-model="form.excuteService"
placeholder="请输入执行服务"
></el-input>
......@@ -53,7 +54,6 @@
<el-input
disabled
v-if="form.excuteStrategy == 1"
size="small"
value="每日"
placeholder="请输入参数值"
></el-input>
......@@ -100,14 +100,12 @@
</el-form-item>
<el-form-item label="执行主机" prop="excuteHost">
<el-input
size="small"
v-model="form.excuteHost"
placeholder="请输入执行主机"
></el-input>
</el-form-item>
<el-form-item label="执行参数" prop="excuteParam">
<el-input
size="small"
v-model="form.excuteParam"
placeholder="请输入执行参数"
></el-input>
......@@ -123,8 +121,8 @@
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="handleRest">重 置</el-button>
<el-button size="small" type="primary" @click="handleOk"
<el-button size="medium" @click="handleRest">重 置</el-button>
<el-button size="medium" type="primary" @click="handleOk"
>确 定</el-button
>
</span>
......
......@@ -2,12 +2,13 @@
* axios 工具函数层
*/
import axios from "axios";
import { Message } from "element-ui";
import { responseErr, loginErr } from "@/config";
import { message } from "@/utils/resetMessage";
// import local from "@/utils/local";
import store from "@/store";
// import router from "@/router"
// import router from "@/router";
// 请求超时时间
// axios.defaults.timeout = 10 * 1000;
axios.defaults.timeout = 60 * 1000;
// 设置统一服务器地址
axios.defaults.baseURL = process.env.VUE_APP_API_BASE_URL;
......@@ -33,14 +34,15 @@ axios.interceptors.response.use(
// 取出数据
let { code, msg } = response.data;
if (code === -1) {
Message.error({
message.error({
message: msg,
});
} else if (code === 401) {
Message.error({
} else if (loginErr.includes(code)) {
message.error({
message: msg,
});
setTimeout(() => {
// router.push("/login");
store.commit("SET_token", "");
location.href = process.env.VUE_APP_API_portal_URL;
}, 2000);
......@@ -48,13 +50,22 @@ axios.interceptors.response.use(
}
return response;
},
(err) => {
// if (err.message.includes("timeout")) {
// Message.error({
// message: "请求超时,请稍后再试",
// });
// }
return Promise.reject(err);
(error) => {
if (error && error.response) {
let msg = responseErr[error.response.status];
error.message = msg || `连接错误${error.response.status}`;
} else {
if (JSON.stringify(error).includes("timeout")) {
error.message = "服务器响应超时,请刷新当前页";
} else {
error.message = "连接服务器失败";
}
}
message.error({
message: error.message,
});
return Promise.resolve(error.response);
}
);
......
......@@ -9,4 +9,18 @@ module.exports = defineConfig({
// 打包输出目录
outputDir: "dist",
publicPath: "./",
devServer: {
proxy: {
"/sampleform": {
target: process.env.VUE_APP_API_BASE_URL,
changeOrigin: true,
secure: false,
cookieDomainRewrite: "localhost",
},
"/file": {
target: process.env.VUE_APP_API_BASE_URL,
changeOrigin: true,
},
},
},
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment