wangyifang
/
sstt-archives-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2023-10-7

Browse Source
master
xy 3 years ago
parent 74262424a5
commit 89fd4db6c4
4 changed files with 390 additions and 141 deletions
Show Stats Download Patch File Download Diff File

238
src/components/XyTable/index.vue
Unescape View File

@ -147,9 +147,17 @@ export default {
return { width: "100%", marginBottom: "20px" }; return { width: "100%", marginBottom: "20px" };
}, },
}, },
btnToMore: {
type: Boolean,
default: false
},
moreAuths: {
type: Array,
default: () => ['edit','delete']
},
btnWidth: { btnWidth: {
type: Number, type: Number,
default: 140, default: 220,
}, },
// 分页相关 // 分页相关
@ -204,10 +212,9 @@ export default {
return metrics.width; return metrics.width;
}, },
initLoad() { initLoad() {
if (this.height) return;
let clientHeight = document.documentElement.clientHeight; let clientHeight = document.documentElement.clientHeight;
let lxheader = document let lxheader = document.querySelector(".v-header")?.getBoundingClientRect();
.querySelector(".v-header")
.getBoundingClientRect();
let lxHeader_height = lxheader.height + 25; //查询 头部 let lxHeader_height = lxheader.height + 25; //查询 头部
let paginationHeight = 37; //分页的高度 let paginationHeight = 37; //分页的高度
let topHeight = 50; //页面 头部 let topHeight = 50; //页面 头部
@ -242,6 +249,7 @@ export default {
.then((res) => { .then((res) => {
this.listData = this.getByStrkey(res.data, this.resProp); this.listData = this.getByStrkey(res.data, this.resProp);
this.totalData = res.data.total; this.totalData = res.data.total;
this.$emit('loaded')
setTimeout(() => { setTimeout(() => {
this.loading = false; this.loading = false;
@ -261,6 +269,7 @@ export default {
.then((res) => { .then((res) => {
this.listData = this.getByStrkey(res, this.resProp); this.listData = this.getByStrkey(res, this.resProp);
this.totalData = res.total; this.totalData = res.total;
this.$emit('loaded')
setTimeout(() => { setTimeout(() => {
this.loading = false; this.loading = false;
@ -368,7 +377,7 @@ export default {
this.$refs.table.toggleRowExpansion(row, expanded); this.$refs.table.toggleRowExpansion(row, expanded);
}, },
setCurrentRow(row) { setCurrentRow(row) {
this.$refs.table.toggleRowExpansion(row); this.$refs.table.setCurrentRow(row);
}, },
clearSort() { clearSort() {
this.$refs.table.clearSort(); this.$refs.table.clearSort();
@ -385,6 +394,9 @@ export default {
getSelection(){ getSelection(){
return this.$refs.table?.store?.states?.selection ?? [] return this.$refs.table?.store?.states?.selection ?? []
}, },
getListData () {
return this.listData
},
//table通讯事件 //table通讯事件
delete(row, type) { delete(row, type) {
@ -444,6 +456,7 @@ export default {
expandChange(row, expanded) { expandChange(row, expanded) {
this.$emit("expand-change", row, expanded); this.$emit("expand-change", row, expanded);
}, },
deleteClick(row) { deleteClick(row) {
this.$emit("delete", row); this.$emit("delete", row);
if (this.destroyAction) { if (this.destroyAction) {
@ -571,12 +584,68 @@ export default {
let _this = this; let _this = this;
if (_this.auths?.length > 0) { if (_this.auths?.length > 0) {
let btns = new Map(); let btns = new Map();
btns.set(
"more",
<el-dropdown size="small" type="primary" placement="bottom" on={{
['command']:command => {
if (command === 'edit') {
this.editorClick(scope.row)
}
else if (command === 'delete') {
let that = this
this.$confirm("确认删除吗？",{
beforeClose(action,instance,done){
if (action === 'confirm') {
that.deleteClick(scope.row);
done();
} else {
done();
}
}
}).then(res => {
this.$message({
type: 'success',
message: '删除成功'
})
this.load()
})
} else {
this.$emit(command, scope.row)
}
}
}}>
<i-button
type="default"
size="small"
style="margin-left: 6px;"
>
更多
</i-button>
<el-dropdown-menu slot="dropdown">
{
(() => {
let dom = [];
this.moreAuths.forEach(i => {
this.$scopedSlots[i] ? dom.push((<el-dropdown-item command={i}>{ this.$scopedSlots[i](scope) }</el-dropdown-item>)) : ''
})
if (this.auths.indexOf('edit') !== -1) {
dom.push(<el-dropdown-item divided command="edit">编辑</el-dropdown-item>)
}
if (this.auths.indexOf('delete') !== -1) {
dom.push(<el-dropdown-item command="delete"><span style="color: red;">删除</span></el-dropdown-item>)
}
return dom;
})()
}
</el-dropdown-menu>
</el-dropdown>
)
btns.set( btns.set(
"detail", "detail",
<i-button <i-button
style={{
"margin-right": "6px",
}}
type="primary" type="primary"
size="small" size="small"
ghost={true} ghost={true}
@ -588,9 +657,6 @@ export default {
btns.set( btns.set(
"edit", "edit",
<i-button <i-button
style={{
"margin-right": "6px",
}}
type="primary" type="primary"
size="small" size="small"
onClick={() => _this.editorClick(scope.row, "edit")} onClick={() => _this.editorClick(scope.row, "edit")}
@ -673,17 +739,25 @@ export default {
"flex-wrap": "wrap", "flex-wrap": "wrap",
}} }}
> >
{_this.auths.map((item, index) => { { (() => {
if (_this.$scopedSlots[item]) { let dom = [];
flag = index; _this.auths.forEach((item, index) => {
return _this.$scopedSlots[item](scope, item, index); if (this.btnToMore && _this.moreAuths.find(j => j === item)) return
} else { if (_this.$scopedSlots[item]) {
if (btns.get(item)) {
flag = index; flag = index;
return btns.get(item); dom.push(_this.$scopedSlots[item](scope, item, index));
} else {
if (btns.get(item)) {
flag = index;
dom.push(btns.get(item));
}
} }
} })
})}
this.btnToMore? dom.push(btns.get('more')) : ''
return dom;
})() }
</div> </div>
); );
return { dom, flag }; return { dom, flag };
@ -711,7 +785,7 @@ export default {
} }
},{ },{
deep: true, deep: true,
immediate: false immediate: true
}) })
} else { } else {
if(this.action) this.getTableData(); if(this.action) this.getTableData();
@ -829,68 +903,68 @@ export default {
scopedSlots={ scopedSlots={
item.customFn || item.type === "expand" item.customFn || item.type === "expand"
? { ? {
default(scope) { default(scope) {
if (item.type === "expand") { if (item.type === "expand") {
return item.expandFn(scope); return item.expandFn(scope);
} }
if (item.customFn) { if (item.customFn) {
return item.customFn(scope.row, scope); return item.customFn(scope.row, scope);
} }
}, },
} }
: "" : ""
} }
> >
{item.multiHd {item.multiHd
? item.multiHd.map((item1, index1) => { ? item.multiHd.map((item1, index1) => {
return ( return (
<af-table-column <af-table-column
//key={`xy-table-col-multi-${item1.prop}`} //key={`xy-table-col-multi-${item1.prop}`}
key={String(Math.random()) + index1} key={String(Math.random()) + index1}
prop={`${item.pProp ? item.pProp + "." : ""}${ prop={`${item.pProp ? item.pProp + "." : ""}${
item1.prop item1.prop
}`} }`}
type={item1.type} type={item1.type}
index={item1.index} index={item1.index}
column-key={String(Math.random() + index1)} column-key={String(Math.random() + index1)}
label={item1.label} label={item1.label}
prop={item1.prop} prop={item1.prop}
width={item1.width ?? "auto"} width={item1.width ?? "auto"}
min-width={item1.minWidth} min-width={item1.minWidth}
fixed={item1.fixed} fixed={item1.fixed}
render-header={item1.renderHeader} render-header={item1.renderHeader}
sortable={item1.sortable ?? false} sortable={item1.sortable ?? false}
sort-method={item1.sortMethod} sort-method={item1.sortMethod}
sort-by={item1.sortBy} sort-by={item1.sortBy}
sort-orders={item1.sortOrders} sort-orders={item1.sortOrders}
resizale={item1.resizale ?? false} resizale={item1.resizale ?? false}
formatter={item1.formatter} formatter={item1.formatter}
show-overflow-tooltip={ show-overflow-tooltip={
item1.showOverflowTooltip ?? true item1.showOverflowTooltip ?? true
} }
align={item1.align ?? "center"} align={item1.align ?? "center"}
header-align={item1.headerAlign ?? "center"} header-align={item1.headerAlign ?? "center"}
class-name={`xy-table__row-fade ${item1.className}`} class-name={`xy-table__row-fade ${item1.className}`}
label-class-name={`xy-table__title-fade ${item1.labelClassName}`} label-class-name={`xy-table__title-fade ${item1.labelClassName}`}
selectable={item1.selectable} selectable={item1.selectable}
reserve-selection={item1.reserveSelection} reserve-selection={item1.reserveSelection}
filters={item1.filters} filters={item1.filters}
filter-placement={item1.filterPlacement} filter-placement={item1.filterPlacement}
filter-multiple={item1.filterMultiple} filter-multiple={item1.filterMultiple}
filter-method={item1.filterMethod} filter-method={item1.filterMethod}
filtered-value={item1.filteredValue} filtered-value={item1.filteredValue}
scopedSlots={ scopedSlots={
item1.customFn item1.customFn
? { ? {
default(scope1) { default(scope1) {
return item1.customFn(scope1); return item1.customFn(scope1);
}, },
} }
: "" : ""
} }
></af-table-column> ></af-table-column>
); );
}) })
: ""} : ""}
</af-table-column> </af-table-column>
); );
@ -921,6 +995,7 @@ export default {
::v-deep .el-table { ::v-deep .el-table {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.xy-table__setting { .xy-table__setting {
font-size: 14px; font-size: 14px;
@ -933,6 +1008,7 @@ export default {
.xy-table__page { .xy-table__page {
display: flex; display: flex;
justify-content: right; justify-content: right;
align-items: center;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
background: rgba(140, 140, 140, 0.6); background: rgba(140, 140, 140, 0.6);
@ -1013,7 +1089,7 @@ export default {
clip-path: polygon(0 30%, 100% 30%, 100% 100%, 0 100%); clip-path: polygon(0 30%, 100% 30%, 100% 100%, 0 100%);
background: rgba(140, 140, 140, 0.7); background: rgba(140, 140, 140, 0.7);
transform: scale(0.8, 0.8) translateX(-22px) translateY(-10px) transform: scale(0.8, 0.8) translateX(-22px) translateY(-10px)
rotate(-90deg); rotate(-90deg);
} }
} }
} }
@ -1055,4 +1131,8 @@ export default {
opacity: 1; opacity: 1;
} }
} }
Button + Button {
margin-left: 6px;
}
</style> </style>

161
src/views/component/dialog.vue
Unescape View File

@ -1,9 +1,10 @@
<script> <script>
import linkPickModal from './linkPickModal.vue' import linkPickModal from './linkPickModal.vue'
import { save, show, index } from "@/api/system/baseForm"; import {save, show, index, destroy} from "@/api/system/baseForm";
import { getparameter } from "@/api/system/dictionary"; import { getparameter } from "@/api/system/dictionary";
import { domMap } from "@/const/inputType"; import { domMap } from "@/const/inputType";
import { addPropsMap } from "@/const/addProps"; import { addPropsMap } from "@/const/addProps";
import {deepCopy} from "@/utils";
export default { export default {
components: { components: {
linkPickModal linkPickModal
@ -70,7 +71,8 @@ export default {
[ [
h('el-input',{ h('el-input',{
props: { props: {
readonly: true readonly: true,
value: (this.form[i.field] && this.form[i.field] instanceof Array) ? this.form[i.field]?.map(i => i.name || i.mingcheng || i.xingming || i.no || i.id)?.toString() : ''
}, },
on: { on: {
// ['focus']:e => { // ['focus']:e => {
@ -85,9 +87,9 @@ export default {
slot: 'append', slot: 'append',
on: { on: {
click:e => { click:e => {
console.log(i) this.pickedLinkField.field = i.field;
this.pickedLinkField.linkType = i._relations.link_relation this.pickedLinkField.linkType = i._relations.link_relation;
this.pickedLinkField.linkTableName = i._relations.link_table_name this.pickedLinkField.linkTableName = i._relations.link_table_name;
this.$refs['linkPickModal'].show() this.$refs['linkPickModal'].show()
} }
} }
@ -226,7 +228,14 @@ export default {
ref: 'linkPickModal', ref: 'linkPickModal',
props: { props: {
linkType: this.pickedLinkField.linkType, linkType: this.pickedLinkField.linkType,
linkTableName: this.pickedLinkField.linkTableName linkTableName: this.pickedLinkField.linkTableName,
field: this.pickedLinkField.field
},
on: {
['confirm']:({ field, value }) => {
this.form[field] = value
console.log(this.form)
}
} }
}) })
]) ])
@ -237,12 +246,14 @@ export default {
type: "add", type: "add",
dialogVisible: false, dialogVisible: false,
form: {}, form: {},
originalForm: {},
rules: {}, rules: {},
file: {}, file: {},
pickedLinkField: { pickedLinkField: {
linkType: '', linkType: '',
linkTableName: '' linkTableName: '',
field: '',
} }
}; };
}, },
@ -404,9 +415,12 @@ export default {
} }
}); });
this.originalForm = deepCopy(res);
}, },
submit() { submit() {
let promiseAll = [];
if (this.type === "add") { if (this.type === "add") {
if (this.form.hasOwnProperty("id")) { if (this.form.hasOwnProperty("id")) {
delete this.form.id; delete this.form.id;
@ -422,26 +436,125 @@ export default {
} }
this.$refs["elForm"].validate((validate) => { this.$refs["elForm"].validate((validate) => {
if (validate) { if (validate) {
let copyForm = deepCopy(this.form);
this.formInfo.forEach((info) => { this.formInfo.forEach((info) => {
if (info.edit_input === "files") { if (
this.form[info.field] = this.file[info.field].map( info._relations?.link_relation === "newHasMany" ||
(i) => i?.response?.id info._relations?.link_relation === "hasMany"
); ) {
if (this.originalForm[info._relations.link_with_name]) {
this.originalForm[info._relations.link_with_name].map((i) => {
promiseAll.push(
destroy({
id: i.id,
table_name: info._relations.link_table_name,
})
);
});
}
} }
if (info.edit_input === "file") {
this.form[info.field] = this.file[info.field][0]?.response?.id; if (copyForm[info._relations?.link_with_name]?.length > 0) {
delete copyForm[info.field];
} }
}); if (
console.log(this.form); info._relations?.link_relation === "newHasMany" ||
save(Object.assign(this.form, { table_name: this.tableName })).then( info._relations?.link_relation === "hasMany"
(res) => { ) {
this.$Message.success({ if (info.edit_input === "files") {
content: `${this.type === "add" ? "新增" : "编辑"}成功`, copyForm[info._relations.link_with_name] = this.file[
}); info.field
this.$emit("refresh"); ]?.map((i) => {
this.hidden(); let copyRelation = i?.response ? deepCopy(i?.response) : "";
delete copyRelation.id;
return {
upload_id: i?.response?.id,
...copyRelation,
};
});
} else {
copyForm[info._relations.link_with_name] = copyForm[
info.field
]?.map((i) => {
let copyRelation = info._params.find(
(param) => param[info._relations?.foreign_key] === i
)
? deepCopy(
info._params.find(
(param) => param[info._relations?.foreign_key] === i
)
)
: "";
delete copyRelation.id;
return {
[info._relations.custom_form_field]: i.id,
...copyRelation,
};
});
}
delete copyForm[info.field];
} }
if (
info._relations?.link_relation === "newHasOne" ||
info._relations?.link_relation === "hasOne"
) {
if (info.edit_input === "file") {
copyForm[info._relations.link_with_name] = [
{
upload_id: this.file[info.field]?.response?.id,
...this.file[info.field],
},
];
} else {
let copyRelation = deepCopy(
info._params.find(
(param) => param.id == this.form[info.field]
)
);
if (copyRelation) {
delete copyRelation.id;
copyForm[info._relations.link_with_name] = [
{
id: this.form[info._relations?.link_with_name]?.id,
[info.field === "shenhebumen"
? "dept_id"
: info._relations.foreign_key]: this.form[info.field],
...copyRelation,
},
];
}
}
delete copyForm[info.field];
}
if (!copyForm[info._relations?.link_with_name]) {
delete copyForm[info._relations?.link_with_name];
}
// if (info._relations?.link_with_name) {
// if (info.edit_input === "files" || info.edit_input === "file") {
// this.form[info._relations.link_with_name] = this.file[info.field].map(i => i?.response);
// delete this.form[info.field]
// } else {
// this.form[info._relations.link_with_name] = this.form[info.field] instanceof Array ? this.form[info.field].map(i => {
// return info._params.find(param => i === param[info._relations.foreign_key])
// }) : [info._params.find(param => this.form[info.field] === param[info._relations.foreign_key])]
// delete this.form[info.field]
// }
// }
});
promiseAll.push(
save(Object.assign(copyForm, { table_name: this.tableName }))
); );
Promise.all(promiseAll).then((res) => {
this.$Message.success({
content: `${this.type === "add" ? "新增" : "编辑"}成功`,
});
this.$emit("refresh");
this.hidden();
});
} }
}); });
}, },
@ -476,6 +589,7 @@ export default {
} }
} }
}); });
document.documentElement.style.setProperty('--column-num', Math.floor(newVal.length / 8).toString())
}, },
//immediate: true, //immediate: true,
}, },
@ -498,6 +612,9 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
:root {
--column-num: 2;
}
.uploaded-a { .uploaded-a {
color: red; color: red;
text-decoration: none; text-decoration: none;

24
src/views/component/linkPickModal.vue
Unescape View File

@ -2,7 +2,7 @@
<div> <div>
<el-dialog :visible.sync="dialogVisible"> <el-dialog :visible.sync="dialogVisible">
<template> <template>
<xy-table ref="table" :row-key="row => row.id" :height="380" :action="index" :delay-req="true" :req-opt="select" :table-item="columns"></xy-table> <xy-table ref="table" :row-key="row => row.id" :height="380" :action="index" :delay-req="true" :req-opt="select" :table-item="columns" @row-click="rowPick"></xy-table>
</template> </template>
<template #footer> <template #footer>
<span> <span>
@ -20,10 +20,12 @@ import { index as customFormIndex , show } from "@/api/system/customForm";
export default { export default {
props: { props: {
linkType: String, linkType: String,
linkTableName: String linkTableName: String,
field: String
}, },
data() { data() {
return { return {
tempRow: {},
dialogVisible: false, dialogVisible: false,
select: { select: {
table_name: '', table_name: '',
@ -104,8 +106,17 @@ export default {
} }
}, },
rowPick (row) {
this.tempRow = row
},
confirm () { confirm () {
console.log(this.$refs['table'].getSelection()) (this.linkType === 'hasMany' || this.linkType === 'newHasMany') ? this.$emit('confirm',{
field: this.field,
value: this.$refs['table'].getSelection()
}) : this.$emit('confirm',{
field: this.field,
value: this.tempRow
})
this.dialogVisible = false; this.dialogVisible = false;
} }
}, },
@ -114,6 +125,13 @@ export default {
async linkTableName (newVal) { async linkTableName (newVal) {
await this.getDataTableName(); await this.getDataTableName();
await this.getColumns(); await this.getColumns();
},
dialogVisible (newVal) {
if (newVal) {
} else {
this.tempRow = {}
}
} }
} }
}; };

108
src/views/component/table.vue
Unescape View File

@ -454,30 +454,41 @@ export default {
}); });
this.form = fields; this.form = fields;
console.log(111, this.form); console.log(111, this.form);
this.table = this.form this.form
?.filter((i) => i.list_show) ?.filter((i) => i.list_show)
.map((i) => { .forEach((i) => {
if (i._relations) return
let linkOb = {}; let linkOb = {};
if (i.select_item && typeof i.select_item === 'object' && !(i.select_item instanceof Array)) { if (i.edit_input === "richtext") {
let keys = Object.keys(i.select_item) linkOb.customFn = (row) => {
linkOb.customFn = row => {
let paramMap = new Map()
keys.forEach(key => {
paramMap.set(i.select_item[key],key)
})
return ( return (
<span> <div
{ paramMap.get(row[i.field]?.toString()) } style={{ "max-height": "55px","overflow": "scroll" }}
</span> domPropsInnerHTML={row[i.field]}
) ></div>
} );
};
}
if (
i.select_item &&
typeof i.select_item === "object" &&
!(i.select_item instanceof Array)
) {
let keys = Object.keys(i.select_item);
linkOb.customFn = (row) => {
let paramMap = new Map();
keys.forEach((key) => {
paramMap.set(i.select_item[key], key);
});
return <span>{paramMap.get(row[i.field]?.toString())}</span>;
};
} }
if (i._relations) { if (i._relations) {
let { link_relation, foreign_key, link_with_name } = i._relations let { link_relation, foreign_key, link_with_name } = i._relations;
if (link_relation === 'newHasOne' || link_relation === 'hasOne') { if (link_relation === "newHasOne" || link_relation === "hasOne") {
linkOb.customFn = row => { linkOb.customFn = (row) => {
if (i.edit_input === "file") { if (i.edit_input === "file") {
return ( return (
<a <a
@ -490,35 +501,58 @@ export default {
} else { } else {
return ( return (
<span> <span>
{ row[link_with_name]?.name || {row[link_with_name]?.name ||
row[link_with_name]?.no || row[link_with_name]?.no ||
row[link_with_name]?.value } row[link_with_name]?.value}
</span> </span>
); );
} }
} };
} }
if (link_relation === "hasMany" || link_relation === 'newHasMany') { if (link_relation === "hasMany" || link_relation === "newHasMany") {
linkOb.customFn = (row) => { linkOb.customFn = (row) => {
return ( if (i.edit_input === "files") {
<div> return (
{row[link_with_name]?.map((o) => ( <div style="display: flex;flex-direction: column;">
<span>{o?.name || o?.no || o?.value}</span> {row[link_with_name]?.map((o) => (
))} <a>
</div> { o?.original_name || o?.name }
); </a>
))}
</div>
)
} else {
return (
<div>
{row[link_with_name]?.map((o) => (
<p>
{o?.name ||
o?.no ||
o?.value ||
o?.biaoti ||
o?.mingcheng}
</p>
))}
</div>
);
}
}; };
} }
} }
return Object.assign(
{ let alignLeft = []
prop: i.field, this.table.push(
label: i.name, Object.assign(
width: i.width, {
fixed: i.is_fixed, prop: i.field,
}, label: i.name,
linkOb width: i.width,
align: alignLeft.find(m => m === i.field) ? 'left' : 'center',
fixed: i.is_fixed,
},
linkOb
)
); );
}); });
this.table.unshift({ this.table.unshift({

Write Preview
Loading…
Cancel
Save