| | |
| | | <template>
|
| | | <el-dialog
|
| | | :visible.sync="dialogVisible"
|
| | | v-dialogDrag
|
| | | top="0vh"
|
| | | title="提示"
|
| | | class="avue-dialog avue-dialog--top"
|
| | | :width="dialogOptions.width"
|
| | | append-to-body
|
| | | >
|
| | | <avue-form :option="option" v-loading="loading" ref="form">
|
| | | <template :slot="item.prop + 'Label'" v-for="item in option.column"">
|
| | | <div>
|
| | | <span>{{ item.label }}</span>
|
| | | <el-tooltip
|
| | | v-if="item.keyAttr"
|
| | | class="item"
|
| | | effect="dark"
|
| | | content="关键属性"
|
| | | placement="top-start"
|
| | | >
|
| | | <i class="el-icon-star-on key_attr_icon"></i>
|
| | | </el-tooltip>
|
| | | </div>
|
| | | </template>
|
| | | </avue-form>
|
| | | <div class="avue-dialog__footer">
|
| | | <el-button @click="close()">取 消</el-button>
|
| | | <el-button @click="close()" type="primary">确 定</el-button>
|
| | | </div>
|
| | | </el-dialog>
|
| | | </template>
|
| | |
|
| | | <script>
|
| | | import { getFormTemplate } from "../../api/common";
|
| | | export default {
|
| | | name: "FormTemplate",
|
| | | props: {
|
| | | visible: {
|
| | | type: Boolean,
|
| | | default: false,
|
| | | },
|
| | | },
|
| | | data() {
|
| | | return {
|
| | | loading: false,
|
| | | dialogOptions: {
|
| | | width: "60%",
|
| | | },
|
| | | option: {
|
| | | emptyBtn: false,
|
| | | submitBtn: false,
|
| | | labelWidth: "120",
|
| | | column: [],
|
| | | },
|
| | | templateData: {},
|
| | | columnType: {
|
| | | text: "input",
|
| | | combox: "select",
|
| | | truefalse: "switch",
|
| | | number: "number",
|
| | | datetime: "datetime",
|
| | | },
|
| | | testItems: [
|
| | | {
|
| | | comboxKey: null,
|
| | | customClass: null,
|
| | | data: null,
|
| | | dateFormate: "",
|
| | | defaultValue: "",
|
| | | displayExtension: null,
|
| | | extendAttrMap: null,
|
| | | extendAttrString: null,
|
| | | field: "id",
|
| | | hidden: true,
|
| | | keyAttr: false,
|
| | | prefix: "",
|
| | | readOnly: false,
|
| | | referConfig: null,
|
| | | required: false,
|
| | | selectLibFlag: "",
|
| | | showField: null,
|
| | | suffix: "",
|
| | | text: "代号",
|
| | | tooltips: "",
|
| | | type: "text",
|
| | | unique: false,
|
| | | verify: "",
|
| | | },
|
| | | {
|
| | | comboxKey: "wupin${lcstatus}",
|
| | | customClass: null,
|
| | | data: null,
|
| | | dateFormate: "",
|
| | | defaultValue: "",
|
| | | displayExtension: null,
|
| | | extendAttrMap: null,
|
| | | extendAttrString: null,
|
| | | field: "lcstatus",
|
| | | hidden: false,
|
| | | keyAttr: false,
|
| | | prefix: "",
|
| | | readOnly: false,
|
| | | referConfig: null,
|
| | | required: false,
|
| | | selectLibFlag: "",
|
| | | showField: null,
|
| | | suffix: "",
|
| | | text: "状态",
|
| | | tooltips: "",
|
| | | type: "combox",
|
| | | unique: false,
|
| | | verify: "",
|
| | | },
|
| | | {
|
| | | comboxKey: null,
|
| | | customClass: null,
|
| | | data: null,
|
| | | dateFormate: "",
|
| | | defaultValue: "",
|
| | | displayExtension: null,
|
| | | extendAttrMap: null,
|
| | | extendAttrString: null,
|
| | | field: "oldcode",
|
| | | hidden: false,
|
| | | keyAttr: false,
|
| | | prefix: "el-icon-search",
|
| | | readOnly: false,
|
| | | referConfig: null,
|
| | | required: false,
|
| | | selectLibFlag: "",
|
| | | showField: null,
|
| | | suffix: "文本后缀测试",
|
| | | text: "前后缀",
|
| | | tooltips: "",
|
| | | type: "text",
|
| | | unique: false,
|
| | | verify: "",
|
| | | },
|
| | | {
|
| | | comboxKey: null,
|
| | | customClass: null,
|
| | | data: null,
|
| | | dateFormate: "",
|
| | | defaultValue: "",
|
| | | displayExtension: null,
|
| | | extendAttrMap: null,
|
| | | extendAttrString: null,
|
| | | field: "materialname",
|
| | | hidden: false,
|
| | | keyAttr: false,
|
| | | prefix: "",
|
| | | readOnly: false,
|
| | | referConfig: null,
|
| | | required: true,
|
| | | selectLibFlag: "",
|
| | | showField: null,
|
| | | suffix: "",
|
| | | text: "正则校验",
|
| | | tooltips: "请输入数字",
|
| | | type: "text",
|
| | | unique: false,
|
| | | verify: "/[0-9]/",
|
| | | },
|
| | | {
|
| | | comboxKey: "materialclassify_data",
|
| | | customClass: null,
|
| | | data: [
|
| | | {
|
| | | attributes: {},
|
| | | key: "model_type",
|
| | | value: "模型",
|
| | | },
|
| | | {
|
| | | attributes: {},
|
| | | key: "part_type",
|
| | | value: "零件",
|
| | | },
|
| | | ],
|
| | | dateFormate: "",
|
| | | defaultValue: "",
|
| | | displayExtension: null,
|
| | | extendAttrMap: null,
|
| | | extendAttrString: null,
|
| | | field: "materialclassify",
|
| | | hidden: false,
|
| | | keyAttr: false,
|
| | | prefix: "",
|
| | | readOnly: false,
|
| | | referConfig: null,
|
| | | required: false,
|
| | | selectLibFlag: "",
|
| | | showField: null,
|
| | | suffix: "",
|
| | | text: "物料分类",
|
| | | tooltips: "",
|
| | | type: "combox",
|
| | | unique: false,
|
| | | verify: "",
|
| | | },
|
| | | {
|
| | | comboxKey: null,
|
| | | customClass: null,
|
| | | data: null,
|
| | | dateFormate: "",
|
| | | defaultValue: "",
|
| | | displayExtension: null,
|
| | | extendAttrMap: null,
|
| | | extendAttrString: null,
|
| | | field: "firstfl",
|
| | | hidden: false,
|
| | | keyAttr: false,
|
| | | prefix: "",
|
| | | readOnly: false,
|
| | | referConfig: null,
|
| | | required: false,
|
| | | selectLibFlag: "",
|
| | | showField: null,
|
| | | suffix: "",
|
| | | text: "数字输入框",
|
| | | tooltips: "",
|
| | | type: "number",
|
| | | unique: false,
|
| | | verify: "",
|
| | | },
|
| | | {
|
| | | comboxKey: null,
|
| | | customClass: null,
|
| | | data: null,
|
| | | dateFormate: "yyyy-MM-dd HH:mm:ss",
|
| | | defaultValue: "",
|
| | | displayExtension: null,
|
| | | extendAttrMap: null,
|
| | | extendAttrString: null,
|
| | | field: "secondfl",
|
| | | hidden: false,
|
| | | keyAttr: false,
|
| | | prefix: "",
|
| | | readOnly: false,
|
| | | referConfig: null,
|
| | | required: false,
|
| | | selectLibFlag: "",
|
| | | showField: null,
|
| | | suffix: "",
|
| | | text: "时间选择器",
|
| | | tooltips: "",
|
| | | type: "datetime",
|
| | | unique: false,
|
| | | verify: "",
|
| | | },
|
| | | {
|
| | | comboxKey: null,
|
| | | customClass: null,
|
| | | data: null,
|
| | | dateFormate: "",
|
| | | defaultValue: "",
|
| | | displayExtension: null,
|
| | | extendAttrMap: null,
|
| | | extendAttrString: null,
|
| | | field: "thrifl",
|
| | | hidden: false,
|
| | | keyAttr: true,
|
| | | prefix: "",
|
| | | readOnly: false,
|
| | | referConfig: null,
|
| | | required: false,
|
| | | selectLibFlag: "",
|
| | | showField: null,
|
| | | suffix: "",
|
| | | text: "关键属性",
|
| | | tooltips: "",
|
| | | type: "text",
|
| | | unique: false,
|
| | | verify: "",
|
| | | },
|
| | | {
|
| | | comboxKey: null,
|
| | | customClass: null,
|
| | | data: null,
|
| | | dateFormate: "",
|
| | | defaultValue: "false",
|
| | | displayExtension: null,
|
| | | extendAttrMap: null,
|
| | | extendAttrString: null,
|
| | | field: "xiaoshouwl",
|
| | | hidden: false,
|
| | | keyAttr: false,
|
| | | prefix: "",
|
| | | readOnly: false,
|
| | | referConfig: null,
|
| | | required: false,
|
| | | selectLibFlag: "",
|
| | | showField: null,
|
| | | suffix: "",
|
| | | text: "销售物料",
|
| | | tooltips: "",
|
| | | type: "truefalse",
|
| | | unique: false,
|
| | | verify: "",
|
| | | },
|
| | | {
|
| | | comboxKey: null,
|
| | | customClass: null,
|
| | | data: null,
|
| | | dateFormate: "",
|
| | | defaultValue: "",
|
| | | displayExtension: null,
|
| | | extendAttrMap: null,
|
| | | extendAttrString: null,
|
| | | field: "tuhao",
|
| | | hidden: false,
|
| | | keyAttr: false,
|
| | | prefix: "",
|
| | | readOnly: false,
|
| | | referConfig: null,
|
| | | required: false,
|
| | | selectLibFlag: "",
|
| | | showField: null,
|
| | | suffix: "",
|
| | | text: "图号",
|
| | | tooltips: "提示",
|
| | | type: "text",
|
| | | unique: false,
|
| | | verify: "",
|
| | | },
|
| | | {
|
| | | comboxKey: null,
|
| | | customClass: null,
|
| | | data: null,
|
| | | dateFormate: "",
|
| | | defaultValue: "",
|
| | | displayExtension: null,
|
| | | extendAttrMap: null,
|
| | | extendAttrString: null,
|
| | | field: "xinghaoguige",
|
| | | hidden: false,
|
| | | keyAttr: false,
|
| | | prefix: "",
|
| | | readOnly: false,
|
| | | referConfig: null,
|
| | | required: false,
|
| | | selectLibFlag: "",
|
| | | showField: null,
|
| | | suffix: "",
|
| | | text: "规格型号(CAPP)",
|
| | | tooltips: "",
|
| | | type: "text",
|
| | | unique: false,
|
| | | verify: "",
|
| | | },
|
| | | {
|
| | | comboxKey: null,
|
| | | customClass: null,
|
| | | data: null,
|
| | | dateFormate: "",
|
| | | defaultValue: "",
|
| | | displayExtension: null,
|
| | | extendAttrMap: null,
|
| | | extendAttrString: null,
|
| | | field: "jiliangdw",
|
| | | hidden: false,
|
| | | keyAttr: false,
|
| | | prefix: "",
|
| | | readOnly: false,
|
| | | referConfig: {
|
| | | backPath: "",
|
| | | displayTable: null,
|
| | | height: null,
|
| | | initSort: null,
|
| | | loadType: "all",
|
| | | mapFields: "",
|
| | | method: "GET",
|
| | | muti: false,
|
| | | onlyLeaf: false,
|
| | | paramForFormKey: "",
|
| | | parentFieldName: null,
|
| | | parentUsedField: null,
|
| | | parentValue: null,
|
| | | referContent: null,
|
| | | referType: "appendix",
|
| | | remoteSort: false,
|
| | | tableConfig: {
|
| | | cols: [
|
| | | {
|
| | | align: "left",
|
| | | colspan: 1,
|
| | | comboxKey: null,
|
| | | data: [],
|
| | | dateFormate: null,
|
| | | edit: null,
|
| | | editConfig: null,
|
| | | event: null,
|
| | | field: "id",
|
| | | fieldType: "text",
|
| | | fixed: null,
|
| | | hidden: false,
|
| | | minWidth: null,
|
| | | optionButtons: null,
|
| | | optionField: false,
|
| | | optionJsMap: null,
|
| | | queryField: null,
|
| | | referConfig: null,
|
| | | rowspan: 1,
|
| | | showField: null,
|
| | | sort: true,
|
| | | sortField: "id",
|
| | | style: null,
|
| | | templet: null,
|
| | | title: "编号",
|
| | | unresize: false,
|
| | | width: 150,
|
| | | },
|
| | | {
|
| | | align: "left",
|
| | | colspan: 1,
|
| | | comboxKey: null,
|
| | | data: [],
|
| | | dateFormate: null,
|
| | | edit: null,
|
| | | editConfig: null,
|
| | | event: null,
|
| | | field: "name",
|
| | | fieldType: "text",
|
| | | fixed: null,
|
| | | hidden: false,
|
| | | minWidth: null,
|
| | | optionButtons: null,
|
| | | optionField: false,
|
| | | optionJsMap: null,
|
| | | queryField: null,
|
| | | referConfig: null,
|
| | | rowspan: 1,
|
| | | showField: null,
|
| | | sort: true,
|
| | | sortField: "name",
|
| | | style: null,
|
| | | templet: null,
|
| | | title: "名称",
|
| | | unresize: false,
|
| | | width: 180,
|
| | | },
|
| | | ],
|
| | | oid: null,
|
| | | page: {
|
| | | limit: 15,
|
| | | page: 1,
|
| | | },
|
| | | queryColumns: [
|
| | | {
|
| | | align: "left",
|
| | | colspan: 1,
|
| | | comboxKey: null,
|
| | | data: [],
|
| | | dateFormate: null,
|
| | | edit: null,
|
| | | editConfig: null,
|
| | | event: null,
|
| | | field: "id",
|
| | | fieldType: "text",
|
| | | fixed: null,
|
| | | hidden: false,
|
| | | minWidth: null,
|
| | | optionButtons: null,
|
| | | optionField: false,
|
| | | optionJsMap: null,
|
| | | queryField: null,
|
| | | referConfig: null,
|
| | | rowspan: 1,
|
| | | showField: null,
|
| | | sort: true,
|
| | | sortField: "id",
|
| | | style: null,
|
| | | templet: null,
|
| | | title: "编号",
|
| | | unresize: false,
|
| | | width: 150,
|
| | | },
|
| | | {
|
| | | align: "left",
|
| | | colspan: 1,
|
| | | comboxKey: null,
|
| | | data: [],
|
| | | dateFormate: null,
|
| | | edit: null,
|
| | | editConfig: null,
|
| | | event: null,
|
| | | field: "name",
|
| | | fieldType: "text",
|
| | | fixed: null,
|
| | | hidden: false,
|
| | | minWidth: null,
|
| | | optionButtons: null,
|
| | | optionField: false,
|
| | | optionJsMap: null,
|
| | | queryField: null,
|
| | | referConfig: null,
|
| | | rowspan: 1,
|
| | | showField: null,
|
| | | sort: true,
|
| | | sortField: "name",
|
| | | style: null,
|
| | | templet: null,
|
| | | title: "名称",
|
| | | unresize: false,
|
| | | width: 180,
|
| | | },
|
| | | ],
|
| | | },
|
| | | textField: "name",
|
| | | type: "default",
|
| | | url: "",
|
| | | useFormKey: "",
|
| | | valueField: "oid",
|
| | | where: {
|
| | | materialname: "计量单位",
|
| | | },
|
| | | },
|
| | | required: false,
|
| | | selectLibFlag: "",
|
| | | showField: "jiliangdwname",
|
| | | suffix: "",
|
| | | text: "计量单位",
|
| | | tooltips: "",
|
| | | type: "refer",
|
| | | unique: false,
|
| | | verify: "",
|
| | | },
|
| | | {
|
| | | comboxKey: null,
|
| | | customClass: null,
|
| | | data: null,
|
| | | dateFormate: "",
|
| | | defaultValue: "",
|
| | | displayExtension: null,
|
| | | extendAttrMap: null,
|
| | | extendAttrString: null,
|
| | | field: "chukufangshi",
|
| | | hidden: false,
|
| | | keyAttr: false,
|
| | | prefix: "",
|
| | | readOnly: false,
|
| | | referConfig: null,
|
| | | required: false,
|
| | | selectLibFlag: "",
|
| | | showField: null,
|
| | | suffix: "",
|
| | | text: "出库方式",
|
| | | tooltips: "",
|
| | | type: "text",
|
| | | unique: false,
|
| | | verify: "",
|
| | | },
|
| | | {
|
| | | comboxKey: null,
|
| | | customClass: null,
|
| | | data: null,
|
| | | dateFormate: "",
|
| | | defaultValue: "",
|
| | | displayExtension: null,
|
| | | extendAttrMap: null,
|
| | | extendAttrString: null,
|
| | | field: "beizhushuoming",
|
| | | hidden: false,
|
| | | keyAttr: false,
|
| | | prefix: "",
|
| | | readOnly: false,
|
| | | referConfig: null,
|
| | | required: false,
|
| | | selectLibFlag: "",
|
| | | showField: null,
|
| | | suffix: "",
|
| | | text: "备注说明",
|
| | | tooltips: "",
|
| | | type: "text",
|
| | | unique: false,
|
| | | verify: "",
|
| | | },
|
| | | {
|
| | | comboxKey: null,
|
| | | customClass: null,
|
| | | data: null,
|
| | | dateFormate: "",
|
| | | defaultValue: "",
|
| | | displayExtension: null,
|
| | | extendAttrMap: null,
|
| | | extendAttrString: null,
|
| | | field: "hesuanfenlei",
|
| | | hidden: false,
|
| | | keyAttr: false,
|
| | | prefix: "",
|
| | | readOnly: false,
|
| | | referConfig: {
|
| | | backPath: "",
|
| | | displayTable: null,
|
| | | height: null,
|
| | | initSort: null,
|
| | | loadType: "all",
|
| | | mapFields: "",
|
| | | method: "GET",
|
| | | muti: false,
|
| | | onlyLeaf: false,
|
| | | paramForFormKey: "",
|
| | | parentFieldName: "PARENTCODECLASSIFYOID",
|
| | | parentUsedField: "oid",
|
| | | parentValue:
|
| | | "\\IN(SELECT oid from PLATFORMBTM_CODECLASSIFY where id ='hesuanfenlei')",
|
| | | referContent: null,
|
| | | referType: "codeclassify",
|
| | | remoteSort: false,
|
| | | tableConfig: null,
|
| | | textField: "name",
|
| | | type: "tree",
|
| | | url: "",
|
| | | useFormKey: "",
|
| | | valueField: "oid",
|
| | | where: null,
|
| | | },
|
| | | required: false,
|
| | | selectLibFlag: "",
|
| | | showField: "hesuanfenleiname",
|
| | | suffix: "",
|
| | | text: "核算分类",
|
| | | tooltips: "",
|
| | | type: "refer",
|
| | | unique: false,
|
| | | verify: "",
|
| | | },
|
| | | {
|
| | | comboxKey: "Eummaterialtype",
|
| | | customClass: null,
|
| | | data: null,
|
| | | dateFormate: "",
|
| | | defaultValue: "1001",
|
| | | displayExtension: null,
|
| | | extendAttrMap: null,
|
| | | extendAttrString: null,
|
| | | field: "materialtype",
|
| | | hidden: false,
|
| | | keyAttr: false,
|
| | | prefix: "",
|
| | | readOnly: false,
|
| | | referConfig: null,
|
| | | required: false,
|
| | | selectLibFlag: "",
|
| | | showField: null,
|
| | | suffix: "",
|
| | | text: "物料类型",
|
| | | tooltips: "",
|
| | | type: "combox",
|
| | | unique: false,
|
| | | verify: "",
|
| | | },
|
| | | {
|
| | | comboxKey: "myDataSecret",
|
| | | customClass: null,
|
| | | data: null,
|
| | | dateFormate: "",
|
| | | defaultValue: "",
|
| | | displayExtension: null,
|
| | | extendAttrMap: null,
|
| | | extendAttrString: null,
|
| | | field: "secretgrade",
|
| | | hidden: false,
|
| | | keyAttr: false,
|
| | | prefix: "",
|
| | | readOnly: false,
|
| | | referConfig: null,
|
| | | required: false,
|
| | | selectLibFlag: "",
|
| | | showField: null,
|
| | | suffix: "",
|
| | | text: "secretGrade",
|
| | | tooltips: "",
|
| | | type: "combox",
|
| | | unique: false,
|
| | | verify: "",
|
| | | },
|
| | | ],
|
| | | };
|
| | | },
|
| | | created() {
|
| | | this.preOrSufFixShow();
|
| | | },
|
| | | computed: {
|
| | | dialogVisible: {
|
| | | get() {
|
| | | return this.visible;
|
| | | },
|
| | | set(val) {
|
| | | this.$emit("update:visible", val);
|
| | | },
|
| | | },
|
| | | },
|
| | | methods: {
|
| | | getFormTemplate() {
|
| | | this.loading = true;
|
| | | getFormTemplate({
|
| | | templateOid: "78B8C7C5-A042-0B96-FE6D-65421451782A",
|
| | | codeClassifyOid: "4524E801-6CC6-92E8-1AC3-2AB9604E8F96",
|
| | | page: 1,
|
| | | limit: 30,
|
| | | })
|
| | | .then((res) => {
|
| | | if (res.status === 200) {
|
| | | this.templateData = res.data;
|
| | | this.templateRender();
|
| | | }
|
| | | this.loading = false;
|
| | | console.log(res.data);
|
| | | })
|
| | | .catch((err) => {
|
| | | this.loading = false;
|
| | | console.log(err);
|
| | | });
|
| | | },
|
| | | templateRender() {
|
| | | const items = this.testItems;
|
| | | // const items = this.templateData.formDefineVO.items;
|
| | | items.forEach((item) => {
|
| | | // 隐藏表单元素
|
| | | if (item.hide) {
|
| | | return;
|
| | | }
|
| | | // if (item.field === 'id' || item.field === 'lcstatus') {
|
| | | // item.readOnly = true
|
| | | // }
|
| | | // 设置表单校验的规则,文本
|
| | | let message = "请选择";
|
| | | let trigger = "change";
|
| | | if (item.type === "text") {
|
| | | message = "请输入";
|
| | | trigger = "blur";
|
| | | } else if (item.type === "file") {
|
| | | message = "请上传";
|
| | | }
|
| | | let columnItem = {
|
| | | label: item.text,
|
| | | labelslot: true,
|
| | | prop: item.field,
|
| | | type: this.columnType[item.type],
|
| | | dicData: this.getDictData(item.type, item.dicData),
|
| | | disabled: item.readOnly,
|
| | | prepend: this.preOrSufFixShow("text", item.prefix),
|
| | | append: this.preOrSufFixShow("text", item.suffix),
|
| | | prefixIcon: this.preOrSufFixShow("icon", item.prefix),
|
| | | suffixIcon: this.preOrSufFixShow("icon", item.suffix),
|
| | | valueFormat: item.dateFormate,
|
| | | format: item.dateFormate,
|
| | | keyAttr: item.keyAttr,
|
| | | value: 1,
|
| | | rules: [
|
| | | {
|
| | | required: item.required,
|
| | | message: `请${message}${item.text}`,
|
| | | trigger,
|
| | | },
|
| | | {
|
| | | pattern: item.verify,
|
| | | message: item.tooltips,
|
| | | trigger,
|
| | | },
|
| | | ],
|
| | | props: {
|
| | | label: "value",
|
| | | value: "key",
|
| | | },
|
| | | };
|
| | | console.log(this.$refs.form, "form");
|
| | | this.option.column.push(columnItem);
|
| | | });
|
| | | },
|
| | | close() {
|
| | | this.dialogVisible = false;
|
| | | },
|
| | | // 前后缀
|
| | | preOrSufFixShow(type, val) {
|
| | | if (this.$utilFunc.isEmpty(val) && typeof val !== "string") return;
|
| | | const isIcon = val.slice(0, 8) === "el-icon-";
|
| | | if ((type === "text" && !isIcon) || (type === "icon" && isIcon)) {
|
| | | return val;
|
| | | }
|
| | | },
|
| | | // 获取字典数据
|
| | | getDictData(type, dicData) {
|
| | | if (type === "truefalse") {
|
| | | return [
|
| | | {
|
| | | value: "否",
|
| | | key: 0,
|
| | | },
|
| | | {
|
| | | value: "是",
|
| | | key: 1,
|
| | | },
|
| | | ];
|
| | | } else if (type === "combox") {
|
| | | return dicData;
|
| | | }
|
| | | return [];
|
| | | },
|
| | | },
|
| | | watch: {
|
| | | visible(newV) {
|
| | | if (newV) {
|
| | | this.getFormTemplate();
|
| | | }
|
| | | },
|
| | | },
|
| | | };
|
| | | </script>
|
| | |
|
| | | <style lang="scss" scoped>
|
| | | .key_attr_icon {
|
| | | font-size: 24px;
|
| | | position: relative;
|
| | | top: 2px;
|
| | | color: red;
|
| | | }
|
| | | </style>
|
| | | <template> |
| | | <el-dialog |
| | | :visible.sync="dialogVisible" |
| | | v-dialogDrag |
| | | top="0vh" |
| | | :title="title" |
| | | class="avue-dialog avue-dialog--top" |
| | | :width="dialogOptions.width" |
| | | append-to-body |
| | | v-if="dialogVisible" |
| | | > |
| | | <avue-form |
| | | v-model="form" |
| | | :option="option" |
| | | v-loading="loading" |
| | | ref="form" |
| | | :key="index" |
| | | > |
| | | <template :slot="item.prop + 'Label'" v-for="item in option.column"> |
| | | <span> |
| | | <span>{{ item.label }} </span> |
| | | <el-tooltip |
| | | v-if="item.keyAttr" |
| | | class="item" |
| | | effect="dark" |
| | | content="该属性为关键属性" |
| | | placement="top-start" |
| | | > |
| | | <i class="el-icon-star-on key_attr_icon"></i> |
| | | </el-tooltip> |
| | | <el-tooltip |
| | | v-if="item.tip" |
| | | class="item" |
| | | effect="dark" |
| | | :content="item.tip" |
| | | placement="top-start" |
| | | > |
| | | <i class="el-icon-warning"></i> |
| | | </el-tooltip> |
| | | </span> |
| | | </template> |
| | | </avue-form> |
| | | <FindLike ref="findLike"></FindLike> |
| | | <div class="avue-dialog__footer" v-if="type !== 'detail'"> |
| | | <el-button @click="close()">取 消</el-button> |
| | | <el-button @click="close()" type="primary" :loading="submitBtnLoading">确 定</el-button> |
| | | <el-button @click="findLinkSubmit" type="primary">相似像查询</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </template> |
| | | |
| | | <script> |
| | | import { getFormTemplate, executeCode, findLike } from "@/api/formTemplate"; |
| | | import { getDictionary } from "../../api/system/dict"; |
| | | import FindLike from "./FindLike.vue"; |
| | | export default { |
| | | name: "FormTemplate", |
| | | components: { FindLike }, |
| | | props: { |
| | | visible: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | disabledProp: { |
| | | type: Array, |
| | | default: () => ["id"], |
| | | }, |
| | | templateOid: { |
| | | type: String, |
| | | default: "", |
| | | }, |
| | | codeClassifyOid: { |
| | | type: String, |
| | | default: "", |
| | | }, |
| | | type: { |
| | | type: String, |
| | | default: 'add' |
| | | }, |
| | | title: { |
| | | type: String, |
| | | default: '表单模板' |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | index: 0, |
| | | form: {}, |
| | | loading: false, |
| | | dialogOptions: { |
| | | width: "60%", |
| | | }, |
| | | option: { |
| | | emptyBtn: false, |
| | | submitBtn: false, |
| | | labelWidth: "120", |
| | | column: [], |
| | | }, |
| | | templateData: {}, |
| | | columnType: { |
| | | text: "input", |
| | | combox: "select", |
| | | truefalse: "switch", |
| | | number: "number", |
| | | textarea: "textarea", |
| | | datetime: "datetime", |
| | | date: "date" |
| | | }, |
| | | // 假数据 |
| | | testItems: [ |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: "", |
| | | defaultValue: "", |
| | | displayExtension: null, |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "id", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: "", |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: "", |
| | | showField: null, |
| | | suffix: "", |
| | | text: "传值禁用功能", |
| | | tooltips: "", |
| | | type: "combox", |
| | | unique: false, |
| | | verify: "", |
| | | }, |
| | | { |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: "", |
| | | defaultValue: "", |
| | | displayExtension: null, |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "state", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: "", |
| | | readOnly: true, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: "", |
| | | showField: null, |
| | | suffix: "", |
| | | text: "接口禁用功能", |
| | | tooltips: "", |
| | | type: "combox", |
| | | unique: false, |
| | | verify: "", |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: "", |
| | | defaultValue: "", |
| | | displayExtension: null, |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "oldcode", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: "el-icon-search", |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: "", |
| | | showField: null, |
| | | suffix: "文本后缀测试", |
| | | text: "前后缀功能", |
| | | tooltips: "", |
| | | type: "text", |
| | | unique: false, |
| | | verify: "", |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: "", |
| | | defaultValue: "", |
| | | displayExtension: null, |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "materialname", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: "", |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: true, |
| | | selectLibFlag: "", |
| | | showField: null, |
| | | suffix: "", |
| | | text: "正则校验功能", |
| | | tooltips: "请输入数字", |
| | | type: "text", |
| | | unique: false, |
| | | verify: "/[0-9]/", |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: [ |
| | | { |
| | | attributes: {}, |
| | | key: "model_type", |
| | | value: "模型", |
| | | }, |
| | | { |
| | | attributes: {}, |
| | | key: "part_type", |
| | | value: "零件", |
| | | }, |
| | | ], |
| | | dateFormate: "", |
| | | defaultValue: "", |
| | | displayExtension: null, |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "dataSelect", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: "", |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: "", |
| | | showField: null, |
| | | suffix: "", |
| | | text: "直接返回下拉", |
| | | tooltips: "", |
| | | type: "combox", |
| | | unique: false, |
| | | verify: "", |
| | | }, |
| | | { |
| | | comboxKey: "formTemplateTest", |
| | | customClass: null, |
| | | data: [], |
| | | dateFormate: "", |
| | | defaultValue: "", |
| | | displayExtension: null, |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "dictSelect", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: "", |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: "", |
| | | showField: null, |
| | | suffix: "", |
| | | text: "字典返回下拉", |
| | | tooltips: "", |
| | | type: "combox", |
| | | unique: false, |
| | | verify: "", |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: "", |
| | | defaultValue: "", |
| | | displayExtension: null, |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "firstfl", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: "", |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: "", |
| | | showField: null, |
| | | suffix: "", |
| | | text: "数字输入框", |
| | | tooltips: "", |
| | | type: "number", |
| | | unique: false, |
| | | verify: "", |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: "yyyy-MM-dd HH:mm:ss", |
| | | defaultValue: "", |
| | | displayExtension: null, |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "datetime", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: "", |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: "", |
| | | showField: null, |
| | | suffix: "", |
| | | text: "日期时间选择器", |
| | | tooltips: "", |
| | | type: "datetime", |
| | | unique: false, |
| | | verify: "", |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: "", |
| | | defaultValue: "", |
| | | displayExtension: null, |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "time", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: "", |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: "", |
| | | showField: null, |
| | | suffix: "", |
| | | text: "时间选择器", |
| | | tooltips: "", |
| | | type: "date", |
| | | unique: false, |
| | | verify: "", |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: "", |
| | | defaultValue: "false", |
| | | displayExtension: null, |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "xiaoshouwl", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: "", |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: "", |
| | | showField: null, |
| | | suffix: "", |
| | | text: "开关", |
| | | tooltips: "", |
| | | type: "truefalse", |
| | | unique: false, |
| | | verify: "", |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: "", |
| | | defaultValue: "我是默认值", |
| | | displayExtension: null, |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "tuhao", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: "", |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: "", |
| | | showField: null, |
| | | suffix: "", |
| | | text: "默认值功能", |
| | | tooltips: "提示", |
| | | type: "text", |
| | | unique: false, |
| | | verify: "", |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: "", |
| | | defaultValue: "", |
| | | displayExtension: null, |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "xinghaoguige", |
| | | hidden: false, |
| | | keyAttr: true, |
| | | prefix: "", |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: "", |
| | | showField: null, |
| | | suffix: "", |
| | | text: "属性关键值", |
| | | tooltips: "", |
| | | type: "text", |
| | | unique: false, |
| | | verify: "", |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: "", |
| | | defaultValue: "", |
| | | displayExtension: null, |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "jiliangdw", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: "", |
| | | readOnly: false, |
| | | tip: "我是提示功能", |
| | | required: false, |
| | | selectLibFlag: "", |
| | | showField: "jiliangdwname", |
| | | suffix: "", |
| | | text: "提示功能", |
| | | tooltips: "", |
| | | type: "text", |
| | | unique: false, |
| | | verify: "", |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: "", |
| | | defaultValue: "", |
| | | displayExtension: "this.form.sum = this.form.fun1 + this.form.fun2", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "fun1", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: "", |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: "", |
| | | showField: null, |
| | | suffix: "", |
| | | text: "参数1测试js", |
| | | tooltips: "", |
| | | type: "text", |
| | | unique: false, |
| | | verify: "", |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: "", |
| | | defaultValue: "", |
| | | displayExtension: "this.form.sum = this.form.fun1 + this.form.fun2", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "fun2", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: "", |
| | | readOnly: false, |
| | | required: false, |
| | | selectLibFlag: "", |
| | | showField: "hesuanfenleiname", |
| | | suffix: "", |
| | | text: "参数2测试js", |
| | | tooltips: "", |
| | | type: "text", |
| | | unique: false, |
| | | verify: "", |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: "", |
| | | defaultValue: "", |
| | | displayExtension: "", |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "sum", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: "", |
| | | readOnly: true, |
| | | required: false, |
| | | selectLibFlag: "", |
| | | showField: "", |
| | | suffix: "", |
| | | text: "参数1参数2求和", |
| | | tooltips: "", |
| | | type: "text", |
| | | unique: false, |
| | | verify: "", |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: "", |
| | | defaultValue: "", |
| | | displayExtension: null, |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "textarea", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: "", |
| | | readOnly: false, |
| | | referConfig: null, |
| | | required: false, |
| | | selectLibFlag: "", |
| | | showField: null, |
| | | suffix: "", |
| | | text: "文本域", |
| | | tooltips: "", |
| | | type: "textarea", |
| | | unique: false, |
| | | verify: "", |
| | | }, |
| | | { |
| | | comboxKey: null, |
| | | customClass: null, |
| | | data: null, |
| | | dateFormate: "", |
| | | defaultValue: "", |
| | | displayExtension: null, |
| | | extendAttrMap: null, |
| | | extendAttrString: null, |
| | | field: "cz", |
| | | hidden: false, |
| | | keyAttr: false, |
| | | prefix: "", |
| | | readOnly: true, |
| | | referConfig: true, |
| | | required: false, |
| | | selectLibFlag: "", |
| | | showField: "depId", |
| | | suffix: "", |
| | | text: "参照", |
| | | tooltips: "", |
| | | type: "text", |
| | | unique: false, |
| | | verify: "", |
| | | }, |
| | | ], |
| | | submitBtnLoading: false |
| | | }; |
| | | }, |
| | | created() {}, |
| | | computed: { |
| | | dialogVisible: { |
| | | get() { |
| | | return this.visible; |
| | | }, |
| | | set(val) { |
| | | this.$emit("update:visible", val); |
| | | }, |
| | | }, |
| | | }, |
| | | methods: { |
| | | getFormTemplate() { |
| | | this.loading = true; |
| | | getFormTemplate({ |
| | | templateOid: this.templateOid, |
| | | codeClassifyOid: this.codeClassifyOid, |
| | | }) |
| | | .then((res) => { |
| | | if (res.status === 200) { |
| | | this.templateData = res.data; |
| | | this.templateRender(); |
| | | } |
| | | this.loading = false; |
| | | console.log(res.data); |
| | | }) |
| | | .catch((err) => { |
| | | this.loading = false; |
| | | console.log(err); |
| | | }); |
| | | }, |
| | | templateRender() { |
| | | const items = this.templateData.formDefineVO.items; |
| | | let column = []; |
| | | let dictKeys = []; |
| | | items.forEach((item) => { |
| | | // 隐藏表单元素 |
| | | if (item.hide) { |
| | | return; |
| | | } |
| | | if ( |
| | | item.type === "combox" && |
| | | item.comboxKey && |
| | | (!Array.isArray(item.dicData) || item.dicData.length === 0) |
| | | ) { |
| | | dictKeys.push({ dictKey: item.comboxKey, field: item.field }); |
| | | } |
| | | // 禁用部分属性(外部传值禁用和参照禁用) |
| | | if (this.disabledProp.includes(item.field) || this.$utilFunc.isValuableObj(item.referConfig)) { |
| | | item.readOnly = true; |
| | | } |
| | | // 设置表单校验的规则,文本 |
| | | let message = "请选择"; |
| | | let trigger = "change"; |
| | | if (item.type === "text") { |
| | | message = "请输入"; |
| | | trigger = "blur"; |
| | | } else if (item.type === "file") { |
| | | message = "请上传"; |
| | | } |
| | | let columnItem = { |
| | | label: item.text, |
| | | labelslot: true, |
| | | prop: this.$utilFunc.isValuableObj(item.referConfig) ? (item.showField || item.field) : item.field, |
| | | type: this.columnType[item.type], |
| | | dicData: this.getDataList(item.type, item.data), |
| | | disabled: this.type === 'detail' ? true : item.readOnly, |
| | | prepend: this.preOrSufFixShow("text", item.prefix), |
| | | append: this.preOrSufFixShow("text", item.suffix), |
| | | prefixIcon: this.preOrSufFixShow("icon", item.prefix), |
| | | suffixIcon: this.preOrSufFixShow("icon", item.suffix), |
| | | valueFormat: item.dateFormate, |
| | | format: item.dateFormate, |
| | | keyAttr: item.keyAttr, |
| | | value: item.defaultValue, |
| | | tip: item.tip, |
| | | comboxKey: item.comboxKey, |
| | | change: () => { |
| | | this.changeFun(item.displayExtension, item.prop); |
| | | }, |
| | | span: item.type === "file" || item.type === "textarea" ? 24 : null, |
| | | click: this.clickFun(item.referConfig), |
| | | rules: [ |
| | | { |
| | | required: item.required, |
| | | message: `请${message}${item.text}`, |
| | | trigger, |
| | | }, |
| | | { |
| | | // 如果没有正则则匹配任何字符 |
| | | pattern: item.verify ? item.verify : /[\s\S.]*/g, |
| | | message: item.tooltips, |
| | | trigger, |
| | | }, |
| | | ], |
| | | props: { |
| | | label: "value", |
| | | value: "key", |
| | | }, |
| | | }; |
| | | column.push(columnItem); |
| | | this.$set(this.option, "column", column); |
| | | }); |
| | | this.index++; |
| | | this.geDictData(dictKeys); |
| | | }, |
| | | changeFun(displayExtension, prop) { |
| | | // executeCode({displayExtension, data: this.form}).then(res => { |
| | | // this.form[prop] = res.data.data |
| | | // }) |
| | | }, |
| | | clickFun(referConfig) { |
| | | if (this.type === 'detail') { |
| | | return |
| | | } |
| | | }, |
| | | // 前后缀 |
| | | preOrSufFixShow(type, val) { |
| | | if (this.$utilFunc.isEmpty(val) && typeof val !== "string") return; |
| | | const isIcon = val.slice(0, 8) === "el-icon-"; |
| | | if ((type === "text" && !isIcon) || (type === "icon" && isIcon)) { |
| | | return val; |
| | | } |
| | | }, |
| | | // 获取swich和已拿到的下拉数据 |
| | | getDataList(type, dicData) { |
| | | if (type === "truefalse") { |
| | | return [ |
| | | { |
| | | key: false, |
| | | value: "否", |
| | | }, |
| | | { |
| | | key: true, |
| | | value: "是", |
| | | }, |
| | | ]; |
| | | } else if (type === "combox") { |
| | | return dicData; |
| | | } |
| | | return []; |
| | | }, |
| | | // 获取字典数据 |
| | | geDictData(dictKeys) { |
| | | dictKeys.forEach((dictObj) => { |
| | | getDictionary({ code: dictObj.dictKey }).then((res) => { |
| | | if (res.data && res.data.code === 200) { |
| | | this.option.column = this.option.column.map((item) => { |
| | | if (item.field === dictObj.field) { |
| | | let dictData = (res.data.data || []).map((itm) => { |
| | | itm.value = itm.dictValue; |
| | | itm.key = itm.dictKey; |
| | | return itm; |
| | | }); |
| | | item.dicData = dictData; |
| | | } |
| | | return item; |
| | | }); |
| | | } |
| | | }); |
| | | }); |
| | | }, |
| | | findLinkSubmit() { |
| | | this.templateData.templateVO.data = this.form |
| | | console.log(this.$refs.findLike, 'this.$refs.findLike'); |
| | | this.$refs.findLike.findLinkClick(this.templateData.templateVO) |
| | | } |
| | | }, |
| | | watch: { |
| | | visible(newV) { |
| | | if (newV) { |
| | | this.getFormTemplate(); |
| | | // this.templateRender() |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .key_attr_icon { |
| | | font-size: 24px; |
| | | position: relative; |
| | | top: 2px; |
| | | color: red; |
| | | } |
| | | // 解决swich组件不垂直居中的问题 |
| | | /deep/ .el-switch { |
| | | vertical-align: baseline; |
| | | } |
| | | </style> |