Skip to content

E
enterprise-platform
Commit 0aace81a authored by 姬鋆屾's avatar 姬鋆屾
Browse files
Options

pref:修改列表数据格式化及空数据占位符

parent cacc9e4b
Hide whitespace changes
Inline Side-by-side
Showing with 202 additions and 135 deletions
enterprise-manager-ui/admin/src/assets/mixins/table.js
View file @ 0aace81a
import axios from 'axios'; import axios from "axios";
import { import {
formatter, formatterAmount, formatterDate, formatterDateOnly, find, formatter,
} from '@/assets/utils/table'; formatterAmount,
formatterDate,
formatterDateOnly,
find,
} from "@/assets/utils/table";
const tagsMap = { const tagsMap = {
1: 'danger', 1: "danger",
0: 'success' 0: "success",
}; };
export default { export default {
...@@ -13,21 +17,24 @@ export default { ...@@ -13,21 +17,24 @@ export default {
this.getData(); this.getData();
}, },
watch: { watch: {
'$route'(route) { $route(route) {
if(route.path=='/device/electron/list'||route.path=='/device/meet/list'){ if (
this.changePath("device") route.path == "/device/electron/list" ||
route.path == "/device/meet/list"
) {
this.changePath("device");
} }
this.query = Object.assign({}, this.query, route.query); this.query = Object.assign({}, this.query, route.query);
this.getData(); this.getData();
} },
}, },
beforeDestroy() { beforeDestroy() {
this.source.cancel('自动取消ajax操作'); this.source.cancel("自动取消ajax操作");
clearTimeout(this.loadingTimer); clearTimeout(this.loadingTimer);
}, },
methods: { methods: {
test() { test() {
console.log("test") console.log("test");
}, },
// 开启、关闭 // 开启、关闭
changePath(path) { changePath(path) {
...@@ -41,11 +48,13 @@ export default { ...@@ -41,11 +48,13 @@ export default {
return Promise.resolve(); return Promise.resolve();
}, },
// 表格接收数据前 // 表格接收数据前
beforeRender(data) { return data }, beforeRender(data) {
return data;
},
// 表格接收数据后 // 表格接收数据后
afterRender(data) { }, afterRender(data) {},
// 删除动作发生后 // 删除动作发生后
afterDel(data) { }, afterDel(data) {},
// 默认拉取数据 // 默认拉取数据
async getData() { async getData() {
try { try {
...@@ -55,7 +64,7 @@ export default { ...@@ -55,7 +64,7 @@ export default {
} }
this.tableData.loading = true; this.tableData.loading = true;
this.$post(this.pageInfo.list, this.query, { this.$post(this.pageInfo.list, this.query, {
cancelToken: this.source.token cancelToken: this.source.token,
}) })
.then(({ data }) => { .then(({ data }) => {
this.tableData = this.beforeRender( this.tableData = this.beforeRender(
...@@ -63,44 +72,52 @@ export default { ...@@ -63,44 +72,52 @@ export default {
); );
this.afterRender(this.tableData); this.afterRender(this.tableData);
}) })
.catch(error => { .catch((error) => {
if (error.message == '自动取消ajax操作') return if (error.message == "自动取消ajax操作") return;
this.$message.error(error.message); this.$message.error(error.message);
}) })
.then(data => { .then((data) => {
clearTimeout(this.loadingTimer); clearTimeout(this.loadingTimer);
this.loadingTimer = setTimeout(() => { this.loadingTimer = setTimeout(() => {
this.tableData.loading = false; this.tableData.loading = false;
}, 300); }, 300);
}) });
}, },
// 复制一个数组或对象 // 复制一个数组或对象
util_copy(data) { util_copy(data) {
if (typeof data !== 'object') return data; if (typeof data !== "object") return data;
return JSON.parse(JSON.stringify(data)) return JSON.parse(JSON.stringify(data));
}, },
_showAll(item) { _showAll(item) {
let data = this.util_copy(item); let data = this.util_copy(item);
data.isShowAll = true; data.isShowAll = true;
this.util_update(item.id, data) this.util_update(item.id, data);
}, },
// 超长文本展开收起 // 超长文本展开收起
util_short(key, size) { util_short(key, size) {
return row => { return (row) => {
let string = row[key] || ''; let string = row[key] || "";
if (string.length < size || row.isShowAll) return string; if (string.length < size || row.isShowAll) return string;
return ( return (
<span> <span>
{string.substr(0, 50) + '...'} {string.substr(0, 50) + "..."}
<el-button size='mini' type='text' onClick={() => { this._showAll(row) }}>更多</el-button> <el-button
size="mini"
type="text"
onClick={() => {
this._showAll(row);
}}
>
更多
</el-button>
</span> </span>
) );
} };
}, },
// 从dict字段暴力取值，取不到则返回原值 // 从dict字段暴力取值，取不到则返回原值
util_formatter(key, val) { util_formatter(key, val) {
try { try {
return this.tableData.dict[key][val] return this.tableData.dict[key][val];
} catch (error) { } catch (error) {
return val; return val;
} }
...@@ -108,20 +125,24 @@ export default { ...@@ -108,20 +125,24 @@ export default {
// 通过id修改某条记录 // 通过id修改某条记录
util_update(id, newData, idColumnName) { util_update(id, newData, idColumnName) {
let table = this.tableData.data; let table = this.tableData.data;
let { index, data } = find(table, !idColumnName ? 'id' : idColumnName, id); let { index, data } = find(
table,
!idColumnName ? "id" : idColumnName,
id
);
table.splice(index, 1, Object.assign({}, data, newData)); table.splice(index, 1, Object.assign({}, data, newData));
}, },
// 工具方法，把数字转化为字符串 // 工具方法，把数字转化为字符串
util_toString(data, array) { util_toString(data, array) {
const dataCopy = Object.assign({}, data); const dataCopy = Object.assign({}, data);
for (var item in data) { for (var item in data) {
dataCopy[item] = dataCopy[item] === undefined ? '' : dataCopy[item] + ''; dataCopy[item] =
dataCopy[item] === undefined ? "" : dataCopy[item] + "";
} }
return dataCopy; return dataCopy;
}, },
util_formatterDate(time, fmt) { util_formatterDate(time, fmt) {
if (!time) return ''; if (!time) return "";
let date = new Date(Number(time)); let date = new Date(Number(time));
var o = { var o = {
"M+": date.getMonth() + 1, //月份 "M+": date.getMonth() + 1, //月份
...@@ -130,11 +151,21 @@ export default { ...@@ -130,11 +151,21 @@ export default {
"m+": date.getMinutes(), //分 "m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒 "s+": date.getSeconds(), //秒
"q+": Math.floor((date.getMonth() + 3) / 3), //季度 "q+": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒 S: date.getMilliseconds(), //毫秒
}; };
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); if (/(y+)/.test(fmt))
fmt = fmt.replace(
RegExp.$1,
(date.getFullYear() + "").substr(4 - RegExp.$1.length)
);
for (var k in o) for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length == 1
? o[k]
: ("00" + o[k]).substr(("" + o[k]).length)
);
return fmt; return fmt;
}, },
util_getPrevMonthDate() { util_getPrevMonthDate() {
...@@ -142,141 +173,181 @@ export default { ...@@ -142,141 +173,181 @@ export default {
var year = date.getFullYear(); var year = date.getFullYear();
var month = date.getMonth(); var month = date.getMonth();
var day = date.getDate(); var day = date.getDate();
if (month == 0) {//年份为0代表,是本年的第一月,所以不能减 if (month == 0) {
month = 11;//月份为上年的最后月份 //年份为0代表,是本年的第一月,所以不能减
year--;//年份减1 month = 11; //月份为上年的最后月份
year--; //年份减1
return new Date(year, month, day); return new Date(year, month, day);
} }
month--;//否则,只减去月份 month--; //否则,只减去月份
return new Date(year, month, day); return new Date(year, month, day);
}, },
// 格式化单元格数据 // 格式化单元格数据
formatter(row, column, val) { formatter(row, column, val) {
const content = formatter(this.tableData, column, val); const content = formatter(this.tableData, column, val);
return content ? <el-tag type={'info'} size='mini'>{content}</el-tag> : val return content ? (
<el-tag type={"info"} size="mini">
{content}
</el-tag>
) : (
"--"
);
}, },
formatterYES(row, column, val) { formatterYES(row, column, val) {
const content = formatter(this.tableData, column, val); const content = formatter(this.tableData, column, val);
if (content) { if (content) {
if (val == '0') { if (val == "0") {
return <el-tag type={'danger'} size='mini'>{content}</el-tag> return (
} else if (val == '1') { <el-tag type={"danger"} size="mini">
return <el-tag type={'success'} size='mini'>{content}</el-tag> {content}
</el-tag>
);
} else if (val == "1") {
return (
<el-tag type={"success"} size="mini">
{content}
</el-tag>
);
} }
} else { } else {
return val return val;
} }
}, },
formatterStatus(row, column, val) { formatterStatus(row, column, val) {
const content = formatter(this.tableData, column, val); const content = formatter(this.tableData, column, val);
if (content) { if (content) {
if (val == '0') { if (val == "0") {
return <el-tag size='mini'>{content}</el-tag> return <el-tag size="mini">{content}</el-tag>;
} else if (val == '1') { } else if (val == "1") {
return <el-tag type={'danger'} size='mini'>{content}</el-tag> return (
} else if (val == '2') { <el-tag type={"danger"} size="mini">
return <el-tag type={'success'} size='mini'>{content}</el-tag> {content}
</el-tag>
);
} else if (val == "2") {
return (
<el-tag type={"success"} size="mini">
{content}
</el-tag>
);
} }
} else { } else {
return val return val;
} }
}, },
formatterDictLink(row, column, val) { formatterDictLink(row, column, val) {
const content = formatter(this.tableData, column, val); const content = formatter(this.tableData, column, val);
let underline = false; let underline = false;
let type = "primary" let type = "primary";
if (val === 3) { if (val === 3) {
type = 'danger' type = "danger";
} }
return content ? <el-link type={type} underline={underline} onClick={() => { this.toDrawerMsg(row) }} size='mini'>{content}</el-link> : val return content ? (
<el-link
type={type}
underline={underline}
onClick={() => {
this.toDrawerMsg(row);
}}
size="mini"
>
{content}
</el-link>
) : (
val
);
}, },
formatters(row, column, val) { formatters(row, column, val) {
if (val) { if (val) {
return ( return val
val.split(',').map(v => formatter(this.tableData, column, v) ).join(",") .split(",")
) .map((v) => formatter(this.tableData, column, v))
.join(",");
} }
return '--' return "--";
}, },
formatterLink(row, column, val) { formatterLink(row, column, val) {
//const content = formatter(this.tableData, column-2, val); //const content = formatter(this.tableData, column-2, val);
return <el-link type="primary" href={val} target="_blank">{row.fileName}</el-link> return (
<el-link type="primary" href={val} target="_blank">
{row.fileName}
</el-link>
);
//return content; //return content;
// return content ? <el-tag type={'info'} size='mini'>{content}</el-tag> : val // return content ? <el-tag type={'info'} size='mini'>{content}</el-tag> : val
}, },
formatterString(row, column, val) { formatterString(row, column, val) {
return formatter(this.tableData, column, val) return formatter(this.tableData, column, val);
}, },
// 格式化单元格数据 0显示 0.00 // 格式化单元格数据 0显示 0.00
formatterAmount(row, column) { formatterAmount(row, column) {
return formatterAmount(row, column) return formatterAmount(row, column);
}, },
// 格式化单元格数据钱单位里换算成元 // 格式化单元格数据钱单位里换算成元
formatterMoney(row, column, val) { formatterMoney(row, column, val) {
return ((val || 0) / 1000).toFixed(2) return ((val || 0) / 1000).toFixed(2);
}, },
// 格式化单元格数据 // 格式化单元格数据
formatterDate(row, column) { formatterDate(row, column) {
//console.log("date:",row,column) //console.log("date:",row,column)
if(formatterDate(row, column)){ if (formatterDate(row, column)) {
return formatterDate(row, column) return formatterDate(row, column);
}else{ } else {
return '--' return "--";
} }
}, },
// 格式化单元格数据 只要年月日 // 格式化单元格数据 只要年月日
formatterDateOnly(row, column) { formatterDateOnly(row, column) {
return formatterDateOnly(row, column) return formatterDateOnly(row, column);
}, },
// 格式化人员 // 格式化人员
formaterPeople(row, column, val) { formaterPeople(row, column, val) {
let info let info;
if (val) { if (val) {
if (typeof (val) === 'number') { if (typeof val === "number") {
info = <el-tag type={'info'} size='mini'>{this.util_formatter('assigneeList', val)}</el-tag>
} else {
info = ( info = (
val.split(',').map(v => { <el-tag type={"info"} size="mini">
if (this.tableData.dict["assigneeList"][v] != undefined) { {this.util_formatter("assigneeList", val)}
return <el-tag type={'info'} size='mini'>{this.util_formatter('assigneeList', v)}</el-tag> </el-tag>
} );
}) } else {
) info = val.split(",").map((v) => {
if (this.tableData.dict["assigneeList"][v] != undefined) {
return (
<el-tag type={"info"} size="mini">
{this.util_formatter("assigneeList", v)}
</el-tag>
);
}
});
} }
} else { } else {
info = '--' info = "--";
} }
return info return info;
}, },
// 多选表格行 // 多选表格行
handleSelectionChange(val) { handleSelectionChange(val) {
this.selection = val.map(i => i.id); this.selection = val.map((i) => i.id);
}, },
// 当某一行被点击时会触发该事件 // 当某一行被点击时会触发该事件
handleRowClick(row, column, event) { handleRowClick(row, column, event) {},
},
// 合并表格行列 // 合并表格行列
handleSpanMethod() { handleSpanMethod() {},
},
// 自定义表格排序 // 自定义表格排序
handleSortChange() { handleSortChange() {},
},
// 自定义索引号 // 自定义索引号
handleIndexMethod(index) { handleIndexMethod(index) {
//prePageResult 每页条数 //prePageResult 每页条数
// console.log("index:"+index) // console.log("index:"+index)
let size = this.tableData.pageInfo.prePageResult; let size = this.tableData.pageInfo.prePageResult;
let page = this.tableData.pageInfo.currPage; let page = this.tableData.pageInfo.currPage;
let count = parseInt(size) * (parseInt(page) - 1) let count = parseInt(size) * (parseInt(page) - 1);
return count + index + 1; return count + index + 1;
}, },
// 自定义表格选择行是否能勾选 // 自定义表格选择行是否能勾选
...@@ -285,93 +356,91 @@ export default { ...@@ -285,93 +356,91 @@ export default {
}, },
// 设置单元行样式 // 设置单元行样式
tableRowClassName() { }, tableRowClassName() {},
// 批量删除 // 批量删除
toBatchDel() { toBatchDel() {
this.toDel(this.selection.join(','), true); this.toDel(this.selection.join(","), true);
}, },
// 单个删除 // 单个删除
toDel(id, isBatch) { toDel(id, isBatch) {
if (!id) { if (!id) {
return this.$message.warning('请选中一条记录'); return this.$message.warning("请选中一条记录");
} }
this.$get(this.pageInfo.del, { id: id }) this.$get(this.pageInfo.del, { id: id })
.then(res => { .then((res) => {
this.$message.success(res.msg) this.$message.success(res.msg);
// 更新数据 // 更新数据
if (isBatch) { if (isBatch) {
// 批量删除，刷新页面 // 批量删除，刷新页面
this.getData(); this.getData();
} else { } else {
let table = this.tableData.data; let table = this.tableData.data;
let { index } = find(table, 'id', id); let { index } = find(table, "id", id);
table.splice(index, 1); table.splice(index, 1);
this.tableData.pageInfo.totalResult -= 1; this.tableData.pageInfo.totalResult -= 1;
} }
this.afterDel(id); this.afterDel(id);
}) })
.catch(error => { .catch((error) => {
this.$message.error(error.message); this.$message.error(error.message);
}) });
}, },
// 新增 // 新增
toAdd() { toAdd() {
this.$router.push({ this.$router.push({
path: this.pageInfo.add, path: this.pageInfo.add,
query: this.tableConfig.addQuery, query: this.tableConfig.addQuery,
}) });
}, },
// 编辑 // 编辑
toEdit(row, query) { toEdit(row, query) {
this.$router.push({ this.$router.push({
path: this.pageInfo.edit, path: this.pageInfo.edit,
query: Object.assign({}, { id: row.id }, query) query: Object.assign({}, { id: row.id }, query),
}) });
}, },
// 查看 // 查看
toView(row, query) { toView(row, query) {
console.log(this.pageInfo.view) console.log(this.pageInfo.view);
this.$router.push({ this.$router.push({
path: this.pageInfo.view, path: this.pageInfo.view,
query: Object.assign({}, { id: row.id }, query) query: Object.assign({}, { id: row.id }, query),
}) });
}, },
// 导入 // 导入
toImport() { toImport() {
this.$router.push({ this.$router.push({
path: this.pageInfo.importView, path: this.pageInfo.importView,
query: this.tableConfig.addQuery, query: this.tableConfig.addQuery,
}) });
}, },
// 返回 // 返回
toBack() { toBack() {
this.$router.push({ this.$router.push({
path: this.pageInfo.back path: this.pageInfo.back,
}) });
}, },
// 开启、关闭 // 开启、关闭
open() { open() {},
},
}, },
computed: { computed: {
tableConfig() { tableConfig() {
return Object.assign({}, this.defaultConfig, this.config) return Object.assign({}, this.defaultConfig, this.config);
}, },
pageInfo() { pageInfo() {
const urls = { // 操作所需的url地址，和url同路径 const urls = {
// 操作所需的url地址，和url同路径
list: this.$route.path, list: this.$route.path,
edit: this.$route.path.replace('/list', '/edit'), edit: this.$route.path.replace("/list", "/edit"),
save: this.$route.path.replace('/list', '/save'), save: this.$route.path.replace("/list", "/save"),
del: this.$route.path.replace('/list', '/delete'), del: this.$route.path.replace("/list", "/delete"),
add: this.$route.path.replace('/list', '/add'), add: this.$route.path.replace("/list", "/add"),
view: this.$route.path.replace('/list', '/view'), view: this.$route.path.replace("/list", "/view"),
importView: this.$route.path.replace('/list', '/importView'), importView: this.$route.path.replace("/list", "/importView"),
exclude: this.$route.path.replace('/list', '/list/exclude'), exclude: this.$route.path.replace("/list", "/list/exclude"),
} };
return Object.assign({}, urls, this.urls) return Object.assign({}, urls, this.urls);
}, },
}, },
data() { data() {
...@@ -401,17 +470,15 @@ export default { ...@@ -401,17 +470,15 @@ export default {
back: this.toBack, back: this.toBack,
importView: this.toImport, importView: this.toImport,
refresh: this.getData, refresh: this.getData,
} },
}, },
tableData: { // 表格数据 tableData: {
// 表格数据
loading: true, // ajax请求状态 loading: true, // ajax请求状态
dict: {}, dict: {},
result: [], result: [],
pageInfo: {}, pageInfo: {},
} },
} };
} },
} };
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