wangyifang
/
sz-kjsxy-web
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2023-10-9

Browse Source
dev
xy 2 years ago
parent 89fd4db6c4
commit 030c25233a
6 changed files with 814 additions and 309 deletions
Show Stats Download Patch File Download Diff File

22
src/components/LxHeader/index.vue
Unescape View File

@ -1,8 +1,16 @@
<template>
<div class="v-header">
<div class="v-left-text">
<Icon size="20" :type="icon" />
<span>{{text}}</span>
<template v-if="/^iconfont\/.*/.test($route.meta.icon)">
<i class="iconfont" :class="$route.meta.icon.replace(/^iconfont\//,'')" style="padding: 0 6px;"></i>
</template>
<template v-else-if="/^el-icon.*/.test($route.meta.icon)">
<i :class="$route.meta.icon" style="padding: 0 6px;"></i>
</template>
<template v-else>
<Icon size="20" :type="$route.meta.icon" />
</template>
<span>{{text || $route.meta.title}}</span>
</div>
<div class="content">
<slot name="content"></slot>
@ -18,15 +26,9 @@
<script>
export default {
props: {
icon: {
type: String,
default: ""
icon: String,
text: String
},
text: {
type: String,
default: "未定义名称"
}
}
};
</script>
<style lang="less" scoped>

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

@ -9,7 +9,11 @@ export default {
delayReq: {
type: Boolean,
default: false
},//是否延时请求
},//created获取数据时，是否等select条件传入后再请求
isFirstReq: {
type: Boolean,
default: true
},//created时是否请求
reqOpt: Object, //请求参数配置
destroyReqOpt:Object,
resProp: {
@ -204,13 +208,6 @@ export default {
},
methods: {
//方法
calculateTextWidth(text) {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
context.font = '14px Arial'; // Set the font size and family to match the table cell's font
const metrics = context.measureText(text);
return metrics.width;
},
initLoad() {
if (this.height) return;
let clientHeight = document.documentElement.clientHeight;
@ -777,6 +774,7 @@ export default {
},
},
created() {
if (this.isFirstReq) {
if(this.delayReq) {
let watch = this.$watch(()=>this.reqOpt,async (newVal,oldVal)=>{
if(this.action) {
@ -790,6 +788,7 @@ export default {
} else {
if(this.action) this.getTableData();
}
}
},
mounted() {
this.initLoad();

380
src/utils/createDialog.js
Unescape View File

@ -0,0 +1,380 @@
import { domMap } from "@/const/inputType";
import { addPropsMap } from "@/const/addProps";
export class CreateDialog {
replaces;
self;
$createElement;
options;
constructor(self, replaces = [], options) {
/*
replace = [
{
key: '',
label: '',
render: () => {}
}
]
*/
this.self = self;
this.$createElement = self.$createElement;
this.replaces = replaces;
this.options = options;
}
getEventType(info) {
if (info === "checkbox") {
return "change";
}
return "input";
}
fileRemoveHandler(file, field) {
let that = this.self;
that.file[field] = that.file[field].filter((item) => item !== file);
that.file = Object.assign({}, that.file);
}
extraProps(info) {
let that = this.self;
let props = {};
if (info.edit_input === "file" || info.edit_input === "files") {
props.fileList = that.file[info.field];
props.beforeUpload = (file) => {
if (file.size / 1000 > 500) {
that.$message({
type: "warning",
message: "上传图片大小超过500kb！",
});
return false;
}
};
props.onSuccess = (response, file, fileList) => {
that.file[info.field] = fileList;
};
props.onRemove = (file, fileList) => {
that.file[info.field] = fileList;
};
props.onError = (err, file, fileList) => {
that.file[info.field] = fileList;
that.$message({
type: "warning",
message: err,
});
};
}
return props;
}
optionsRender(h, info) {
let that = this.self;
if (info.edit_input === "checkbox" || info.edit_input === "radio") {
return info._params && info._params instanceof Array
? info._params.map((i) =>
h("el-option", {
props: {
label:
i.name ||
i.mingcheng ||
i.label ||
i.key ||
i.value ||
i.id ||
i.no,
value: i.id || i.value,
},
})
)
: [];
}
if (info.edit_input === "file" || info.edit_input === "files") {
return [
h(
"el-button",
{
slot: "trigger",
props: {
size: "small",
type: "primary",
},
},
"选取文件"
),
h(
"el-button",
{
style: {
"margin-left": "10px",
},
props: {
size: "small",
type: "success",
},
on: {
["click"]: (e) => {
that.$refs[`elEdit_${info.field}`].submit();
},
},
},
"上传到服务器"
),
h(
"div",
{
class: "el-upload__tip",
slot: "tip",
},
"文件不超过500kb"
),
];
}
}
render() {
let that = this.self;
const h = this.$createElement;
return h(
"el-dialog",
{
class: "dialog",
ref: "dialog",
props: {
top: "8vh",
title: that.title
? that.title
: that.type === "add"
? "新增"
: "编辑",
visible: that.dialogVisible,
width: this.options?.width ? this.options.width : "800px",
},
on: {
"update:visible": (val) => {
that.dialogVisible = val;
},
},
},
[
h(
"el-scrollbar",
{
style: {
height: "58vh",
},
},
[
h(
"el-form",
{
class: "form-body",
ref: "elForm",
style: {
"padding-right": "12px",
},
props: {
model: that.form,
labelWidth: "80px",
rules: that.rules,
labelPosition: "right",
size: "small",
},
},
(() => {
let dom = [];
(this.options?.formInfo ? this.options.formInfo : that.formInfo)
.filter((i) => i.form_show)
.forEach((i, index) => {
let replace = this.replaces.find((j) => j.key === i.field);
dom.push(
h(
"el-form-item",
{
ref: `elFormItem${i.field}`,
style: {
width: "100%",
},
props: {
label: i.name,
prop: i.field,
required:
i.validation instanceof Array
? !!i.validation.find((i) => i === "required")
: false,
},
},
replace && replace.render
? [replace.render]
: [
h(
domMap.get(i.edit_input),
{
ref: `elEdit_${i.field}`,
style: {
width: "100%",
},
props: {
...addPropsMap.get(i.edit_input),
...this.extraProps(i),
placeholder: i.help,
value: that.form[i.field],
readonly: that.type === "show",
//disabled: that.type === 'show',
},
attrs: {
placeholder: i.help || `请填写${i.name}`,
},
on: {
[this.getEventType(i.edit_input)]: (
e
) => {
if (i.field) {
that.form[i.field] = e;
that.form = Object.assign(
{},
that.form
);
}
},
},
scopedSlots:
i.edit_input === "file" ||
i.edit_input === "files"
? {
file: (scope) => {
let { file } = scope;
return [
h("div", {}, [
h("i", {
class: {
"el-icon-circle-check":
file.status ===
"success",
"el-icon-loading":
file.status ===
"uploading",
},
style: {
color:
file.status ===
"success"
? "green"
: "",
},
}),
h(
"a",
{
attrs: {
href: file.url,
download: file.name,
},
class: {
"uploaded-a":
file.status ===
"success",
},
style: {
padding: "0 4px",
},
},
file.name
),
]),
h("i", {
class: "el-icon-close",
on: {
["click"]: () =>
this.fileRemoveHandler(
file,
i.field
),
},
}),
];
},
}
: "",
},
this.optionsRender(h, i)
),
]
)
);
});
this.replaces.forEach((replace) => {
let info = that.formInfo.find((i) => i.field === replace.key);
if (!info) {
if (replace.label) {
dom.push(
h(
"el-form-item",
{
ref: `elFormItem${replace.key}`,
style: {
width: "100%",
...replace.rowStyle,
},
props: {
label: replace.label,
prop: replace.key,
},
},
[replace.render]
)
);
} else {
dom.push(replace.render);
}
}
});
return dom;
})()
),
]
),
h("template", { slot: "footer" }, [
h(
"el-button",
{
props: {
size: "mini",
},
on: {
click: () => (that.dialogVisible = false),
},
},
"取 消"
),
h(
"el-button",
{
props: {
type: "warning",
plain: true,
size: "mini",
},
on: {
click: () => that.init(),
},
},
"重 置"
),
h(
"el-button",
{
props: {
type: "primary",
size: "mini",
},
on: {
click: that.submit,
},
},
"确 定"
),
]),
]
);
}
}

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

@ -1,13 +1,13 @@
<script>
import linkPickModal from './linkPickModal.vue'
import {save, show, index, destroy} from "@/api/system/baseForm";
import linkPickModal from "./linkPickModal.vue";
import { save, show, index, destroy } from "@/api/system/baseForm";
import { getparameter } from "@/api/system/dictionary";
import { domMap } from "@/const/inputType";
import { addPropsMap } from "@/const/addProps";
import {deepCopy} from "@/utils";
import { deepCopy } from "@/utils";
export default {
components: {
linkPickModal
linkPickModal,
},
props: {
formInfo: {
@ -17,7 +17,7 @@ export default {
tableName: String,
},
render(h) {
return h('div',[
return h("div", [
h(
"el-dialog",
{
@ -47,7 +47,9 @@ export default {
},
(() => {
let dom = [];
this.formInfo.filter(i => i.form_show).forEach((i, index) => {
this.formInfo
.filter((i) => i.form_show)
.forEach((i, index) => {
dom.push(
h(
"el-form-item",
@ -66,38 +68,74 @@ export default {
},
},
this.$scopedSlots[i.field]
? this.$scopedSlots[i.field]({ fieldInfo: i, form: this.form, file: this.file })
: i._relations ?
[
h('el-input',{
? this.$scopedSlots[i.field]({
fieldInfo: i,
form: this.form,
file: this.file,
})
: i._relations
? [
h(
"el-input",
{
props: {
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() : ''
value:
i._relations.link_relation ===
"newHasOne" ||
i._relations.link_relation === "hasOne"
? this.originalForm[
i._relations.link_with_name
]?.name ||
this.originalForm[
i._relations.link_with_name
]?.mingcheng ||
this.originalForm[
i._relations.link_with_name
]?.no ||
this.originalForm[
i._relations.link_with_name
]?.id
: this.originalForm[
i._relations.link_with_name
]
?.map(
(j) =>
j[i._relations.custom_form_field]
)
?.toString(),
},
on: {
// ['focus']:e => {
// this.$refs['linkPickModal'].show()
// }
}
},[
h('el-button',{
},
},
[
h("el-button", {
props: {
icon: 'el-icon-document'
icon: "el-icon-arrow-right",
},
slot: 'append',
slot: "append",
on: {
click:e => {
click: (e) => {
this.pickedLinkField.field = i.field;
this.pickedLinkField.linkType = i._relations.link_relation;
this.pickedLinkField.linkTableName = i._relations.link_table_name;
this.$refs['linkPickModal'].show()
}
}
})
])
this.pickedLinkField.linkType =
i._relations.link_relation;
this.pickedLinkField.linkTableName =
i._relations.link_table_name;
this.pickedLinkField.originalRows =
this.originalForm[
i._relations.link_with_name
];
this.$refs["linkPickModal"].show();
},
},
}),
]
:
[
),
]
: [
h(
domMap.get(i.edit_input),
{
@ -156,7 +194,7 @@ export default {
file.status === "success",
},
style: {
'padding': '0 4px'
padding: "0 4px",
},
},
file.name
@ -224,21 +262,22 @@ export default {
]),
]
),
h('linkPickModal',{
ref: 'linkPickModal',
h("linkPickModal", {
ref: "linkPickModal",
props: {
linkType: this.pickedLinkField.linkType,
linkTableName: this.pickedLinkField.linkTableName,
field: this.pickedLinkField.field
field: this.pickedLinkField.field,
originalRows: this.pickedLinkField.originalRows,
},
on: {
['confirm']:({ field, value }) => {
this.form[field] = value
console.log(this.form)
}
}
})
])
["confirm"]: ({ field, value }) => {
this.form[field] = value;
console.log(this.form);
},
},
}),
]);
},
data() {
return {
@ -251,10 +290,11 @@ export default {
file: {},
pickedLinkField: {
linkType: '',
linkTableName: '',
field: '',
}
linkType: "",
linkTableName: "",
field: "",
originalRows: [],
},
};
},
methods: {
@ -277,8 +317,11 @@ export default {
? info._params.map((i) =>
h("el-option", {
props: {
label: i.key || i.value || i.name || i.no || i.mingcheng || i.id,
value: info._relations ? i[info._relations.foreign_key] : i.value,
label:
i.key || i.value || i.name || i.no || i.mingcheng || i.id,
value: info._relations
? i[info._relations.foreign_key]
: i.value,
},
})
)
@ -398,21 +441,25 @@ export default {
this.form = Object.assign({}, this.form);
this.formInfo.forEach((i) => {
if (i && (i.edit_input === "file" || i.edit_input === 'files')) {
res[i._relations.link_with_name] ? (
this.file[i.field] = res[i._relations.link_with_name] instanceof Array ? res[i._relations.link_with_name].map(i => {
if (i && (i.edit_input === "file" || i.edit_input === "files")) {
res[i._relations.link_with_name]
? (this.file[i.field] =
res[i._relations.link_with_name] instanceof Array
? res[i._relations.link_with_name].map((i) => {
return {
name: i?.original_name,
url: i?.url,
response: i
}
}) : [{
response: i,
};
})
: [
{
name: res[i._relations.link_with_name]?.original_name,
url: res[i._relations.link_with_name]?.url,
response: res[i._relations.link_with_name]
}]
) : this.file[i.field] = []
response: res[i._relations.link_with_name],
},
])
: (this.file[i.field] = []);
}
});
@ -477,19 +524,19 @@ export default {
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;
// 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,
[info._relations.custom_form_field]: i,
//...copyRelation,
};
});
}
@ -508,26 +555,26 @@ export default {
},
];
} 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,
},
];
}
// 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];
//delete copyForm[info.field];
}
if (!copyForm[info._relations?.link_with_name]) {
delete copyForm[info._relations?.link_with_name];
@ -589,7 +636,10 @@ export default {
}
}
});
document.documentElement.style.setProperty('--column-num', Math.floor(newVal.length / 8).toString())
document.documentElement.style.setProperty(
"--column-num",
Math.floor(newVal.length / 8).toString()
);
},
//immediate: true,
},

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

@ -2,12 +2,28 @@
<div>
<el-dialog :visible.sync="dialogVisible">
<template>
<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>
<xy-table
:is-first-req="false"
ref="table"
:row-key="(row) => row.id"
:height="380"
:action="index"
:delay-req="true"
:req-opt="select"
:table-item="columns"
@row-click="rowPick"
@loaded="selectRows"
@select="selectBk"
></xy-table>
</template>
<template #footer>
<span>
<el-button size="mini" @click="dialogVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="confirm">确 定</el-button>
<el-button size="mini" @click="dialogVisible = false"
>取 消</el-button
>
<el-button size="mini" type="primary" @click="confirm"
>确 定</el-button
>
</span>
</template>
</el-dialog>
@ -16,22 +32,27 @@
<script>
import { index } from "@/api/system/baseForm";
import { index as customFormIndex , show } from "@/api/system/customForm";
import { index as customFormIndex, show } from "@/api/system/customForm";
export default {
props: {
linkType: String,
linkTableName: String,
field: String
field: String,
originalRows: {
default: () => [],
type: Array,
},
},
data() {
return {
tempRow: {},
dialogVisible: false,
select: {
table_name: '',
table_id: ''
table_name: "",
table_id: "",
},
columns: []
columns: [],
originalRowIds: [],
};
},
methods: {
@ -43,43 +64,71 @@ export default {
this.dialogVisible = false;
},
async getDataTableName () {
const tables = (await customFormIndex({
async getDataTableName() {
if (this.linkType === "hasMany" || this.linkType === "newHasMany") {
const tables = (
await customFormIndex({
page: 1,
page_size: 999
}))?.data
page_size: 999,
})
)?.data;
const id = tables?.find(i => i.table_name === this.linkTableName)?.id
const res = (await show({
id
},false))?.relation[0]?.link_table_name
const id = tables?.find((i) => i.table_name === this.linkTableName)?.id;
const res = (
await show(
{
id,
},
false
)
)?.relation[0]?.link_table_name;
this.select.table_name = res;
this.select.table_id = tables.find(
(i) => i.table_name === this.select.table_name
)?.id;
}
if (this.linkType === "hasOne" || this.linkType === "newHasOne") {
const tables = (
await customFormIndex({
page: 1,
page_size: 999,
})
)?.data;
this.select.table_name = res
this.select.table_id = tables.find(i => i.table_name === this.select.table_name)?.id
const table = tables?.find((i) => i.table_name === this.linkTableName);
this.select.table_name = table.table_name;
this.select.table_id = table.id;
}
},
async getColumns() {
const res = await show(
{
id: this.select.table_id,
},
async getColumns () {
const res = await show({
id: this.select.table_id
},false)
false
);
console.log(res)
this.columns = res.fields?.filter((i) => i.list_show).map(i => {
console.log(res);
this.columns = res.fields
?.filter((i) => i.list_show)
.map((i) => {
let linkOb = {};
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)
})
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>
)
}
return <span>{paramMap.get(row[i.field]?.toString())}</span>;
};
}
return Object.assign(
@ -90,50 +139,74 @@ export default {
fixed: i.is_fixed,
},
linkOb
)
})
);
});
this.columns.unshift({
type: 'index',
width: 50
})
type: "index",
width: 50,
});
if (this.linkType === 'hasMany' || this.linkType === 'newHasMany') {
if (this.linkType === "hasMany" || this.linkType === "newHasMany") {
this.columns.unshift({
type: 'selection',
type: "selection",
width: 50,
reserveSelection: true
})
reserveSelection: true,
});
}
},
rowPick (row) {
this.tempRow = row
selectRows() {
this.originalRowIds.forEach((id) => {
let data = this.$refs["table"].getListData();
let row = data.find((i) => i.id === id);
if (row) {
this.$refs["table"].toggleRowSelection(row);
}
});
},
confirm () {
(this.linkType === 'hasMany' || this.linkType === 'newHasMany') ? this.$emit('confirm',{
field: this.field,
value: this.$refs['table'].getSelection()
}) : this.$emit('confirm',{
rowPick({ row }) {
this.tempRow = row;
},
selectBk (selections, row) {
if (!selections.find(i => i.id === row.id)) {
this.originalRowIds.splice(this.originalRowIds.indexOf(row.id),1)
}
},
confirm() {
this.linkType === "hasMany" || this.linkType === "newHasMany"
? this.$emit("confirm", {
field: this.field,
value: this.tempRow
value: Array.from(new Set([...this.$refs["table"].getSelection()?.map(i => i.id),...this.originalRowIds])),
})
: this.$emit("confirm", {
field: this.field,
value: this.tempRow.id,
});
this.dialogVisible = false;
}
},
},
computed: {},
watch: {
async linkTableName (newVal) {
async linkTableName(newVal) {
await this.getDataTableName();
await this.getColumns();
await this.$refs["table"].getTableData();
},
dialogVisible (newVal) {
dialogVisible(newVal) {
if (newVal) {
} else {
this.tempRow = {}
}
this.tempRow = {};
this.$refs['table'].clearSelection();
}
},
originalRows (newVal) {
this.originalRowIds = newVal.map(i => i[this.field])
this.selectRows();
}
},
};
</script>

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

@ -560,6 +560,7 @@ export default {
width: 60,
label: "序号",
});
},
},

Write Preview
Loading…
Cancel
Save