Commit 7c632761 authored by “yiyousong”'s avatar “yiyousong”

feat: 优化站点信息工作日选择和添加上传组件

parent d9cbb94e
<template>
<div class="previe-modal" v-if="Visible" @click="Visible = false">
<div class="previe-modal" v-if="Visible">
<img @click.stop v-if="previewData.type === 'img'" :src="previewData.url" />
<video
@click.stop
......@@ -9,7 +9,11 @@
muted
controls
></video>
<img class="close-btn" src="../assets/img/c.png" alt="" />
<img
class="close-btn"
src="../assets/img/c.png"
@click.self="Visible = false"
/>
</div>
</template>
......@@ -68,4 +72,4 @@ export default {
cursor: pointer;
}
}
</style>
\ No newline at end of file
</style>
<template>
<div class="y-upload">
<a-upload
v-if="listType == 'text' || listType == 'picture'"
:name="name"
:listType="listType"
:multiple="multiple"
:action="action"
:accept="accept"
:beforeUpload="beforeUpload"
:file-list="FileList"
v-bind="$attrs"
v-on="$listeners"
@change="handleChange"
@preview="handlePreview"
>
<slot>
<a-button type="primary"> <a-icon type="upload" />点击上传</a-button>
</slot>
</a-upload>
<a-upload
v-else-if="listType == 'picture-card'"
:name="name"
:listType="listType"
:multiple="multiple"
:action="action"
:accept="accept"
:beforeUpload="beforeUpload"
:file-list="FileList"
v-bind="$attrs"
v-on="$listeners"
@change="handleChange"
@preview="handlePreview"
>
<slot>
<div>
<a-icon type="plus" />
<div class="ant-upload-text">点击上传</div>
</div>
</slot>
</a-upload>
<PrevieModal
:previewVisible.sync="previewVisible"
:previewData="previewData"
></PrevieModal>
</div>
</template>
<script>
// import { uploadFile } from "@/services/user";
import PrevieModal from "@/components/PrevieModal.vue";
export default {
model: {
prop: "value",
event: "onChange",
},
components: {
PrevieModal,
},
props: {
name: {
type: String,
default: "file",
},
listType: {
type: String,
default: "text",
},
multiple: {
type: Boolean,
default: false,
},
value: {
type: [String, Array],
default: "",
},
accept: {
type: String,
default: "",
},
// 上传数量
limit: {
type: Number,
validator: (value) => {
return value >= 0;
},
default: 0, // 0为不限制
},
// 上传文件大小限制mb
MB: {
type: Number,
default: 10,
},
action: {
type: String,
default: "/api/base/file/commonupload",
},
},
data() {
return {
FileList: [],
imageType: ["png", "jpg", "jpeg", "gif", "svg"],
videoType: ["mp4", "avi", "wmv", "rmvb", "flv", "mkv"],
previewData: {},
previewVisible: false,
};
},
watch: {
value: {
handler(newValue) {
if (newValue) {
if (Array.isArray(newValue)) {
this.FileList = newValue.map((v) => {
return {
uid: v,
name: v,
status: "done",
url: v,
};
});
} else {
this.FileList = newValue.split(",").map((v) => {
return {
uid: v,
name: v,
status: "done",
url: v,
};
});
}
} else {
this.FileList = [];
}
},
deep: true,
immediate: true,
},
},
computed: {},
created() {},
methods: {
customRequest() {
console.log(arguments);
},
handleChange({ file, fileList }) {
this.FileList = [...fileList];
if (file.status == "done" || file.status == "removed") {
if (file.response && file.response.code == -1) {
this.$message.error(file.response.msg);
fileList = fileList.filter((file) => file.response.code != -1);
}
if (this.limit) {
this.FileList = [...fileList].slice(-this.limit);
}
this.FileList = this.FileList.map((v) => {
if (v.response) {
v.url = v.response.url;
}
return v;
});
let value;
if (Array.isArray(this.value)) {
value = this.FileList.map((v) => v.url);
} else {
value = this.FileList.map((v) => v.url).join(",");
}
this.$emit("onChange", value);
this.$emit("onSuccess", { file, fileList });
}
},
beforeUpload(file) {
let isType = true;
let isExceed = true;
return new Promise((resolve) => {
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) {
this.$message.error(`请上传${this.accept}文件!`);
}
if (this.MB) {
isExceed = file.size / 1024 / 1024 <= this.MB;
}
if (!isExceed) {
this.$message.error(`文件大小不能超过${this.MB}MB!`);
}
if (isType && isExceed) {
resolve(file);
}
});
},
// 预览
handlePreview(file) {
let { url } = file;
if (!url) return;
let index = url.lastIndexOf(".");
let type = url.slice(index + 1);
if (this.imageType.includes(type)) {
this.$viewerApi({
images: [url],
});
} else if (this.videoType.includes(type)) {
this.previewData = {
type: "video",
url,
};
this.previewVisible = true;
} else {
let a = document.createElement("a");
a.href = url;
a.download = new Date().getTime() + "." + type;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
},
handleDownload(file) {
console.log(file);
},
},
};
</script>
<style lang="less" scoped>
/deep/.ant-upload-picture-card-wrapper {
display: flex;
flex-wrap: wrap;
}
</style>
......@@ -104,9 +104,8 @@
size="middle"
:scroll="{ y: 550 }"
:row-selection="{
selectedRowKeys: selectedRowKeys,
selectedRowKeys: businessIds,
onChange: onRightSelectChange,
onSelect: onSelectLeftRow,
}"
@changePagination="getBusinessListData"
>
......@@ -145,6 +144,7 @@
<script>
import addprofession from "../group/addprofession.vue";
import local from "@/utils/local";
import { uniqueObjArray } from "@/utils";
import YTable from "@/components/YTable.vue";
import {
businessList,
......@@ -225,13 +225,13 @@ export default {
// businessType: 0, // 业务类型
selectedRowKeys: [],
selectedLeftRowKeys: [],
deleteData: [], // 批量删除站点业务数据
businessData: [], // 站点业务
businessDataList: [], //业务列表数据
deleteData: "", // 批量删除数据
visible: false,
serchData: "",
siteId: local.getLocal("siteId"), // 站点id
businessIds: "", // 业务id
businessIds: [], // 业务id
serchSiteBusiness: "", // 左边站点业务名称搜索
};
},
......@@ -300,6 +300,8 @@ export default {
// 站点业务搜索
onSiteBusinessSearch() {
this.siteBusinessTable.page = 1;
this.deleteData = [];
this.selectedLeftRowKeys = [];
this.getSiteBusinessData();
},
// 删除站点业务
......@@ -343,14 +345,12 @@ export default {
// 站点业务选中
onSelectSiteBusiness(key, rows) {
this.selectedLeftRowKeys = key;
const res = new Map();
this.deleteData = [...this.deleteData, ...rows]
.filter((v) => {
return !res.has(v.id) && res.set(v.id, 1);
})
.filter((v) => {
return this.selectedLeftRowKeys.some((val) => v.id == val);
});
this.deleteData = uniqueObjArray(
[...this.deleteData, ...rows],
"id"
).filter((v) => {
return this.selectedLeftRowKeys.some((id) => v.id == id);
});
},
// 站点业务选中父默认勾选子
onSelectLeftRow(record, selected) {
......@@ -372,28 +372,26 @@ export default {
},
// 批量删除站点业务
handleBatchDelSiteBusiness() {
if (this.deleteData.length <= 0) {
if (!this.deleteData.length) {
this.$message.warning("请先勾选数据");
return;
} else {
let arr = [...this.deleteData];
arr = arr.map((v) => v.id).join(",");
this.handleDelSiteBusiness(arr, this.deleteData);
}
let arr = [...this.deleteData];
arr = arr.map((v) => v.id).join(",");
this.handleDelSiteBusiness(arr, this.deleteData);
},
// 获取批量加入id
onRightSelectChange(key, data) {
this.selectedRowKeys = key;
this.businessIds = data.map((v) => v.id).join(",");
onRightSelectChange(key) {
this.businessIds = key;
},
// 一体化业务批量加入站点
handleBatchJoin() {
if (this.businessIds) {
this.handleIn(this.businessIds);
} else {
if (!this.businessIds.length) {
this.$message.warning("请先勾选数据");
return;
}
let ids = this.businessIds.join(",");
this.handleIn(ids);
},
// 编辑站点业务
......@@ -407,6 +405,7 @@ export default {
// 搜索一体化业务
async onSearch() {
this.businessTable.page = 1;
this.businessIds = [];
this.getBusinessListData();
},
// 一体化业务加入站点
......
......@@ -67,6 +67,7 @@
size="middle"
:scroll="{ y: 550 }"
:row-selection="{
selectedRowKeys: selectedSiteMatterKeys,
onChange: onSelectSiteMatterChange,
}"
@changePagination="getMatterSiteData"
......@@ -254,6 +255,7 @@ import { getDeptList } from "@/services/dept";
import EditSiteMatter from "../group/EditSiteMatter.vue";
import YTable from "@/components/YTable.vue";
import local from "@/utils/local";
import { uniqueObjArray } from "@/utils";
import { mapMutations } from "vuex";
const sourceType = {
......@@ -443,6 +445,8 @@ export default {
// 站点事项搜索
onSearchSiteMatter() {
this.siteMatterTable.page = 1;
this.selectedSiteMatterKeys = [];
this.selectSiteMatterData = [];
this.getMatterSiteData();
},
// 左边移除站点事项
......@@ -464,7 +468,8 @@ export default {
_this.$message.success(msg);
_this.getMatterSiteData();
_this.getMatterListData();
_this.selectSiteMatterData = "";
_this.selectSiteMatterData = [];
_this.selectedSiteMatterKeys = [];
_this.deleteMatterSiteRelevance(row);
}
},
......@@ -482,18 +487,24 @@ export default {
},
});
},
onSelectSiteMatterChange(key, data) {
this.selectSiteMatterData = data;
// 勾选站点事项
onSelectSiteMatterChange(key, rows) {
this.selectedSiteMatterKeys = key;
this.selectSiteMatterData = uniqueObjArray(
[...this.selectSiteMatterData, ...rows],
"id"
).filter((v) => {
return this.selectedSiteMatterKeys.some((id) => v.id == id);
});
},
// 批量移除站点事项
handleBatchDelSiteMatter() {
if (this.selectSiteMatterData.length <= 0) {
if (!this.selectSiteMatterData.length) {
this.$message.warning("请先勾选数据");
return;
} else {
let ids = [...this.selectSiteMatterData].map((v) => v.id).join(",");
this.handleDel(ids, this.selectSiteMatterData);
}
let ids = [...this.selectSiteMatterData].map((v) => v.id).join(",");
this.handleDel(ids, this.selectSiteMatterData);
},
// 获取批量加入id
onBaseSelectChange(key) {
......@@ -511,6 +522,7 @@ export default {
// 基础事项搜索
onSearchBaseMatter() {
this.baseMatterTable.page = 1;
this.selectedBaseMatterKeys = [];
this.getMatterListData();
},
// 加入
......@@ -548,6 +560,7 @@ export default {
let { code, msg } = res.data;
if (code === 1) {
_this.$message.success(msg);
_this.selectedBaseMatterKeys = [];
_this.getMatterListData();
}
},
......
......@@ -129,7 +129,7 @@
</a-tooltip>
</template>
<!-- 操作 -->
<template slot="action" slot-scope="record">
<template slot="action" slot-scope="{ record }">
<span class="primary pointer" @click="handleIn(record)">关联</span>
</template>
</y-table>
......
......@@ -118,6 +118,11 @@
:total="siteMatterTable.total"
:loading="siteMatterTable.loading"
:scroll="{ y: 500 }"
rowKey="matterId"
:row-selection="{
selectedRowKeys: matterKeys,
onChange: handleChange,
}"
@changePagination="getSiteMatterData"
>
<!-- 序号 -->
......@@ -275,8 +280,8 @@ export default {
async getSiteMatterData() {
this.siteMatterTable.loading = true;
let res = await getSiteMatterList({
page: this.page,
size: this.matterSize,
page: this.siteMatterTable.page,
size: this.siteMatterTable.size,
siteId: this.windowInfo.siteId,
matterName: `%${this.siteMatterTable.searchForm.matterName}%`,
source: this.siteMatterTable.searchForm.source,
......@@ -319,19 +324,18 @@ export default {
// 打开新增窗口
addWindowMatter() {
this.modalTile = "新增窗口事项";
Object.assign(this.formData, this.$options.data().formData);
this.formData.id && this.$delete(this.formData, "id");
this.page = 1;
this.matterNameSearch = "";
this.siteMatterTable.page = 1;
this.siteMatterTable.searchForm.matterName = "";
this.siteMatterTable.searchForm.source = undefined;
this.getSiteMatterData();
this.visible = true;
},
// 搜索
// 窗口事项搜索
onSearch() {
this.winMatterTable.page = 1;
this.getWindowmatterData();
},
// 保存
// 保存站点事项加入窗口
async handleOk() {
if (this.matterRows.length) {
let arr = this.matterRows.map((v) => {
......@@ -364,11 +368,11 @@ export default {
this.matterKeys = [];
this.matterRows = [];
},
// 全选
onSelectChange(data) {
this.allDel = data.join(",");
// 全选窗口事项列表
onSelectChange(keys) {
this.allDel = keys.join(",");
},
// 事项选择选择
// 站点事项选择
handleChange(keys, rows) {
this.matterKeys = keys;
this.matterRows = [...new Set([...this.matterRows, ...rows])];
......@@ -383,12 +387,12 @@ export default {
this.matterRows = [];
this.visible = false;
},
// 返回
// 返回上一级
handleBack() {
this.$router.back();
},
// 删除
handleDel(num) {
// 删除窗口事项
handleDel(id) {
let _this = this;
this.$confirm({
title: "系统提示",
......@@ -400,10 +404,11 @@ export default {
icon: "exclamation-circle",
maskClosable: true,
async onOk() {
let res = await delWindowmatter({ id: num });
let res = await delWindowmatter({ id });
let { code, msg } = res.data;
if (code === 1) {
_this.$message.success(msg);
this.allDel = [];
_this.getWindowmatterData();
}
},
......@@ -412,7 +417,7 @@ export default {
},
});
},
// 批量删除
// 批量删除窗口事项
handleDelAll() {
if (this.allDel) {
this.handleDel(this.allDel);
......@@ -421,7 +426,7 @@ export default {
return;
}
},
// 编辑
// 编辑窗口事项
async handleEdit(data) {
data.isEdit = !data.isEdit;
if (!data.isEdit) {
......
......@@ -181,19 +181,12 @@
</a-col>
<a-col :span="24">
<a-form-model-item label="中心Logo" prop="logoPath">
<a-upload
:action="api + 'base/file/commonupload'"
list-type="picture-card"
:file-list="fileList"
@preview="handlePreview"
@change="handleChange"
:accept="accept"
>
<div v-if="fileList.length < 1">
<a-icon type="plus" />
<div class="ant-upload-text">上传图片</div>
</div>
</a-upload>
<YUpload
accept=".png,.jpg,.jpeg,.svg"
:limit="1"
v-model="formInfo.logoPath"
listType="picture-card"
></YUpload>
</a-form-model-item>
</a-col>
</a-row>
......@@ -236,13 +229,13 @@
</a-col>
</a-row>
<a-form-model-item label="工作日">
<y-checkbox v-model="formInfo.workday1"> 星期一 </y-checkbox>
<y-checkbox v-model="formInfo.workday2">星期二 </y-checkbox>
<y-checkbox v-model="formInfo.workday3"> 星期三 </y-checkbox>
<y-checkbox v-model="formInfo.workday4"> 星期四 </y-checkbox>
<y-checkbox v-model="formInfo.workday5"> 星期五 </y-checkbox>
<y-checkbox v-model="formInfo.workday6"> 星期六</y-checkbox>
<y-checkbox v-model="formInfo.workday7"> 星期天 </y-checkbox>
<y-checkbox
v-model="formInfo[key]"
v-for="(v, key) in workday"
:key="key"
>
{{ v }}
</y-checkbox>
</a-form-model-item>
<a-row>
<a-col :span="4">
......@@ -285,9 +278,19 @@
import { modelList, siteSave } from "@/services/basicsetFun";
import YCheckbox from "@/components/ycheckbox/YCheckbox.vue";
import YSwitch from "@/components/yswitch/YSwitch.vue";
import YUpload from "@/components/YUpload.vue";
// import options from "@/utils/city";
import { regionData } from "element-china-area-data";
import { checkPort, checkIp, checkPhone } from "@/utils/validate";
const workday = {
workday1: "星期一",
workday2: "星期二",
workday3: "星期三",
workday4: "星期四",
workday5: "星期五",
workday6: "星期六",
workday7: "星期天",
};
export default {
props: {
formVisible: {
......@@ -302,9 +305,11 @@ export default {
components: {
YCheckbox,
YSwitch,
YUpload,
},
data() {
return {
workday,
api: process.env.VUE_APP_API_BASE_URL + "/",
accept: "image/jpeg,image/png", // 上传类型
loading: false,
......@@ -357,7 +362,6 @@ export default {
}, //表单提交数据
indeterminate: true,
checkAll: false,
fileList: [],
formRules: {
siteName: [
{
......@@ -553,7 +557,6 @@ export default {
},
//重置
resetForm() {
this.fileList = [];
this.cityData = [];
this.$refs.ruleForm.resetFields();
},
......@@ -583,7 +586,6 @@ export default {
amWorkEndTime,
pmWorkStartTime,
pmWorkEndTime,
logoPath,
} = (this.formInfo = data);
this.areaInfo.areaID = areaID;
this.areaInfo.areaCode = areaCode;
......@@ -601,17 +603,6 @@ export default {
pmWorkStartTime,
pmWorkEndTime,
].map(String);
if (logoPath) {
this.fileList = [
{
uid: -1,
status: "done",
name: logoPath,
url: logoPath,
},
];
}
});
},
// 保存
......@@ -638,62 +629,14 @@ export default {
}
});
},
// 上传限制
beforeUpload(file) {
let restrict = 10; // 限制文件大小MB
const fileType = ["image/jpeg", "image/png"]; // 限制文件类型
const isJpgOrPng = fileType.includes(file.type);
if (!isJpgOrPng) {
this.$message.error("请上传jpeg或者png图片!");
}
const isExceed = file.size / 1024 / 1024 <= restrict;
if (!isExceed) {
this.$message.error(`图片大小不能超过${restrict}MB!`);
}
return isJpgOrPng && isExceed;
},
// 上传图片
handleChange({ file, fileList }) {
if (
file.status &&
file.status != "removed" &&
file.response &&
file.response.code == -1
) {
this.$message.error(file.response.msg);
fileList = fileList.filter((file) => file.response.code != -1);
}
this.fileList = [...fileList].slice(-1);
this.fileList = this.fileList.map((v) => {
if (v.response) {
v.url = v.response.url;
}
return v;
});
if (this.fileList[0]) {
this.formInfo.logoPath = this.fileList[0].url;
} else {
this.formInfo.logoPath = "";
}
// if (info.file.status === "uploading") {
// this.loading = true;
// return;
// }
// if (info.file.status === "done") {
// this.formInfo.logoPath = info.file.response.url;
// this.loading = false;
// }
},
// 预览logo
handlePreview(info) {
this.$viewerApi({
images: [info.url],
});
},
// 删除logo
// handleRemove() {
// this.formInfo.logoPath = "";
// },
// 地址
oncityChange(val) {
[
......
// import {LOGIN, ROUTES} from '@/services/api'
import {loginapi} from '@/services/basicsetApi'
import {request, METHOD} from '@/utils/request'
import local from "@/utils/local"
import { loginapi, upload } from "@/services/basicsetApi";
import { request, METHOD } from "@/utils/request";
import local from "@/utils/local";
// 上传附件
export async function uploadFile(data) {
return request(upload.file, METHOD.POST, data);
}
/**
* 登录服务
......@@ -13,8 +18,8 @@ export async function login(account, password) {
return request(loginapi.login, METHOD.POST, {
loginName: account,
password: password,
securityCode:8888
})
securityCode: 8888,
});
}
// export async function getRoutesConfig() {
......@@ -25,13 +30,13 @@ export async function login(account, password) {
* 退出登录
*/
export function logout() {
localStorage.removeItem(process.env.VUE_APP_ROUTES_KEY)
localStorage.removeItem(process.env.VUE_APP_PERMISSIONS_KEY)
localStorage.removeItem(process.env.VUE_APP_ROLES_KEY)
local.removeLocal('token')
localStorage.removeItem(process.env.VUE_APP_ROUTES_KEY);
localStorage.removeItem(process.env.VUE_APP_PERMISSIONS_KEY);
localStorage.removeItem(process.env.VUE_APP_ROLES_KEY);
local.removeLocal("token");
}
export default {
login,
logout,
// getRoutesConfig
}
};
// 根据字典过滤数据
export const filterItems = (key, dict = {}) => {
let val = "";
Object.keys(dict).forEach((keys) => {
if (key == keys) {
val = dict[keys];
}
});
return val;
return dict[key];
};
// 对象转对象数组
export const transverter = (obj) => {
......@@ -21,3 +15,13 @@ export const transverter = (obj) => {
export const unifyResolution = (resolution) => {
return resolution.replace(/[xX*]/, "x");
};
// 对象数组去重
export const uniqueObjArray = (arr, key = "id") => {
const res = new Map();
let filterArr = [];
filterArr = arr.filter((v) => {
return !res.has(v[key]) && res.set(v[key], 1);
});
return filterArr;
};
# 开发环境配置
NODE_ENV = development
# VUE_APP_API_BASE_URL=http://8.136.255.30:11078
VUE_APP_API_BASE_URL=http://192.168.0.98:11078
VUE_APP_API_BASE_URL=http://192.168.0.53:17212
#图片显示拼接
# VUE_APP_API_IMG_URL=http://8.136.255.30:11078/
VUE_APP_API_IMG_URL=http://192.168.0.98:11078/
......
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