|
|
import { CreateElement, VNode } from "vue";
|
|
|
import moment from "moment";
|
|
|
import { getToken } from "@/utils/auth";
|
|
|
import { deepCopy, formatFileSize, formatTime, debounce } from "@/utils/index";
|
|
|
import { uploadSize } from "@/settings";
|
|
|
import axios from "axios";
|
|
|
import { flowList } from "@/api/flow";
|
|
|
import MobilePicker from '@/components/MobilePicker/index.vue';
|
|
|
import MobileMultipleSelect from "@/components/MobileMultipleSelect/index.vue";
|
|
|
import { Message } from 'element-ui'
|
|
|
function isJSON(str) {
|
|
|
if (typeof str !== 'string') return false;
|
|
|
try {
|
|
|
const result = JSON.parse(str);
|
|
|
const type = Object.prototype.toString.call(result);
|
|
|
return type === '[object Object]' || type === '[object Array]';
|
|
|
} catch (e) {
|
|
|
return false;
|
|
|
}
|
|
|
}
|
|
|
/**
|
|
|
* @param {String} device 'desktop' | 'mobile'
|
|
|
* @param {Object} info field参数
|
|
|
* @param {CreateElement} h
|
|
|
* @param {Object} row 子表单的row
|
|
|
* @param {Boolean} pWrite 主表单中子表单字段是否可写
|
|
|
* @param {Boolean} pReadable
|
|
|
* @return {VNode} 主表单包含el-form-item 子表单表单组件
|
|
|
**/
|
|
|
export default function formBuilder(
|
|
|
device,
|
|
|
info,
|
|
|
h,
|
|
|
row,
|
|
|
pWrite = false,
|
|
|
pReadable = false,
|
|
|
pname
|
|
|
) {
|
|
|
let target = row ? row : this.form;
|
|
|
let formItem;
|
|
|
//下拉选项
|
|
|
let options = [];
|
|
|
if (info?.selection_model) {
|
|
|
options = info.selection_model_items || [];
|
|
|
} else if (info?.stub) {
|
|
|
options = info?.stub?.split(/\r\n/) || [];
|
|
|
}
|
|
|
if (device === "desktop") {
|
|
|
// 可写并且不为查看和子表单下
|
|
|
if (
|
|
|
info._writeable ||
|
|
|
(info.type === "relation" && info._readable) ||
|
|
|
pWrite
|
|
|
) {
|
|
|
switch (info.type) {
|
|
|
case "text":
|
|
|
formItem = h("el-input", {
|
|
|
props: {
|
|
|
value: target[info.name],
|
|
|
clearable: true,
|
|
|
placeholder: info.help_text,
|
|
|
},
|
|
|
attrs: {
|
|
|
placeholder: info.help_text,
|
|
|
},
|
|
|
on: {
|
|
|
input: (e) => {
|
|
|
this.$set(target, info.name, e);
|
|
|
},
|
|
|
},
|
|
|
});
|
|
|
break;
|
|
|
case "textarea":
|
|
|
formItem = h("el-input", {
|
|
|
props: {
|
|
|
type: "textarea",
|
|
|
autosize: {
|
|
|
minRows: 2,
|
|
|
},
|
|
|
value: target[info.name],
|
|
|
clearable: true,
|
|
|
placeholder: info.help_text,
|
|
|
},
|
|
|
attrs: {
|
|
|
placeholder: info.help_text,
|
|
|
},
|
|
|
on: {
|
|
|
input: (e) => {
|
|
|
this.$set(target, info.name, e);
|
|
|
},
|
|
|
},
|
|
|
});
|
|
|
break;
|
|
|
case "date":
|
|
|
formItem = h("el-date-picker", {
|
|
|
props: {
|
|
|
type: "date",
|
|
|
"value-format": "yyyy-MM-dd",
|
|
|
format: "yyyy年MM月dd日",
|
|
|
value: target[info.name],
|
|
|
clearable: true,
|
|
|
placeholder: info.help_text,
|
|
|
"picker-options": {
|
|
|
shortcuts: this.shortcuts,
|
|
|
},
|
|
|
},
|
|
|
attrs: {
|
|
|
placeholder: info.help_text,
|
|
|
},
|
|
|
style: {
|
|
|
width: "100%",
|
|
|
},
|
|
|
on: {
|
|
|
input: (e) => {
|
|
|
this.$set(target, info.name, e);
|
|
|
},
|
|
|
},
|
|
|
});
|
|
|
break;
|
|
|
case "datetime":
|
|
|
formItem = h("el-date-picker", {
|
|
|
props: {
|
|
|
type: "datetime",
|
|
|
"value-format": "yyyy-MM-dd HH:mm:ss",
|
|
|
format: "yyyy-MM-dd HH:mm",
|
|
|
value: target[info.name],
|
|
|
clearable: true,
|
|
|
placeholder: info.help_text,
|
|
|
"picker-options": {
|
|
|
shortcuts: this.shortcuts,
|
|
|
},
|
|
|
},
|
|
|
style: {
|
|
|
width: "100%",
|
|
|
},
|
|
|
attrs: {
|
|
|
placeholder: info.help_text,
|
|
|
},
|
|
|
on: {
|
|
|
input: (e) => {
|
|
|
this.$set(target, info.name, e);
|
|
|
},
|
|
|
},
|
|
|
});
|
|
|
break;
|
|
|
case "choice":
|
|
|
case "select":
|
|
|
const getSelectValue = () => {
|
|
|
if (!!info.multiple) {
|
|
|
return target[info.name]
|
|
|
? target[info.name]
|
|
|
.toString()
|
|
|
?.split(/,|\|/)
|
|
|
.map((i) => {
|
|
|
return ((isNaN(Number(i)) || !i) ? i : Number(i))
|
|
|
})
|
|
|
: [];
|
|
|
} else {
|
|
|
return (isNaN(Number(target[info.name])) || !target[info.name])
|
|
|
? target[info.name]
|
|
|
: Number(target[info.name]);
|
|
|
}
|
|
|
};
|
|
|
formItem = h(
|
|
|
"el-select",
|
|
|
{
|
|
|
props: {
|
|
|
value: getSelectValue(),
|
|
|
clearable: true,
|
|
|
placeholder: info.help_text,
|
|
|
multiple: !!info.multiple,
|
|
|
// "multiple-limit": info.multiple,
|
|
|
filterable: true,
|
|
|
"value-key": "id",
|
|
|
"reserve-keyword": true,
|
|
|
"allow-create": !!info.is_select2_tag,
|
|
|
"default-first-option": true,
|
|
|
},
|
|
|
style: {
|
|
|
width: "100%",
|
|
|
},
|
|
|
attrs: {
|
|
|
placeholder: info.help_text,
|
|
|
},
|
|
|
on: {
|
|
|
input: (e) => {
|
|
|
this.$set(target, info.name, e.toString());
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
options.map((option) =>
|
|
|
h("el-option", {
|
|
|
key: typeof option === "object" ? option.id : option,
|
|
|
props: {
|
|
|
label: typeof option === "object" ? option.name : option,
|
|
|
value: typeof option === "object" ? option.id : option,
|
|
|
},
|
|
|
})
|
|
|
)
|
|
|
);
|
|
|
break;
|
|
|
case "radio":
|
|
|
formItem = h(
|
|
|
"el-radio-group",
|
|
|
{
|
|
|
props: {
|
|
|
value: target[info.name],
|
|
|
},
|
|
|
attrs: {
|
|
|
placeholder: info.help_text,
|
|
|
},
|
|
|
on: {
|
|
|
input: (e) => {
|
|
|
this.$set(target, info.name, e);
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
options.map((option) =>
|
|
|
h(
|
|
|
"el-radio",
|
|
|
{
|
|
|
props: {
|
|
|
label: typeof option === "object" ? option.id : option,
|
|
|
},
|
|
|
},
|
|
|
typeof option === "object" ? option.name : option
|
|
|
)
|
|
|
)
|
|
|
);
|
|
|
break;
|
|
|
case "file":
|
|
|
formItem = row
|
|
|
? h("vxe-upload", {
|
|
|
props: {
|
|
|
value: row[info.name],
|
|
|
"progress-text": "{percent}%",
|
|
|
"more-config": { maxCount: 1, layout: "horizontal" },
|
|
|
"show-button-text": false,
|
|
|
"limit-size": uploadSize / 1024 / 1024, // vxeupload 单位Mb
|
|
|
"limit-count": info.multiple ? 20 : 1,
|
|
|
multiple: !!info.multiple,
|
|
|
"name-field": "original_name",
|
|
|
readonly: pReadable,
|
|
|
"upload-method": ({ file }) => {
|
|
|
const formData = new FormData();
|
|
|
formData.append("file", file);
|
|
|
window.$_uploading = true;
|
|
|
return axios
|
|
|
.post(process.env.VUE_APP_UPLOAD_API, formData, {
|
|
|
headers: {
|
|
|
Authorization: `Bearer ${getToken()}`,
|
|
|
},
|
|
|
})
|
|
|
.then((response) => {
|
|
|
window.$_uploading = false;
|
|
|
if (response.status === 200 && !response.data.code) {
|
|
|
if (!(row[info.name] instanceof Array)) {
|
|
|
row[info.name] = [];
|
|
|
}
|
|
|
row[info.name].push({
|
|
|
response: response.data.data,
|
|
|
name: response.data.data.original_name,
|
|
|
url: response.data.data.url,
|
|
|
original_name: response.data.data.original_name,
|
|
|
});
|
|
|
if (
|
|
|
row[info.name].length > (info.multiple ? 20 : 1)
|
|
|
) {
|
|
|
row[info.name].shift();
|
|
|
}
|
|
|
} else {
|
|
|
this.$message.error("上传失败");
|
|
|
}
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
window.$_uploading = false;
|
|
|
});
|
|
|
},
|
|
|
"remove-method": (_) => {
|
|
|
row[info.name] = [];
|
|
|
},
|
|
|
},
|
|
|
})
|
|
|
: h(
|
|
|
"el-upload",
|
|
|
{
|
|
|
props: {
|
|
|
action: process.env.VUE_APP_UPLOAD_API,
|
|
|
headers: {
|
|
|
Authorization: `Bearer ${getToken()}`,
|
|
|
},
|
|
|
accept:
|
|
|
"application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
|
|
multiple: !!info.multiple,
|
|
|
limit: info.multiple ? 20 : 1,
|
|
|
fileList:
|
|
|
this.form[info.name] instanceof Array
|
|
|
? this.form[info.name]?.map((i) => {
|
|
|
if (i.hasOwnProperty("original_name")) {
|
|
|
i.name = i.original_name;
|
|
|
}
|
|
|
return i;
|
|
|
})
|
|
|
: [],
|
|
|
beforeUpload: (file) => {
|
|
|
if (file.size > uploadSize) {
|
|
|
this.$message({
|
|
|
type: "warning",
|
|
|
message: `上传图片大小超过${formatFileSize(
|
|
|
uploadSize
|
|
|
)}！`,
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
window.$_uploading = true;
|
|
|
},
|
|
|
onSuccess: (response, file, fileList) => {
|
|
|
window.$_uploading = false;
|
|
|
fileList.forEach((file) => {
|
|
|
if (file.response?.data && !file.response?.code) {
|
|
|
file.response = file.response?.data;
|
|
|
file.url = file.response?.url;
|
|
|
}
|
|
|
});
|
|
|
this.form[info.name] = fileList;
|
|
|
},
|
|
|
onRemove: (file, fileList) => {
|
|
|
this.form[info.name] = fileList;
|
|
|
},
|
|
|
onError: (err, file, fileList) => {
|
|
|
window.$_uploading = false;
|
|
|
this.form[info.name] = fileList;
|
|
|
this.$message({
|
|
|
type: "warning",
|
|
|
message: err,
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
scopedSlots: {
|
|
|
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",
|
|
|
{
|
|
|
class: {
|
|
|
"uploaded-a": file.status === "success",
|
|
|
},
|
|
|
style: {
|
|
|
padding: "0 4px",
|
|
|
},
|
|
|
on: {
|
|
|
click: (_) => {
|
|
|
this.$bus.$emit("online-file", file.url);
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
file.original_name || file.name
|
|
|
),
|
|
|
]),
|
|
|
h("i", {
|
|
|
class: "el-icon-close",
|
|
|
on: {
|
|
|
["click"]: () => {
|
|
|
if (file.status === "uploading") return;
|
|
|
this.form[info.name].splice(
|
|
|
this.form[info.name].indexOf(file),
|
|
|
1
|
|
|
);
|
|
|
},
|
|
|
},
|
|
|
}),
|
|
|
];
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
[
|
|
|
h(
|
|
|
"el-button",
|
|
|
{
|
|
|
slot: "trigger",
|
|
|
props: {
|
|
|
size: "small",
|
|
|
type: "primary",
|
|
|
},
|
|
|
},
|
|
|
"选取文件"
|
|
|
),
|
|
|
h(
|
|
|
"div",
|
|
|
{
|
|
|
class: "el-upload__tip",
|
|
|
slot: "tip",
|
|
|
},
|
|
|
`文件不超过${formatFileSize(uploadSize)}`
|
|
|
),
|
|
|
]
|
|
|
);
|
|
|
break;
|
|
|
case "label":
|
|
|
formItem = h(
|
|
|
"div",
|
|
|
{
|
|
|
props: {
|
|
|
type: "primary",
|
|
|
},
|
|
|
},
|
|
|
info.label
|
|
|
);
|
|
|
break;
|
|
|
case "static":
|
|
|
formItem = h(
|
|
|
"el-link",
|
|
|
{
|
|
|
props: {
|
|
|
type: "primary",
|
|
|
},
|
|
|
attrs: {
|
|
|
href: target[info.name],
|
|
|
target: "_blank",
|
|
|
},
|
|
|
},
|
|
|
info.label
|
|
|
);
|
|
|
break;
|
|
|
case "hr":
|
|
|
formItem = h("el-divider", {}, info.label);
|
|
|
break;
|
|
|
case "relation-flow":
|
|
|
if (!this.flows[info.name]) {
|
|
|
let extraParam = {}
|
|
|
if (isJSON(info.stub)) {
|
|
|
extraParam = JSON.parse(info.stub)
|
|
|
}
|
|
|
flowList("all", {
|
|
|
page: 1,
|
|
|
page_size: 9999,
|
|
|
is_simple: 1,
|
|
|
custom_model_id: isJSON(info.stub) ? '' : info.stub,
|
|
|
is_auth: 1,
|
|
|
ids:target[info.name]?target[info.name]:'',
|
|
|
...extraParam
|
|
|
}).then((res) => {
|
|
|
this.$set(this.flows, info.name, res.data.data);
|
|
|
});
|
|
|
}
|
|
|
formItem = h(
|
|
|
"el-select",
|
|
|
{
|
|
|
ref: `relation-flow-${info.name}`,
|
|
|
props: {
|
|
|
value: target[info.name]
|
|
|
? target[info.name]
|
|
|
.toString()
|
|
|
?.split(",")
|
|
|
.map((i) => Number(i))
|
|
|
: [],
|
|
|
clearable: true,
|
|
|
placeholder: info.help_text || '输入标题或编号搜索流程..',
|
|
|
multiple: true,
|
|
|
filterable: true,
|
|
|
"reserve-keyword": true,
|
|
|
"filter-method": debounce((query) => {
|
|
|
this.tempFlowList = this.flows[info.name].filter(flow => new RegExp(query, 'i').test(flow.title + flow.no))
|
|
|
console.log(query)
|
|
|
if (this.tempFlowList.length === 0) {
|
|
|
Message.warning("未搜索到匹配流程")
|
|
|
}
|
|
|
}, 500).bind(this)
|
|
|
},
|
|
|
attrs: {
|
|
|
placeholder: info.help_text,
|
|
|
},
|
|
|
style: {
|
|
|
width: "100%",
|
|
|
},
|
|
|
on: {
|
|
|
input: (e) => {
|
|
|
this.$set(target, info.name, e.toString());
|
|
|
this.tempFlowList.length = 0;
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
(this.tempFlowList.length > 0 ? this.tempFlowList : this.flows[info.name])?.map((option) =>
|
|
|
h("el-option", {
|
|
|
props: {
|
|
|
label: option.title,
|
|
|
value: option.id,
|
|
|
},
|
|
|
}, [
|
|
|
h("div", {
|
|
|
}, [
|
|
|
h("span", {},option.title),
|
|
|
h("el-button", {
|
|
|
style: {
|
|
|
float: 'right'
|
|
|
},
|
|
|
props: {
|
|
|
type: 'primary',
|
|
|
size: 'mini',
|
|
|
icon: 'el-icon-search'
|
|
|
},
|
|
|
on: {
|
|
|
click: e => {
|
|
|
e.stopPropagation()
|
|
|
let target = this.$router.resolve({
|
|
|
path: "/flow/detail",
|
|
|
query: {
|
|
|
module_id: option.custom_model_id,
|
|
|
flow_id: option.id,
|
|
|
isSinglePage: 1,
|
|
|
},
|
|
|
});
|
|
|
this.modalRender = (h) =>
|
|
|
h("iframe", {
|
|
|
attrs: {
|
|
|
src: target.href,
|
|
|
},
|
|
|
style: {
|
|
|
border: "none",
|
|
|
width: "100%",
|
|
|
height: "100%",
|
|
|
},
|
|
|
});
|
|
|
this.isShowModal = true;
|
|
|
this.$refs[`relation-flow-${info.name}`]?.blur()
|
|
|
}
|
|
|
}
|
|
|
}, '查看')
|
|
|
])
|
|
|
])
|
|
|
)
|
|
|
);
|
|
|
break;
|
|
|
case "relation":
|
|
|
formItem = h(
|
|
|
"vxe-table",
|
|
|
{
|
|
|
ref: `subForm-${info.name}`,
|
|
|
style: {
|
|
|
"margin-top": "10px",
|
|
|
},
|
|
|
props: {
|
|
|
"min-height": "200px",
|
|
|
border: true,
|
|
|
stripe: true,
|
|
|
data:
|
|
|
this.form[info.name] &&
|
|
|
typeof this.form[info.name] !== "string"
|
|
|
? this.form[info.name]
|
|
|
: [],
|
|
|
"keep-source": true,
|
|
|
"column-config": { resizable: true },
|
|
|
"show-overflow": true,
|
|
|
"edit-rules": info._writeable
|
|
|
? this.subRules[`${info.name}_rules`]
|
|
|
: {},
|
|
|
"edit-config": info._writeable
|
|
|
? {
|
|
|
trigger: "click",
|
|
|
mode: "row",
|
|
|
showStatus: false,
|
|
|
isHover: true,
|
|
|
autoClear: false,
|
|
|
}
|
|
|
: {},
|
|
|
},
|
|
|
on: {
|
|
|
"edit-closed": ({ row, column }) => {
|
|
|
const $table = this.$refs[`subForm-${info.name}`];
|
|
|
if ($table) {
|
|
|
this.$set(
|
|
|
this.form,
|
|
|
info.name,
|
|
|
this.$refs[`subForm-${info.name}`].tableData
|
|
|
);
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
[
|
|
|
info._writeable
|
|
|
? h(
|
|
|
"vxe-column",
|
|
|
{
|
|
|
props: {
|
|
|
width: 56,
|
|
|
align: "center",
|
|
|
},
|
|
|
scopedSlots: {
|
|
|
default: ({ row }) => {
|
|
|
return h("el-button", {
|
|
|
slot: "default",
|
|
|
style: {
|
|
|
padding: "9px",
|
|
|
},
|
|
|
props: {
|
|
|
type: "danger",
|
|
|
size: "small",
|
|
|
icon: "el-icon-minus",
|
|
|
},
|
|
|
on: {
|
|
|
click: async (_) => {
|
|
|
const $table =
|
|
|
this.$refs[`subForm-${info.name}`];
|
|
|
if ($table) {
|
|
|
await $table.remove(row);
|
|
|
this.form[info.name] =
|
|
|
$table.getTableData()?.tableData;
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
[
|
|
|
h("el-button", {
|
|
|
slot: "header",
|
|
|
style: {
|
|
|
padding: "9px",
|
|
|
},
|
|
|
props: {
|
|
|
type: "primary",
|
|
|
size: "small",
|
|
|
icon: "el-icon-plus",
|
|
|
},
|
|
|
on: {
|
|
|
click: async (_) => {
|
|
|
const $table = this.$refs[`subForm-${info.name}`];
|
|
|
if ($table) {
|
|
|
const record = {};
|
|
|
this.form[info.name].unshift(record);
|
|
|
// 临时数据不好验证长度
|
|
|
// const { row: newRow } = await $table.insert(
|
|
|
// record
|
|
|
// );
|
|
|
await this.$nextTick();
|
|
|
await $table.setEditRow(record);
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
}),
|
|
|
]
|
|
|
)
|
|
|
: "",
|
|
|
...this.subForm
|
|
|
.get(info.sub_custom_model_id)
|
|
|
?.customModel?.fields?.map((subField, subIndex) =>
|
|
|
h("vxe-column", {
|
|
|
props: {
|
|
|
field: subField.name,
|
|
|
title: subField.label,
|
|
|
align: "center",
|
|
|
"min-width": "180",
|
|
|
"edit-render": {},
|
|
|
},
|
|
|
scopedSlots: {
|
|
|
edit: ({ row: myrow }) => {
|
|
|
return formBuilder.bind(this)(
|
|
|
device,
|
|
|
subField,
|
|
|
h,
|
|
|
myrow,
|
|
|
info._writeable,
|
|
|
false
|
|
|
);
|
|
|
},
|
|
|
[["file", "choices", "choice", "select", "radio"].indexOf(
|
|
|
subField.type
|
|
|
) !== -1
|
|
|
? "default"
|
|
|
: false]: ({ row: myrow }) => {
|
|
|
return formBuilder.bind(this)(
|
|
|
device,
|
|
|
subField,
|
|
|
h,
|
|
|
myrow,
|
|
|
false,
|
|
|
true
|
|
|
);
|
|
|
},
|
|
|
},
|
|
|
})
|
|
|
),
|
|
|
]
|
|
|
);
|
|
|
break;
|
|
|
}
|
|
|
} else if (info._readable || pReadable) {
|
|
|
switch (info.type) {
|
|
|
case "date":
|
|
|
formItem = h(
|
|
|
"span",
|
|
|
{
|
|
|
style: {
|
|
|
color: "#333",
|
|
|
},
|
|
|
},
|
|
|
target[info.name]
|
|
|
? moment(target[info.name]).format("YYYY年MM月DD日")
|
|
|
: ""
|
|
|
);
|
|
|
break;
|
|
|
case "datetime":
|
|
|
formItem = h(
|
|
|
"span",
|
|
|
{
|
|
|
style: {
|
|
|
color: "#333",
|
|
|
},
|
|
|
},
|
|
|
target[info.name]
|
|
|
? moment(target[info.name]).format("YYYY年MM月DD日 HH时mm分")
|
|
|
: ""
|
|
|
);
|
|
|
break;
|
|
|
case "choice":
|
|
|
case "select":
|
|
|
const getDetailSelectValue = () => {
|
|
|
let res = "";
|
|
|
if (!!info.multiple) {
|
|
|
res = target[info.name]
|
|
|
? target[info.name]
|
|
|
.toString()
|
|
|
?.split(/,|\|/)
|
|
|
.map((i) => ((isNaN(Number(i)) || !i) ? i : Number(i)))
|
|
|
: [];
|
|
|
} else {
|
|
|
res =
|
|
|
(isNaN(Number(target[info.name])) || !target[info.name])
|
|
|
? target[info.name]
|
|
|
: Number(target[info.name]);
|
|
|
}
|
|
|
if (res instanceof Array) {
|
|
|
if (typeof options[0] === "object") {
|
|
|
return options
|
|
|
?.filter((i) => res.indexOf(i.id) !== -1)
|
|
|
?.map((i) => i.name)
|
|
|
?.toString();
|
|
|
} else {
|
|
|
return res;
|
|
|
}
|
|
|
} else {
|
|
|
if (typeof options[0] === "object") {
|
|
|
return options
|
|
|
?.filter((i) => res === i.id)
|
|
|
?.map((i) => i.name)
|
|
|
?.toString();
|
|
|
} else {
|
|
|
return res;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
formItem = h(
|
|
|
"span",
|
|
|
{
|
|
|
style: {
|
|
|
color: "#333",
|
|
|
},
|
|
|
},
|
|
|
getDetailSelectValue()
|
|
|
);
|
|
|
break;
|
|
|
case "relation-flow":
|
|
|
console.log("info",info,target)
|
|
|
if (!this.flows[info.name]) {
|
|
|
let extraParam = {}
|
|
|
if (isJSON(info.stub)) {
|
|
|
extraParam = JSON.parse(info.stub)
|
|
|
}
|
|
|
flowList("all", {
|
|
|
page: 1,
|
|
|
page_size: 9999,
|
|
|
is_simple: 1,
|
|
|
custom_model_id: isJSON(info.stub) ? '' : info.stub,
|
|
|
is_auth: 1,
|
|
|
ids:target[info.name]?target[info.name]:'',
|
|
|
...extraParam
|
|
|
}).then((res) => {
|
|
|
this.$set(this.flows, info.name, res.data.data);
|
|
|
});
|
|
|
}
|
|
|
formItem = h(
|
|
|
"span",
|
|
|
{
|
|
|
style: {
|
|
|
color: "#333",
|
|
|
},
|
|
|
},
|
|
|
target[info.name]
|
|
|
?.toString()
|
|
|
?.split(",")
|
|
|
?.map((j) => {
|
|
|
let flow = this.flows[info.name]?.find((i) => i.id == j);
|
|
|
return flow
|
|
|
? h(
|
|
|
"el-link",
|
|
|
{
|
|
|
props: {
|
|
|
type: "primary",
|
|
|
},
|
|
|
style: {
|
|
|
"line-height": "1.5",
|
|
|
},
|
|
|
on: {
|
|
|
click: (_) => {
|
|
|
let target = this.$router.resolve({
|
|
|
path: "/flow/detail",
|
|
|
query: {
|
|
|
module_id: flow.custom_model_id,
|
|
|
flow_id: flow.id,
|
|
|
isSinglePage: 1,
|
|
|
},
|
|
|
});
|
|
|
this.modalRender = (h) =>
|
|
|
h("iframe", {
|
|
|
attrs: {
|
|
|
src: target.href,
|
|
|
},
|
|
|
style: {
|
|
|
border: "none",
|
|
|
width: "100%",
|
|
|
height: "100%",
|
|
|
},
|
|
|
});
|
|
|
this.isShowModal = true;
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
flow.title
|
|
|
)
|
|
|
: "";
|
|
|
})
|
|
|
);
|
|
|
break;
|
|
|
case "file":
|
|
|
formItem = row
|
|
|
? h("vxe-upload", {
|
|
|
props: {
|
|
|
value: row[info.name],
|
|
|
"name-field": "original_name",
|
|
|
"progress-text": "{percent}%",
|
|
|
"more-config": { maxCount: 1, layout: "horizontal" },
|
|
|
"show-button-text": false,
|
|
|
"limit-size": uploadSize / 1024 / 1024, //vxe upload单位为Mb
|
|
|
"limit-count": info.multiple ? 20 : 1,
|
|
|
readonly: true,
|
|
|
},
|
|
|
})
|
|
|
: h(
|
|
|
"el-upload",
|
|
|
{
|
|
|
props: {
|
|
|
action: process.env.VUE_APP_UPLOAD_API,
|
|
|
headers: {
|
|
|
Authorization: `Bearer ${getToken()}`,
|
|
|
},
|
|
|
disabled: true,
|
|
|
accept:
|
|
|
"application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
|
|
multiple: true,
|
|
|
fileList:
|
|
|
this.form[info.name] instanceof Array
|
|
|
? this.form[info.name]?.map((i) => {
|
|
|
if (i.hasOwnProperty("original_name")) {
|
|
|
i.name = i.original_name;
|
|
|
}
|
|
|
return i;
|
|
|
})
|
|
|
: [],
|
|
|
},
|
|
|
scopedSlots: {
|
|
|
file: (scope) => {
|
|
|
let { file } = scope;
|
|
|
return [
|
|
|
h("div", {}, [
|
|
|
h("i", {
|
|
|
class: "el-icon-circle-check",
|
|
|
style: {
|
|
|
color: "green",
|
|
|
},
|
|
|
}),
|
|
|
h(
|
|
|
"a",
|
|
|
{
|
|
|
class: {
|
|
|
"uploaded-a": file.status === "success",
|
|
|
},
|
|
|
style: {
|
|
|
padding: "0 4px",
|
|
|
},
|
|
|
on: {
|
|
|
click: (_) => {
|
|
|
this.$bus.$emit("online-file", file.url);
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
file.name
|
|
|
),
|
|
|
]),
|
|
|
];
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
[
|
|
|
h(
|
|
|
"span",
|
|
|
{
|
|
|
slot: "trigger",
|
|
|
},
|
|
|
`数量：${
|
|
|
this.form[info.name] instanceof Array
|
|
|
? this.form[info.name]?.length
|
|
|
: 0
|
|
|
}`
|
|
|
),
|
|
|
]
|
|
|
);
|
|
|
break;
|
|
|
default:
|
|
|
formItem = h(
|
|
|
"span",
|
|
|
{
|
|
|
style: {
|
|
|
color: "#333",
|
|
|
},
|
|
|
},
|
|
|
target[info.name]
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (formItem) {
|
|
|
let jointlySignContent = [];
|
|
|
let isJointly = false;
|
|
|
this.jointlySignLog.forEach((log) => {
|
|
|
const data = JSON.parse(log.data);
|
|
|
Object.entries(data)?.forEach(([key, value]) => {
|
|
|
if (
|
|
|
value.hasOwnProperty("custom_field_id") &&
|
|
|
value["custom_field_id"] === info.id
|
|
|
) {
|
|
|
isJointly = !!log.is_jointly_sign;
|
|
|
if (log.status) {
|
|
|
jointlySignContent.push(
|
|
|
h("div", [
|
|
|
h("span", value.value),
|
|
|
h("br"),
|
|
|
info.is_sign
|
|
|
? log.user.sign_file && log.user.sign_file.url
|
|
|
? h("el-image", {
|
|
|
style: {
|
|
|
"max-height": "80px",
|
|
|
"max-width": "120px",
|
|
|
},
|
|
|
props: {
|
|
|
src: log.user?.sign_file?.url,
|
|
|
fit: "contain",
|
|
|
alt: log.user?.name,
|
|
|
},
|
|
|
attrs: {
|
|
|
src: log.user?.sign_file?.url,
|
|
|
alt: log.user?.name,
|
|
|
},
|
|
|
})
|
|
|
: h("span", log.user?.name)
|
|
|
: "",
|
|
|
info.is_sign ? h("br") : "",
|
|
|
h(
|
|
|
"span",
|
|
|
log.updated_at
|
|
|
? this.$moment(log.updated_at).format("YYYY年MM月DD日")
|
|
|
: ""
|
|
|
),
|
|
|
])
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
return row
|
|
|
? formItem
|
|
|
: h(
|
|
|
"el-form-item",
|
|
|
{
|
|
|
attrs: {
|
|
|
'data-field-id': info.id
|
|
|
},
|
|
|
props: {
|
|
|
prop: info.name,
|
|
|
label: info.label_show ? info.label : "",
|
|
|
"label-width": !info.label_show ? "0" : "",
|
|
|
},
|
|
|
style: {
|
|
|
// +1为了工作标题往下顺延
|
|
|
"grid-column-start": info.gs_x + 1,
|
|
|
"grid-column-end": info.gs_x + 1 + info.gs_width,
|
|
|
"grid-row-start":
|
|
|
info.gs_y + 1 + (info.name === "flow_title" ? 0 : 1),
|
|
|
"grid-row-end":
|
|
|
info.gs_y +
|
|
|
1 +
|
|
|
(info.name === "flow_title" ? 0 : 1) +
|
|
|
info.gs_height,
|
|
|
},
|
|
|
},
|
|
|
isJointly
|
|
|
? [info._writeable ? formItem : "", jointlySignContent]
|
|
|
: [
|
|
|
(() => {
|
|
|
if (info.name === "flow_title") {
|
|
|
return formItem;
|
|
|
}
|
|
|
if (info._writeable) {
|
|
|
return formItem;
|
|
|
} else {
|
|
|
let log = this.logs.find(
|
|
|
(log) =>
|
|
|
log.node?.fields?.findIndex(
|
|
|
(field) =>
|
|
|
field?.field_id === info.id &&
|
|
|
field.type === "write"
|
|
|
) !== -1 && target[info.name]
|
|
|
);
|
|
|
if ((log && log.status) || log?.user?.id === this.$store.state.user.adminId || this.logs.length === 0) {
|
|
|
return formItem;
|
|
|
}
|
|
|
}
|
|
|
})(),
|
|
|
(() => {
|
|
|
if (info.is_sign) {
|
|
|
let log = this.logs.find(
|
|
|
(log) =>
|
|
|
log.node?.fields?.findIndex(
|
|
|
(field) =>
|
|
|
field?.field_id === info.id &&
|
|
|
field.type === "write"
|
|
|
) !== -1 && target[info.name]
|
|
|
);
|
|
|
if (log && log.status && log.user) {
|
|
|
return h("div", [
|
|
|
log.user.sign_file && log.user.sign_file.url
|
|
|
? h("el-image", {
|
|
|
style: {
|
|
|
"max-height": "80px",
|
|
|
"max-width": "120px",
|
|
|
},
|
|
|
props: {
|
|
|
src: log.user?.sign_file?.url,
|
|
|
fit: "contain",
|
|
|
alt: log.user?.name,
|
|
|
},
|
|
|
attrs: {
|
|
|
src: log.user?.sign_file?.url,
|
|
|
alt: log.user?.name,
|
|
|
},
|
|
|
})
|
|
|
: h("span", log.user?.name),
|
|
|
h(
|
|
|
"div",
|
|
|
this.$moment(log.updated_at).format(
|
|
|
"YYYY年MM月DD日"
|
|
|
)
|
|
|
),
|
|
|
]);
|
|
|
}
|
|
|
}
|
|
|
})(),
|
|
|
]
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
if (device === "mobile") {
|
|
|
if (info._writeable || pWrite) {
|
|
|
switch (info.type) {
|
|
|
case "text":
|
|
|
formItem = h("van-field", {
|
|
|
props: {
|
|
|
name: info.name,
|
|
|
value: target[info.name],
|
|
|
clearable: true,
|
|
|
placeholder: info.help_text || info.label,
|
|
|
},
|
|
|
attrs: {
|
|
|
placeholder: info.help_text,
|
|
|
},
|
|
|
on: {
|
|
|
input: (e) => this.$set(target, info.name, e),
|
|
|
},
|
|
|
});
|
|
|
break;
|
|
|
case "textarea":
|
|
|
formItem = h("van-field", {
|
|
|
props: {
|
|
|
name: info.name,
|
|
|
rows: 2,
|
|
|
type: "textarea",
|
|
|
value: target[info.name],
|
|
|
clearable: true,
|
|
|
placeholder: info.help_text || info.label,
|
|
|
},
|
|
|
attrs: {
|
|
|
placeholder: info.help_text,
|
|
|
},
|
|
|
on: {
|
|
|
input: (e) => this.$set(target, info.name, e),
|
|
|
},
|
|
|
});
|
|
|
break;
|
|
|
case "radio":
|
|
|
formItem = h(
|
|
|
"van-radio-group",
|
|
|
{
|
|
|
props: {
|
|
|
value: target[info.name],
|
|
|
},
|
|
|
on: {
|
|
|
input: (e) => {
|
|
|
this.$set(target, info.name, e);
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
options.map((option) =>
|
|
|
h(
|
|
|
"van-radio",
|
|
|
{
|
|
|
props: {
|
|
|
name: typeof option === "object" ? option.id : option,
|
|
|
"checked-color": "var(--theme-color)",
|
|
|
},
|
|
|
},
|
|
|
typeof option === "object" ? option.name : option
|
|
|
)
|
|
|
)
|
|
|
);
|
|
|
break;
|
|
|
case "date":
|
|
|
formItem = h("el-date-picker", {
|
|
|
props: {
|
|
|
type: "date",
|
|
|
"value-format": "yyyy-MM-dd",
|
|
|
format: "yyyy年MM月dd日",
|
|
|
value: target[info.name],
|
|
|
clearable: true,
|
|
|
placeholder: info.help_text || info.label,
|
|
|
"picker-options": {
|
|
|
shortcuts: this.shortcuts,
|
|
|
},
|
|
|
},
|
|
|
attrs: {
|
|
|
placeholder: info.help_text || info.label,
|
|
|
},
|
|
|
style: {
|
|
|
width: "100%",
|
|
|
},
|
|
|
on: {
|
|
|
input: (e) => {
|
|
|
this.$set(target, info.name, e);
|
|
|
},
|
|
|
},
|
|
|
});
|
|
|
break;
|
|
|
case "datetime":
|
|
|
formItem = h("el-date-picker", {
|
|
|
props: {
|
|
|
type: "datetime",
|
|
|
"value-format": "yyyy-MM-dd HH:mm:ss",
|
|
|
format: "yyyy-MM-dd HH:mm",
|
|
|
value: target[info.name],
|
|
|
clearable: true,
|
|
|
placeholder: info.help_text || info.label,
|
|
|
"picker-options": {
|
|
|
shortcuts: this.shortcuts,
|
|
|
},
|
|
|
},
|
|
|
style: {
|
|
|
width: "100%",
|
|
|
},
|
|
|
attrs: {
|
|
|
placeholder: info.help_text || info.label,
|
|
|
},
|
|
|
on: {
|
|
|
input: (e) => {
|
|
|
this.$set(target, info.name, e);
|
|
|
},
|
|
|
},
|
|
|
});
|
|
|
break;
|
|
|
case "choice":
|
|
|
case "select":
|
|
|
const getDetailMobileSelectValue = () => {
|
|
|
let res = "";
|
|
|
if (!!info.multiple) {
|
|
|
res = target[info.name]
|
|
|
? target[info.name]
|
|
|
.toString()
|
|
|
?.split(/,|\|/)
|
|
|
.map((i) => ((isNaN(Number(i)) || !i) ? i : Number(i)))
|
|
|
: [];
|
|
|
} else {
|
|
|
res =
|
|
|
(isNaN(Number(target[info.name])) || !target[info.name])
|
|
|
? target[info.name]
|
|
|
: Number(target[info.name]);
|
|
|
}
|
|
|
if (res instanceof Array) {
|
|
|
if (typeof options[0] === "object") {
|
|
|
return options
|
|
|
?.filter((i) => res.indexOf(i.id) !== -1)
|
|
|
?.map((i) => i.name)
|
|
|
?.toString();
|
|
|
} else {
|
|
|
return res;
|
|
|
}
|
|
|
} else {
|
|
|
if (typeof options[0] === "object") {
|
|
|
return options
|
|
|
?.filter((i) => res === i.id)
|
|
|
?.map((i) => i.name)
|
|
|
?.toString();
|
|
|
} else {
|
|
|
return res;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
formItem = h('div', [
|
|
|
h('van-field', {
|
|
|
props: {
|
|
|
value: getDetailMobileSelectValue(),
|
|
|
clickable: true,
|
|
|
readonly: true,
|
|
|
'label-width': 0,
|
|
|
border: false
|
|
|
},
|
|
|
on: {
|
|
|
click: _ => {
|
|
|
this.$refs[`popup-${info.name}-${row ? 'c' : 'b'}`].show()
|
|
|
}
|
|
|
}
|
|
|
}),
|
|
|
!!info.multiple ? h(MobileMultipleSelect, {
|
|
|
ref: `popup-${info.name}-${row ? 'c' : 'b'}`,
|
|
|
props: {
|
|
|
outputType: 'string',
|
|
|
selectDataOpts: options,
|
|
|
options: {
|
|
|
label: 'name',
|
|
|
value: 'id'
|
|
|
}
|
|
|
},
|
|
|
on: {
|
|
|
confirm: e => {
|
|
|
this.$set(target, info.name, e)
|
|
|
this.$refs[`popup-${info.name}-${row ? 'c' : 'b'}`].hide()
|
|
|
}
|
|
|
}
|
|
|
}) : h(MobilePicker, {
|
|
|
ref: `popup-${info.name}-${row ? 'c' : 'b'}`,
|
|
|
props: {
|
|
|
columns: options,
|
|
|
},
|
|
|
on: {
|
|
|
confirm: e => {
|
|
|
this.$set(target, info.name, typeof e === "object" ? e.id : e)
|
|
|
this.$refs[`popup-${info.name}-${row ? 'c' : 'b'}`].hide()
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
])
|
|
|
break;
|
|
|
|
|
|
case "file":
|
|
|
formItem = h(
|
|
|
"el-upload",
|
|
|
{
|
|
|
props: {
|
|
|
action: process.env.VUE_APP_UPLOAD_API,
|
|
|
headers: {
|
|
|
Authorization: `Bearer ${getToken()}`,
|
|
|
},
|
|
|
accept:
|
|
|
"application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
|
|
multiple: !!info.multiple,
|
|
|
limit: info.multiple ? 20 : 1,
|
|
|
fileList:
|
|
|
this.form[info.name] instanceof Array
|
|
|
? this.form[info.name]?.map((i) => {
|
|
|
if (i.hasOwnProperty("original_name")) {
|
|
|
i.name = i.original_name;
|
|
|
}
|
|
|
return i;
|
|
|
})
|
|
|
: [],
|
|
|
beforeUpload: (file) => {
|
|
|
if (file.size > uploadSize) {
|
|
|
this.$message({
|
|
|
type: "warning",
|
|
|
message: `上传图片大小超过${formatFileSize(
|
|
|
uploadSize
|
|
|
)}！`,
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
window.$_uploading = true;
|
|
|
},
|
|
|
onSuccess: (response, file, fileList) => {
|
|
|
window.$_uploading = false;
|
|
|
fileList.forEach((file) => {
|
|
|
if (file.response?.data && !file.response?.code) {
|
|
|
file.response = file.response?.data;
|
|
|
file.url = file.response?.url;
|
|
|
}
|
|
|
});
|
|
|
target[info.name] = fileList;
|
|
|
},
|
|
|
onRemove: (file, fileList) => {
|
|
|
target[info.name] = fileList;
|
|
|
},
|
|
|
onError: (err, file, fileList) => {
|
|
|
window.$_uploading = false;
|
|
|
target[info.name] = fileList;
|
|
|
this.$message({
|
|
|
type: "warning",
|
|
|
message: err,
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
scopedSlots: {
|
|
|
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",
|
|
|
{
|
|
|
class: {
|
|
|
"uploaded-a": file.status === "success",
|
|
|
},
|
|
|
style: {
|
|
|
padding: "0 4px",
|
|
|
},
|
|
|
on: {
|
|
|
click: (_) => {
|
|
|
this.$bus.$emit("online-file", file.url);
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
file.original_name || file.name
|
|
|
),
|
|
|
]),
|
|
|
h("i", {
|
|
|
class: "el-icon-close",
|
|
|
on: {
|
|
|
["click"]: () => {
|
|
|
if (file.status === "uploading") return;
|
|
|
target[info.name].splice(
|
|
|
target[info.name].indexOf(file),
|
|
|
1
|
|
|
);
|
|
|
},
|
|
|
},
|
|
|
}),
|
|
|
];
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
[
|
|
|
h(
|
|
|
"el-button",
|
|
|
{
|
|
|
slot: "trigger",
|
|
|
props: {
|
|
|
size: "mini",
|
|
|
type: "primary",
|
|
|
},
|
|
|
},
|
|
|
"选取文件"
|
|
|
),
|
|
|
h(
|
|
|
"div",
|
|
|
{
|
|
|
class: "el-upload__tip",
|
|
|
slot: "tip",
|
|
|
},
|
|
|
`文件不超过${formatFileSize(uploadSize)}`
|
|
|
),
|
|
|
]
|
|
|
);
|
|
|
break;
|
|
|
case "relation-flow":
|
|
|
if (!this.flows[info.name]) {
|
|
|
let extraParam = {}
|
|
|
if (isJSON(info.stub)) {
|
|
|
extraParam = JSON.parse(info.stub)
|
|
|
}
|
|
|
flowList("all", {
|
|
|
page: 1,
|
|
|
page_size: 9999,
|
|
|
is_simple: 1,
|
|
|
custom_model_id: isJSON(info.stub) ? '' : info.stub,
|
|
|
is_auth: 1,
|
|
|
ids:target[info.name]?target[info.name]:'',
|
|
|
...extraParam
|
|
|
}).then((res) => {
|
|
|
this.$set(this.flows, info.name, res.data.data);
|
|
|
});
|
|
|
}
|
|
|
formItem = h('div', [
|
|
|
h('van-field', {
|
|
|
props: {
|
|
|
value: target[info.name]
|
|
|
?.toString()
|
|
|
?.split(",")
|
|
|
?.map((j) => {
|
|
|
let flow = this.flows[info.name]?.find((i) => i.id == j)
|
|
|
return flow?.title
|
|
|
})?.toString(),
|
|
|
clickable: true,
|
|
|
readonly: true,
|
|
|
'label-width': 0,
|
|
|
border: false
|
|
|
},
|
|
|
on: {
|
|
|
click: _ => {
|
|
|
this.$refs[`popup-${info.name}-${row ? 'c' : 'b'}`].show()
|
|
|
}
|
|
|
}
|
|
|
}),
|
|
|
h(MobileMultipleSelect, {
|
|
|
ref: `popup-${info.name}-${row ? 'c' : 'b'}`,
|
|
|
props: {
|
|
|
outputType: 'string',
|
|
|
selectDataOpts: this.flows[info.name],
|
|
|
options: {
|
|
|
label: 'title',
|
|
|
value: 'id'
|
|
|
}
|
|
|
},
|
|
|
on: {
|
|
|
confirm: e => {
|
|
|
this.$set(target, info.name, e)
|
|
|
this.$refs[`popup-${info.name}-${row ? 'c' : 'b'}`].hide()
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
])
|
|
|
break;
|
|
|
case "relation":
|
|
|
let copySubForm = deepCopy(this.form[info.name][0]);
|
|
|
formItem = h("div", [
|
|
|
h(
|
|
|
"van-cell",
|
|
|
{
|
|
|
props: {
|
|
|
title: info.label_show ? info.label : '',
|
|
|
"arrow-direction": "down",
|
|
|
}
|
|
|
},
|
|
|
[
|
|
|
h(
|
|
|
"van-button",
|
|
|
{
|
|
|
props: {
|
|
|
color: "var(--theme-color)",
|
|
|
icon: "plus",
|
|
|
size: "small",
|
|
|
'native-type': 'button'
|
|
|
},
|
|
|
on: {
|
|
|
click: (_) => {
|
|
|
this.form[info.name].push(copySubForm);
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
"新增"
|
|
|
),
|
|
|
]
|
|
|
),
|
|
|
h(
|
|
|
"div",
|
|
|
this.form[info.name] instanceof Array
|
|
|
? this.form[info.name]?.map((sForm, sIndex) =>
|
|
|
h(
|
|
|
"van-cell",
|
|
|
{
|
|
|
props: {
|
|
|
inset: false,
|
|
|
},
|
|
|
},
|
|
|
[
|
|
|
h(
|
|
|
"van-cell",
|
|
|
{
|
|
|
props: {
|
|
|
title: info.label + "-" + (sIndex + 1),
|
|
|
},
|
|
|
},
|
|
|
[
|
|
|
h(
|
|
|
"van-button",
|
|
|
{
|
|
|
props: {
|
|
|
size: "mini",
|
|
|
type: "danger",
|
|
|
icon: "minus",
|
|
|
'native-type': 'button'
|
|
|
},
|
|
|
on: {
|
|
|
click: (_) => {
|
|
|
this.form[info.name].splice(sIndex, 1);
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
"删除"
|
|
|
),
|
|
|
]
|
|
|
),
|
|
|
h(
|
|
|
"el-form",
|
|
|
{
|
|
|
ref: "elSubForm-" + info.name + sIndex,
|
|
|
props: {
|
|
|
size: "mini",
|
|
|
model: sForm,
|
|
|
"label-position": "right",
|
|
|
rules: this.subRules[`${info.name}_rules`],
|
|
|
"inline-message": true,
|
|
|
},
|
|
|
style: {
|
|
|
margin: "0 10px",
|
|
|
},
|
|
|
attrs: {
|
|
|
ref: "elSubForm-" + info.name
|
|
|
}
|
|
|
},
|
|
|
this.subForm.get(info.sub_custom_model_id)?.customModel?.fields?.map((subField) =>
|
|
|
formBuilder.bind(this)(
|
|
|
device,
|
|
|
subField,
|
|
|
h,
|
|
|
sForm,
|
|
|
info._writeable,
|
|
|
null,
|
|
|
info.name
|
|
|
)
|
|
|
)
|
|
|
),
|
|
|
]
|
|
|
)
|
|
|
)
|
|
|
: ""
|
|
|
),
|
|
|
]);
|
|
|
break;
|
|
|
}
|
|
|
} else if (info._readable || pReadable) {
|
|
|
switch (info.type) {
|
|
|
case "date":
|
|
|
formItem = h("van-field", {
|
|
|
props: {
|
|
|
readonly: true,
|
|
|
value: target[info.name]
|
|
|
? moment(target[info.name]).format("YYYY年MM月DD日")
|
|
|
: "",
|
|
|
},
|
|
|
});
|
|
|
break;
|
|
|
case "datetime":
|
|
|
formItem = h("van-field", {
|
|
|
props: {
|
|
|
readonly: true,
|
|
|
value: target[info.name]
|
|
|
? moment(target[info.name]).format(
|
|
|
"YYYY年MM月DD日 HH时mm分ss秒"
|
|
|
)
|
|
|
: "",
|
|
|
},
|
|
|
});
|
|
|
break;
|
|
|
case "select":
|
|
|
case "choice":
|
|
|
const getDetailMobileSelectValue = () => {
|
|
|
let res = "";
|
|
|
if (!!info.multiple) {
|
|
|
res = target[info.name]
|
|
|
? target[info.name]
|
|
|
.toString()
|
|
|
?.split(/,|\|/)
|
|
|
.map((i) => (isNaN(Number(i)) || !i ? i : Number(i)))
|
|
|
: [];
|
|
|
} else {
|
|
|
res =
|
|
|
isNaN(Number(target[info.name])) || !target[info.name]
|
|
|
? target[info.name]
|
|
|
: Number(target[info.name]);
|
|
|
}
|
|
|
if (res instanceof Array) {
|
|
|
if (typeof options[0] === "object") {
|
|
|
return options
|
|
|
?.filter((i) => res.indexOf(i.id) !== -1)
|
|
|
?.map((i) => i.name)
|
|
|
?.toString();
|
|
|
} else {
|
|
|
return res;
|
|
|
}
|
|
|
} else {
|
|
|
if (typeof options[0] === "object") {
|
|
|
return options
|
|
|
?.filter((i) => res === i.id)
|
|
|
?.map((i) => i.name)
|
|
|
?.toString();
|
|
|
} else {
|
|
|
return res;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
formItem = h("van-field", {
|
|
|
props: {
|
|
|
readonly: true,
|
|
|
value: getDetailMobileSelectValue(),
|
|
|
},
|
|
|
});
|
|
|
break;
|
|
|
case "file":
|
|
|
let files = target[info.name];
|
|
|
formItem = h(
|
|
|
"div",
|
|
|
{},
|
|
|
(files && files !== "null" && files !== "undefined"
|
|
|
? files
|
|
|
: []
|
|
|
)?.map((file) =>
|
|
|
h("div", {}, [
|
|
|
h(
|
|
|
"a",
|
|
|
{
|
|
|
class: {
|
|
|
"uploaded-a": file.status === "success",
|
|
|
},
|
|
|
style: {
|
|
|
padding: "0 4px",
|
|
|
},
|
|
|
on: {
|
|
|
click: (_) => {
|
|
|
this.$bus.$emit("online-file", file.url);
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
file.original_name || file.name
|
|
|
),
|
|
|
])
|
|
|
)
|
|
|
);
|
|
|
break;
|
|
|
case "relation":
|
|
|
formItem = h("div", [
|
|
|
h("van-cell", {
|
|
|
props: {
|
|
|
title: info.label_show ? info.label : '',
|
|
|
},
|
|
|
}),
|
|
|
h(
|
|
|
"div",
|
|
|
this.form[info.name] instanceof Array
|
|
|
? this.form[info.name]?.map((sForm, sIndex) =>
|
|
|
h(
|
|
|
"van-cell",
|
|
|
{
|
|
|
props: {
|
|
|
inset: false,
|
|
|
},
|
|
|
},
|
|
|
[
|
|
|
h("van-cell", {
|
|
|
props: {
|
|
|
title: info.label + "-" + (sIndex + 1),
|
|
|
},
|
|
|
}),
|
|
|
h(
|
|
|
"van-form",
|
|
|
{
|
|
|
ref: "elSubForm-"+sIndex,
|
|
|
props: {
|
|
|
},
|
|
|
style: {
|
|
|
margin: "0 10px",
|
|
|
},
|
|
|
},
|
|
|
Array.from(this.subForm)
|
|
|
.map((i) => i[1]?.customModel?.fields)
|
|
|
?.flat()
|
|
|
.map((subField) =>
|
|
|
formBuilder.bind(this)(
|
|
|
device,
|
|
|
subField,
|
|
|
h,
|
|
|
sForm,
|
|
|
info._writeable,
|
|
|
info._readable
|
|
|
)
|
|
|
)
|
|
|
),
|
|
|
]
|
|
|
)
|
|
|
)
|
|
|
: ""
|
|
|
),
|
|
|
]);
|
|
|
break;
|
|
|
case "relation-flow":
|
|
|
if (!this.flows[info.name]) {
|
|
|
let extraParam = {}
|
|
|
if (isJSON(info.stub)) {
|
|
|
extraParam = JSON.parse(info.stub)
|
|
|
}
|
|
|
flowList("all", {
|
|
|
page: 1,
|
|
|
page_size: 9999,
|
|
|
is_simple: 1,
|
|
|
custom_model_id: isJSON(info.stub) ? '' : info.stub,
|
|
|
is_auth: 1,
|
|
|
ids:target[info.name]?target[info.name]:'',
|
|
|
...extraParam
|
|
|
}).then((res) => {
|
|
|
this.$set(this.flows, info.name, res.data.data);
|
|
|
});
|
|
|
}
|
|
|
formItem = h(
|
|
|
"van-cell",
|
|
|
{
|
|
|
style: {
|
|
|
width: '100%',
|
|
|
},
|
|
|
props: {
|
|
|
},
|
|
|
},
|
|
|
target[info.name]
|
|
|
?.toString()
|
|
|
?.split(",")
|
|
|
?.map((j) => {
|
|
|
let flow = this.flows[info.name]?.find((i) => i.id == j);
|
|
|
return flow
|
|
|
? h(
|
|
|
"el-link",
|
|
|
{
|
|
|
props: {
|
|
|
type: "primary",
|
|
|
},
|
|
|
style: {
|
|
|
"line-height": "1.5",
|
|
|
},
|
|
|
on: {
|
|
|
click: (_) => {
|
|
|
let target = this.$router.resolve({
|
|
|
path: "/flow/detail",
|
|
|
query: {
|
|
|
module_id: flow.custom_model_id,
|
|
|
flow_id: flow.id,
|
|
|
isSinglePage: 1,
|
|
|
},
|
|
|
});
|
|
|
this.modalRender = (h) =>
|
|
|
h("iframe", {
|
|
|
attrs: {
|
|
|
src: target.href,
|
|
|
},
|
|
|
style: {
|
|
|
border: "none",
|
|
|
width: "100%",
|
|
|
height: "100%",
|
|
|
},
|
|
|
});
|
|
|
this.isShowModal = true;
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
flow.title
|
|
|
)
|
|
|
: "";
|
|
|
})
|
|
|
);
|
|
|
break;
|
|
|
default:
|
|
|
formItem = h("van-field", {
|
|
|
props: {
|
|
|
value: target[info.name],
|
|
|
readonly: true
|
|
|
},
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (formItem) {
|
|
|
let jointlySignContent = [];
|
|
|
let isJointly = false;
|
|
|
this.jointlySignLog.forEach((log) => {
|
|
|
const data = JSON.parse(log.data);
|
|
|
Object.entries(data)?.forEach(([key, value]) => {
|
|
|
if (
|
|
|
value.hasOwnProperty("custom_field_id") &&
|
|
|
value["custom_field_id"] === info.id
|
|
|
) {
|
|
|
isJointly = !!log.is_jointly_sign;
|
|
|
if (log.status) {
|
|
|
jointlySignContent.push(
|
|
|
h("div", [
|
|
|
h("span", value.value),
|
|
|
h("br"),
|
|
|
info.is_sign
|
|
|
? log.user.sign_file && log.user.sign_file.url
|
|
|
? h("el-image", {
|
|
|
style: {
|
|
|
"max-height": "40px",
|
|
|
"max-width": "60px",
|
|
|
},
|
|
|
props: {
|
|
|
src: log.user?.sign_file?.url,
|
|
|
fit: "contain",
|
|
|
alt: log.user?.name,
|
|
|
},
|
|
|
attrs: {
|
|
|
src: log.user?.sign_file?.url,
|
|
|
alt: log.user?.name,
|
|
|
},
|
|
|
})
|
|
|
: h("span", log.user?.name)
|
|
|
: "",
|
|
|
info.is_sign ? h("br") : "",
|
|
|
h(
|
|
|
"span",
|
|
|
log.updated_at
|
|
|
? this.$moment(log.updated_at).format("YYYY年MM月DD日")
|
|
|
: ""
|
|
|
),
|
|
|
])
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
return row
|
|
|
? h("el-form-item", {
|
|
|
ref: info.name,
|
|
|
props: {
|
|
|
prop: info.name,
|
|
|
label: (!info.label_show || info.type === 'relation') ? "" : info.label,
|
|
|
"label-width": (!info.label_show || info.type === 'relation') ? "0" : "",
|
|
|
}
|
|
|
}, [formItem])
|
|
|
: h(
|
|
|
"el-form-item",
|
|
|
{
|
|
|
props: {
|
|
|
prop: info.name,
|
|
|
label: (!info.label_show || info.type === 'relation') ? "" : info.label,
|
|
|
"label-width": (!info.label_show || info.type === 'relation') ? "0" : "",
|
|
|
},
|
|
|
},
|
|
|
isJointly
|
|
|
? [info._writeable ? formItem : "", jointlySignContent]
|
|
|
: [
|
|
|
(() => {
|
|
|
if (info.name === "flow_title") {
|
|
|
return formItem;
|
|
|
}
|
|
|
if (info._writeable) {
|
|
|
return formItem;
|
|
|
} else {
|
|
|
let log = this.logs.find(
|
|
|
(log) =>
|
|
|
log.node?.fields?.findIndex(
|
|
|
(field) =>
|
|
|
field?.field_id === info.id &&
|
|
|
field.type === "write"
|
|
|
) !== -1 && target[info.name]
|
|
|
);
|
|
|
if ((log && log.status) || log?.user?.id === this.$store.state.user.adminId || this.logs.length === 0) {
|
|
|
return formItem;
|
|
|
}
|
|
|
}
|
|
|
})(),
|
|
|
(() => {
|
|
|
if (info.is_sign) {
|
|
|
let log = this.logs.find(
|
|
|
(log) =>
|
|
|
log.node?.fields?.findIndex(
|
|
|
(field) =>
|
|
|
field?.field_id === info.id &&
|
|
|
field.type === "write"
|
|
|
) !== -1 && target[info.name]
|
|
|
);
|
|
|
if (log && log.status && log.user) {
|
|
|
return h("div", [
|
|
|
log.user.sign_file && log.user.sign_file.url
|
|
|
? h("el-image", {
|
|
|
style: {
|
|
|
"max-height": "40px",
|
|
|
"max-width": "60px",
|
|
|
},
|
|
|
props: {
|
|
|
src: log.user?.sign_file?.url,
|
|
|
fit: "contain",
|
|
|
alt: log.user?.name,
|
|
|
},
|
|
|
attrs: {
|
|
|
src: log.user?.sign_file?.url,
|
|
|
alt: log.user?.name,
|
|
|
},
|
|
|
})
|
|
|
: h("span", log.user?.name),
|
|
|
h(
|
|
|
"div",
|
|
|
this.$moment(log.updated_at).format(
|
|
|
"YYYY年MM月DD日"
|
|
|
)
|
|
|
),
|
|
|
]);
|
|
|
}
|
|
|
}
|
|
|
})(),
|
|
|
]
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
}
|
