You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
367 lines
8.5 KiB
367 lines
8.5 KiB
<script>
|
|
import {deepCopy} from "@/utils";
|
|
import formBuilder from "@/utils/formBuilder";
|
|
import {PopupManager} from "element-ui/lib/utils/popup";
|
|
import request from '@/utils/request'
|
|
import moment from "moment/moment";
|
|
import {defaultModalSize} from "@/settings";
|
|
import { getToken } from '@/utils/auth'
|
|
export default {
|
|
props: {
|
|
config: {
|
|
type: Object
|
|
},
|
|
isFirstNode: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
needFlowTitle: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
readable: {
|
|
type: Array,
|
|
default: () => [],
|
|
required: true,
|
|
},
|
|
writeable: {
|
|
type: Array,
|
|
default: () => [],
|
|
required: true,
|
|
},
|
|
originalForm: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
required: true,
|
|
},
|
|
subForm: {
|
|
type: Map,
|
|
default: () => new Map(),
|
|
},
|
|
device: {
|
|
type: String,
|
|
default: "desktop",
|
|
required: true,
|
|
},
|
|
fields: {
|
|
type: Array,
|
|
default: () => [],
|
|
required: true,
|
|
},
|
|
scriptContent: String,
|
|
rules: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
subRules: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
logs: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
// 脚本注入控制的modal弹窗
|
|
defaultModalSize,
|
|
zIndex: PopupManager.nextZIndex(),
|
|
isShowModal: false,
|
|
modalRender: () => {},
|
|
|
|
action: process.env.VUE_APP_BASE_API,
|
|
form: {},
|
|
|
|
jointlySignLog: [], // 所有会签log记录
|
|
shortcuts: [
|
|
{
|
|
text: "一年前",
|
|
onClick(picker) {
|
|
picker.$emit(
|
|
"pick",
|
|
moment().subtract(1, "years").toDate()
|
|
);
|
|
},
|
|
},
|
|
{
|
|
text: "一季度前",
|
|
onClick(picker) {
|
|
picker.$emit(
|
|
"pick",
|
|
moment().subtract(3, "months").toDate()
|
|
);
|
|
},
|
|
},
|
|
{
|
|
text: "一月前",
|
|
onClick(picker) {
|
|
picker.$emit(
|
|
"pick",
|
|
moment().subtract(1, "months").toDate()
|
|
);
|
|
},
|
|
},
|
|
{
|
|
text: "一周前",
|
|
onClick(picker) {
|
|
picker.$emit(
|
|
"pick",
|
|
moment().subtract(1, "weeks").toDate()
|
|
);
|
|
},
|
|
},
|
|
{
|
|
text: "今天",
|
|
onClick(picker) {
|
|
picker.$emit("pick", new Date());
|
|
},
|
|
},
|
|
{
|
|
text: "一周后",
|
|
onClick(picker) {
|
|
picker.$emit("pick", moment().add(1, "weeks").toDate());
|
|
},
|
|
},
|
|
{
|
|
text: "一月后",
|
|
onClick(picker) {
|
|
picker.$emit("pick", moment().add(1, "months").toDate());
|
|
},
|
|
},
|
|
{
|
|
text: "一季度后",
|
|
onClick(picker) {
|
|
picker.$emit("pick", moment().add(3, "months").toDate());
|
|
},
|
|
},
|
|
{
|
|
text: "一年后",
|
|
onClick(picker) {
|
|
picker.$emit("pick", moment().add(1, "years").toDate());
|
|
},
|
|
},
|
|
],
|
|
flows: {},
|
|
};
|
|
},
|
|
methods: {
|
|
getToken,
|
|
request,
|
|
async validate() {
|
|
const $elForm = this.$refs['elForm']
|
|
if ($elForm) {
|
|
await this.$refs['elForm'].validate()
|
|
}
|
|
let subFormName = this.fields.filter(i => i.type === 'relation').map(i => i.name)
|
|
for (let i = 0;i < subFormName.length;i++) {
|
|
if (this.device === 'desktop') {
|
|
let $subForm = this.$refs[`subForm-${subFormName[i]}`]
|
|
if ($subForm) {
|
|
const errMap = await this.$refs[`subForm-${subFormName[i]}`].validate(true)
|
|
if (errMap) {
|
|
throw new Error(errMap)
|
|
}
|
|
}
|
|
} else {
|
|
if (this.form[subFormName[i]] instanceof Array) {
|
|
for (let j = 0;j < this.form[subFormName[i]].length;j++) {
|
|
let $subForm = this.$refs[`elSubForm-${subFormName[i]}${j}`]
|
|
if ($subForm) {
|
|
await $subForm.validate()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {},
|
|
watch: {
|
|
originalForm(newVal) {
|
|
this.form = deepCopy(newVal)
|
|
// let copyForm = deepCopy(newVal);
|
|
// for (let key in copyForm) {
|
|
// Object.defineProperty(this.form, key, {
|
|
// value: copyForm[key],
|
|
// enumerable: true,
|
|
// writable: this.writeable.indexOf(this.fields.find(field => field.name === key)?.id) !== -1,
|
|
// configurable: true
|
|
// })
|
|
// }
|
|
},
|
|
scriptContent(newVal) {
|
|
if (newVal) {
|
|
try {
|
|
new Function(newVal).bind(this)();
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
}
|
|
},
|
|
isShowModal(newVal) {
|
|
if (newVal) {
|
|
this.zIndex = PopupManager.nextZIndex();
|
|
} else {
|
|
this.modalRender = () => {}
|
|
}
|
|
},
|
|
logs: {
|
|
handler: function (newVal) {
|
|
if (newVal && newVal instanceof Array && newVal.length > 0) {
|
|
this.jointlySignLog = newVal.filter(log => {
|
|
try {
|
|
JSON.parse(log.data)
|
|
return log.is_jointly_sign && /custom_field_id/g.test(log.data)
|
|
} catch (e) {
|
|
return false
|
|
}
|
|
})
|
|
} else {
|
|
this.jointlySignLog = []
|
|
}
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
render(h) {
|
|
const authFields = this.fields.map((field) => ({
|
|
...field,
|
|
_readable:
|
|
this.readable.indexOf(field.id) !== -1 || field.type === "label",
|
|
_writeable: this.writeable.indexOf(field.id) !== -1,
|
|
}));
|
|
if (this.needFlowTitle) {
|
|
authFields.unshift({
|
|
name: "flow_title",
|
|
label: "工作名称",
|
|
type: "text",
|
|
gs_x: 0,
|
|
gs_y: 0,
|
|
gs_width: 12,
|
|
gs_height: 1,
|
|
label_show: 1,
|
|
_readable: !this.isFirstNode,
|
|
_writeable: this.isFirstNode,
|
|
});
|
|
}
|
|
return h("div", {
|
|
class: `form-${this.device}`
|
|
},[
|
|
h(
|
|
"el-form",
|
|
{
|
|
ref: "elForm",
|
|
class: "form",
|
|
props: {
|
|
size: this.device === 'mobile' ? 'medium' : '',
|
|
model: this.form,
|
|
"label-position": "right",
|
|
"label-width": this.device === 'mobile' ? "80px" : "130px",
|
|
rules: this.rules,
|
|
"inline-message": true,
|
|
},
|
|
},
|
|
authFields.map((field) => formBuilder.bind(this)(this.device, field, h))
|
|
),
|
|
// 用于编写脚本中弹窗
|
|
h(
|
|
"vxe-modal",
|
|
{
|
|
props: {
|
|
zIndex: this.zIndex,
|
|
value: this.isShowModal,
|
|
height: defaultModalSize.height,
|
|
width: defaultModalSize.width,
|
|
resize: true,
|
|
transfer: true,
|
|
"show-zoom": true,
|
|
"esc-closable": true,
|
|
},
|
|
on: {
|
|
input: (e) => {
|
|
this.isShowModal = e;
|
|
},
|
|
},
|
|
},
|
|
[this.modalRender.bind(this)(h)]
|
|
),
|
|
]);
|
|
},
|
|
created() {},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.form {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
}
|
|
::v-deep .el-form-item {
|
|
border: 1px solid #dee2e6;
|
|
padding: 8px 12px;
|
|
margin: -1px 0 0 -1px;
|
|
}
|
|
::v-deep .el-form-item__content {
|
|
}
|
|
::v-deep .el-radio, .el-radio__input {
|
|
line-height: 1.5;
|
|
}
|
|
.form-mobile {
|
|
.form {
|
|
grid-template-columns: repeat(1, 1fr);
|
|
box-shadow: 0 8px 12px #ebedf0;
|
|
background: #fff;
|
|
}
|
|
::v-deep .el-form-item {
|
|
border: none;
|
|
position: relative;
|
|
&::after {
|
|
content: '';
|
|
height: 1px;
|
|
background: #ebedf0;
|
|
position: absolute;
|
|
width: 90%;
|
|
left: 5%;
|
|
bottom: -0.5px;
|
|
}
|
|
}
|
|
::v-deep .el-form-item:nth-child(1) {
|
|
border-radius: 6px 6px 0 0;
|
|
}
|
|
::v-deep .el-form-item:nth-last-child(1) {
|
|
border-radius: 0 0 6px 6px;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.form-mobile {
|
|
.el-input__inner {
|
|
border: none;
|
|
}
|
|
.el-date-picker.has-sidebar {
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
left: 0!important;
|
|
width: 100vw !important;
|
|
height: 100vh !important;
|
|
margin-top: 0 !important;
|
|
}
|
|
.el-picker-panel__body-wrapper {
|
|
height: calc(100% - 39px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.el-picker-panel__sidebar {
|
|
flex: 1;
|
|
}
|
|
.el-picker-panel__body {
|
|
flex: 0;
|
|
margin-left: 0 !important;
|
|
}
|
|
.el-date-picker .el-picker-panel__content {
|
|
width: calc(100% - 30px);
|
|
}
|
|
}
|
|
</style>
|