diff --git a/package.json b/package.json index 3036189..4dca0f6 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "dependencies": { "@smallwei/avue": "^2.9.15", "@tinymce/tinymce-vue": "^3.0.1", + "af-table-column": "^1.0.3", "avue-plugin-map": "^1.0.1", "axios": "0.18.1", "core-js": "3.6.5", diff --git a/src/components/XyTable/index.vue b/src/components/XyTable/index.vue index de19889..7525b4c 100644 --- a/src/components/XyTable/index.vue +++ b/src/components/XyTable/index.vue @@ -794,7 +794,7 @@ export default { return $scopedSlots[item.prop](item, index); } return ( - { return ( - + > ); }) : ""} - + ); })} {$scopedSlots.btns ? $scopedSlots.btns() : this.isCreateAuthBtns()} diff --git a/src/const/templateProps.js b/src/const/templateProps.js index 06b20c6..8b931f1 100644 --- a/src/const/templateProps.js +++ b/src/const/templateProps.js @@ -6,13 +6,16 @@ export const templatePropsMap = new Map([ }], ["richtext",'my-tinymce'], ['select', { - value: '选项1' + value: '选项1', + readonly: true }], ['radio',{ - value: '选项1' + value: '选项1', + readonly: true }], ["checkbox", { multiple: true, + readonly: true, value: ['选项1'] }], ["date", { diff --git a/src/main.js b/src/main.js index 4c756ca..ab218e5 100644 --- a/src/main.js +++ b/src/main.js @@ -79,6 +79,8 @@ import tinymce from '@/components/XyTinymce' Vue.component('my-tinymce',tinymce) import myMap from "@/components/XyMap" Vue.component('my-map',myMap) +import afTableColumn from 'af-table-column' +Vue.component('af-table-column',afTableColumn) Vue.prototype.$integrateData = (target,value) => { for(let i in target){ diff --git a/src/views/component/dialog.vue b/src/views/component/dialog.vue index 7de13eb..3de0beb 100644 --- a/src/views/component/dialog.vue +++ b/src/views/component/dialog.vue @@ -54,7 +54,10 @@ export default { props: { label: i.name, prop: i.field, - required: i.validation instanceof Array ? !!i.validation.find(i => i === 'required') : false, + required: + i.validation instanceof Array + ? !!i.validation.find((i) => i === "required") + : false, }, }, [ @@ -63,7 +66,7 @@ export default { { ref: `elEdit_${i.field}`, style: { - width: '100%' + width: "100%", }, props: { ...addPropsMap.get(i.edit_input), @@ -83,6 +86,55 @@ export default { } }, }, + scopedSlots: + i.edit_input === "file" || i.edit_input === "files" + ? { + file: (scope) => { + let { file } = scope; + + console.log(111, file); + 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", + } + }, + file.name + ) + ]), + h("i", { + class: "el-icon-close", + on: { + ["click"]: () => + this.fileRemoveHandler( + file, + i.field + ), + }, + }), + ]; + }, + } + : "", }, this.optionsRender(h, i) ), @@ -140,12 +192,14 @@ export default { dialogVisible: false, form: {}, rules: {}, - file: { - - } + file: {}, }; }, methods: { + fileRemoveHandler(file, field) { + this.file[field] = this.file[field].filter((item) => item !== file); + this.file = Object.assign({}, this.file); + }, //on事件类别获取 getEventType(info) { if (info.type === "checkbox") { @@ -159,11 +213,13 @@ export default { if (info.edit_input === "checkbox" || info.edit_input === "radio") { return info._paramters && info._paramters instanceof Array ? info._paramters.map((i) => - h( - "el-option", - { props: { label: i.name || i.no || i.value || i.id , value : i.id } } + h("el-option", { + props: { + label: i.name || i.no || i.value || i.id, + value: i.id, + }, + }) ) - ) : []; } if (info.edit_input === "file" || info.edit_input === "files") { @@ -230,6 +286,14 @@ export default { props.onRemove = (file, fileList) => { this.file[info.field] = fileList; }; + + props.onError = (err,file,fileList) => { + this.file[info.field] = fileList; + this.$message({ + type: "warning", + message: err + }) + } } return props; }, @@ -270,6 +334,18 @@ export default { const res = await show({ id: this.id, table_name: this.tableName }); this.$integrateData(this.form, res); this.form = Object.assign({}, this.form); + + this.formInfo.forEach((i) => { + if (i && i.edit_input === "file") { + this.file[i.field] = [ + { + name: res[i.link_with_name]?.original_name, + url: res[i.link_with_name]?.url, + response: res[i.link_with_name], + }, + ]; + } + }); }, submit() { @@ -294,8 +370,8 @@ export default { (i) => i?.response?.id ); } - if(info.edit_input === "file") { - this.form[info.field] = this.file[info.field][0]?.response?.id + if (info.edit_input === "file") { + this.form[info.field] = this.file[info.field][0]?.response?.id; } }); console.log(this.form); @@ -322,7 +398,11 @@ export default { newVal.forEach((i) => { if (i.field) { this.form[i.field] = ""; - if (i.validation instanceof Array && i.validation.length > 0 && !!i.validation.find(i => i === 'required')) { + if ( + i.validation instanceof Array && + i.validation.length > 0 && + !!i.validation.find((i) => i === "required") + ) { this.rules[i.field] = [ { required: true, message: `请填写${i.name}` }, ]; @@ -330,7 +410,7 @@ export default { if (i.edit_input === "files") { this.form[i.field] = []; } - if(i.edit_input === "files" || i.edit_input === "file") { + if (i.edit_input === "files" || i.edit_input === "file") { this.file[i.field] = []; } if (i.edit_input === "checkbox") { @@ -359,4 +439,15 @@ export default { }; - + diff --git a/src/views/component/imports.vue b/src/views/component/imports.vue index 3ed0977..fd62748 100644 --- a/src/views/component/imports.vue +++ b/src/views/component/imports.vue @@ -43,7 +43,7 @@ import * as XLSX from "xlsx"; import { saveAs } from "file-saver"; import { getToken } from "@/utils/auth"; -import { imports } from "@/api/system/baseForm" +import { imports } from "@/api/system/baseForm"; export default { props: { formInfo: { diff --git a/src/views/component/table.vue b/src/views/component/table.vue index ac9a263..da64d49 100644 --- a/src/views/component/table.vue +++ b/src/views/component/table.vue @@ -283,6 +283,7 @@ export default { this.selectForm = '' this.table = res.data.map(i => { let linkOb = {} + if(i.parameter_id) { linkOb.customFn = row => { return ( @@ -293,9 +294,15 @@ export default { if(i.link_table_name) { if(i.link_relation === 'hasOne') { linkOb.customFn = row => { - return ( - { row[i.link_with_name]?.name || row[i.link_with_name]?.no || row[i.link_with_name]?.value } - ) + if(i.edit_input === 'file') { + return ( + { row[i.link_with_name]?.original_name } + ) + }else{ + return ( + { row[i.link_with_name]?.name || row[i.link_with_name]?.no || row[i.link_with_name]?.value } + ) + } } } if(i.link_relation === 'hasMany') { @@ -311,8 +318,15 @@ export default { return Object.assign({ prop: i.field, label: i.name, + width: i.width, + fixed: i.is_fixed },linkOb) }) + this.table.unshift({ + type: 'index', + width: 60, + label: '序号' + }) } }, computed: { @@ -360,4 +374,15 @@ export default { padding: 0 10px; } } + +a { + color: red; + text-decoration: none; + transition: all 0.2s; +} + +a:hover { + color: red; + text-decoration: underline; +} diff --git a/src/views/system/components/editPane.vue b/src/views/system/components/editPane.vue index fb19b18..2fdd4aa 100644 --- a/src/views/system/components/editPane.vue +++ b/src/views/system/components/editPane.vue @@ -15,7 +15,7 @@ > - + + + + + + + + + 保存 - + diff --git a/src/views/system/components/formEditor.vue b/src/views/system/components/formEditor.vue index 0fa48a1..b56794a 100644 --- a/src/views/system/components/formEditor.vue +++ b/src/views/system/components/formEditor.vue @@ -205,6 +205,8 @@ export default { list_show: 1, link_table_name: "", link_relation: "", + is_fix: "", + width: "" }; this.$store.commit("form/SPLICE_FORM_LIST", { diff --git a/src/views/system/form.vue b/src/views/system/form.vue index f5ad469..f2e3967 100644 --- a/src/views/system/form.vue +++ b/src/views/system/form.vue @@ -69,13 +69,13 @@ export default { { prop:'table_name', label:'表名', - width:180, + //width:180, sortable:'custom', }, { prop:'name', label:'名称', - width:200, + // width:200, sortable:'custom', }, ]