| | |
| | | :class="[ |
| | | textInline ? 'text-inline' : '', |
| | | fxRight ? 'fx-right' : '', |
| | | isChrome ? 'chrome' : '' |
| | | isChrome ? 'chrome' : '', |
| | | ]" |
| | | > |
| | | <div class="mask" v-show="loading"></div> |
| | |
| | | :row-class-name="initIndex" |
| | | :cell-style="getCellStyle" |
| | | style="width: 100%" |
| | | :scrollbar-always-on="true" |
| | | |
| | | :scrollbar-always-on="true" |
| | | > |
| | | <el-table-column |
| | | v-if="columnIndex" |
| | | type="index" |
| | | :fixed="fixed" |
| | | width="55" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | v-if="ck" |
| | | type="selection" |
| | |
| | | :selectable="selectable" |
| | | width="55" |
| | | ></el-table-column> |
| | | <!-- :selectable="selectable" --> |
| | | <el-table-column |
| | | v-if="columnIndex" |
| | | type="index" |
| | | :fixed="fixed" |
| | | label="åºå·" |
| | | width="55" |
| | | ></el-table-column> |
| | | |
| | | <!-- 2020.10.10ç§»é¤table第ä¸è¡å¼ºå¶æåº --> |
| | | <el-table-column |
| | | v-for="(column, cindex) in filterColumns" |
| | |
| | | :key="column.field + cindex" |
| | | :align="column.align" |
| | | :sortable="column.sort ? 'custom' : false" |
| | | :show-overflow-tooltip="column.showOverflowTooltip" |
| | | :show-overflow-tooltip="true" |
| | | > |
| | | <template #header> |
| | | <span |
| | |
| | | <!-- å¯ç¨åå»ç¼è¾åè½ï¼å¸¦ç¼è¾åè½çä¸ä¼æ¸²æä¸ææ¡ææ¬èæ¯é¢è² --> |
| | | <!-- @click="rowBeginEdit(scope.$index,cindex)" --> |
| | | <!-- 2021.09.21å¢å ç¼è¾æ¶å¯¹readonly屿§å¤æ --> |
| | | <template v-else-if="column.edit&&!column.readonly&&['file', 'img','excel'].indexOf(column.edit.type) != -1" > |
| | | <div style="display:flex;align-items: center;" @click.stop> |
| | | <i style="padding: 3px;margin-right: 10px;color:#8f9293;cursor: pointer;" @click="showUpload(scope.row, column)" class="el-icon-upload"></i> |
| | | <img |
| | | v-if="column.edit.type == 'img'" |
| | | v-for="(file, imgIndex) in getFilePath( |
| | | scope.row[column.field], |
| | | column |
| | | )" |
| | | :key="imgIndex" |
| | | :onerror="defaultImg" |
| | | @click="viewImg(scope.row, column, file.path, $event)" |
| | | class="table-img" |
| | | :src="file.path" |
| | | /> |
| | | <a |
| | | style="margin-right: 8px" |
| | | v-else |
| | | class="t-file" |
| | | v-for="(file, fIndex) in getFilePath( |
| | | scope.row[column.field], |
| | | column |
| | | )" |
| | | :key="fIndex" |
| | | @click="dowloadFile(file)" |
| | | >{{ file.name }}</a |
| | | > |
| | | </div> |
| | | <template |
| | | v-else-if=" |
| | | column.edit && |
| | | !column.readonly && |
| | | ['file', 'img', 'excel'].indexOf(column.edit.type) != -1 |
| | | " |
| | | > |
| | | <div style="display: flex; align-items: center" @click.stop> |
| | | <i |
| | | style=" |
| | | padding: 3px; |
| | | margin-right: 10px; |
| | | color: #8f9293; |
| | | cursor: pointer; |
| | | " |
| | | @click="showUpload(scope.row, column)" |
| | | class="el-icon-upload" |
| | | ></i> |
| | | <img |
| | | v-show="column.edit.type == 'img'" |
| | | v-for="(file, imgIndex) in getFilePath( |
| | | scope.row[column.field], |
| | | column |
| | | )" |
| | | :key="imgIndex" |
| | | :onerror="defaultImg" |
| | | @click="viewImg(scope.row, column, file.path, $event)" |
| | | class="table-img" |
| | | :src="file.path" |
| | | /> |
| | | <a |
| | | style="margin-right: 8px" |
| | | v-show="column.edit.type != 'img'" |
| | | class="t-file" |
| | | v-for="(file, fIndex) in getFilePath( |
| | | scope.row[column.field], |
| | | column |
| | | )" |
| | | :key="fIndex" |
| | | @click="dowloadFile(file)" |
| | | >{{ file.name }}</a |
| | | > |
| | | </div> |
| | | </template> |
| | | <div |
| | | v-else-if=" |
| | | column.edit && |
| | | !column.readonly && |
| | | (column.edit.keep || edit.rowIndex == scope.$index) |
| | | !column.readonly && |
| | | (column.edit.keep || edit.rowIndex == scope.$index) |
| | | " |
| | | class="edit-el" |
| | | > |
| | |
| | | ? true |
| | | : false |
| | | " |
| | | :multiple="column.edit.type == 'select' ? false : true" |
| | | :multiple="column.edit.type == 'select'" |
| | | :placeholder="column.placeholder || column.title" |
| | | :autocomplete="column.autocomplete" |
| | | @change=" |
| | |
| | | lazy |
| | | > |
| | | <!-- ä¸ä¼ å¾çãexcelæå
¶ä»æä»¶ãæä»¶æ°éã大å°éå¶é½å¯ä»¥ï¼åç
§voluploadç»ä»¶api --> |
| | | <div style="height: 200px;display: flex;align-items: center;"> |
| | | <div style="height: 200px; display: flex; align-items: center"> |
| | | <VolUpload |
| | | style="text-align: center; " |
| | | :autoUpload="currentColumn.edit.autoUpload" |
| | | :multiple="currentColumn.edit.multiple" |
| | | :url="uploadUrl" |
| | | :max-file="currentColumn.edit.maxFile" |
| | | :img="currentColumn.edit.type == 'img'" |
| | | :excel="currentColumn.edit.type == 'excel'" |
| | | :fileTypes="currentColumn.edit.fileTypes ? currentColumn.edit.fileTypes : []" |
| | | :fileInfo="fileInfo" |
| | | :upload-after="uploadAfter" |
| | | > |
| | | <div>{{ currentColumn.message}}</div> |
| | | </VolUpload> |
| | | style="text-align: center" |
| | | :autoUpload="currentColumn.edit.autoUpload" |
| | | :multiple="currentColumn.edit.multiple" |
| | | :url="uploadUrl" |
| | | :max-file="currentColumn.edit.maxFile" |
| | | :img="currentColumn.edit.type == 'img'" |
| | | :excel="currentColumn.edit.type == 'excel'" |
| | | :fileTypes=" |
| | | currentColumn.edit.fileTypes ? currentColumn.edit.fileTypes : [] |
| | | " |
| | | :fileInfo="fileInfo" |
| | | :upload-after="uploadAfter" |
| | | > |
| | | <div>{{ currentColumn.message }}</div> |
| | | </VolUpload> |
| | | </div> |
| | | <template #footer> |
| | | <div style="text-align: center; "> |
| | | <el-button type="default" size="small" @click="uploadModel=false">å
³é</el-button > |
| | | <el-button type="primary" size="small" @click="saveUpload" >ä¿å</el-button > |
| | | </div> |
| | | <div style="text-align: center"> |
| | | <el-button type="default" size="small" @click="uploadModel = false" |
| | | >å
³é</el-button |
| | | > |
| | | <el-button type="primary" size="small" @click="saveUpload" |
| | | >ä¿å</el-button |
| | | > |
| | | </div> |
| | | </template> |
| | | </VolBox> |
| | | |
| | | </template> |
| | | <script> |
| | | import VolTableRender from './VolTable/VolTableRender'; |
| | | import VolTableRender from "./VolTable/VolTableRender"; |
| | | let _errMsg; |
| | | import { defineComponent,defineAsyncComponent } from 'vue'; |
| | | import { defineComponent, defineAsyncComponent } from "vue"; |
| | | export default defineComponent({ |
| | | //https://github.com/element-plus/element-plus/issues/1483 |
| | | //没æåå
çselection屿§äºï¼çissueä¸ä½¿ç¨select/selectallè·å |
| | | //ç嬿°ç»é¿åº¦ï¼å¦æå é¤äºæ°æ®ï¼ç°å¨åªè½è¢«è¿«æ¸
餿æéä¸çè¡ |
| | | watch: { |
| | | 'tableData.length': { |
| | | "tableData.length": { |
| | | handler(newLen, oldLen) { |
| | | this.watchRowSelectChange(newLen, oldLen); |
| | | } |
| | | }, |
| | | }, |
| | | 'rowData.length': { |
| | | "rowData.length": { |
| | | handler(newLen, oldLen) { |
| | | this.watchRowSelectChange(newLen, oldLen); |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | }, |
| | | components: { 'table-render': VolTableRender, |
| | | VolUpload: defineAsyncComponent(() =>import("@/components/basic/VolUpload.vue") ), |
| | | VolBox: defineAsyncComponent(() => import("@/components/basic/VolBox.vue")), |
| | | }, |
| | | components: { |
| | | "table-render": VolTableRender, |
| | | VolUpload: defineAsyncComponent(() => |
| | | import("@/components/basic/VolUpload.vue") |
| | | ), |
| | | VolBox: defineAsyncComponent(() => import("@/components/basic/VolBox.vue")), |
| | | }, |
| | | props: { |
| | | rowKey: { |
| | | // æ å½¢ç»æç主é®å段ï¼å¦æè®¾ç½®å¼é»è®¤ä¼å¼å¯æ å½¢tableï¼æ³¨ærowKeyåæ®µçå¼å¿
é¡»æ¯å¯ä¸ï¼2021.05.02ï¼ |
| | | typeof: String, |
| | | default: undefined |
| | | default: undefined, |
| | | }, |
| | | loadTreeChildren: { |
| | | // æ å½¢ç»æå è½½åèç¹ |
| | | type: Function, |
| | | default: (tree, treeNode, resolve) => { |
| | | return resolve([]); |
| | | } |
| | | }, |
| | | }, |
| | | textInline: { |
| | | // è¡¨æ ¼å
容è¶
åºåæ¯å¦æ¢è¡æ¾ç¤ºï¼2020.01.16ï¼ |
| | | type: Boolean, |
| | | default: true |
| | | default: true, |
| | | }, |
| | | tableData: { |
| | | // è¡¨æ°æ®æº,é
ç½®äºurlå°±ä¸ç¨ä¼ è¿ä¸ªåæ°äº |
| | | type: Array, |
| | | default: () => { |
| | | return []; |
| | | } |
| | | }, |
| | | }, |
| | | columns: { |
| | | type: Array, |
| | | default: [] |
| | | default: [], |
| | | }, |
| | | height: { |
| | | type: Number, |
| | | default: 0 |
| | | default: 0, |
| | | }, |
| | | maxHeight: { |
| | | type: Number, |
| | | default: 0 |
| | | default: 0, |
| | | }, |
| | | linkView: { |
| | | type: Function, |
| | | default: function() { |
| | | default: function () { |
| | | return 1; |
| | | } |
| | | }, |
| | | }, |
| | | pagination: { |
| | | type: Object, |
| | | default: function() { |
| | | return { total: 0, size: 30, sortName: '' }; |
| | | } |
| | | default: function () { |
| | | return { total: 0, size: 30, sortName: "" }; |
| | | }, |
| | | }, |
| | | url: { |
| | | type: String, |
| | | default: '' |
| | | default: "", |
| | | }, |
| | | paginationHide: { |
| | | type: Boolean, |
| | | default: true |
| | | default: true, |
| | | }, |
| | | color: { |
| | | type: Boolean, |
| | | default: true |
| | | default: true, |
| | | }, |
| | | index: { |
| | | // æ¯å¦å建索å¼å·,妿éè¦è¡¨æ ¼ç¼è¾åè½ï¼è¿ééè¦è®¾ç½®ä¸ºtrue |
| | | type: Boolean, |
| | | default: false |
| | | default: false, |
| | | }, |
| | | allowEmpty: { |
| | | // è¡¨æ ¼æ°æ®ä¸ºç©ºæ¶æ¯å¦é»è®¤ä¸º-- |
| | | type: Boolean, |
| | | default: true |
| | | default: true, |
| | | }, |
| | | defaultLoadPage: { |
| | | // ä¼ å
¥äºurlï¼æ¯å¦é»è®¤å è½½è¡¨æ ¼æ°æ® |
| | | type: Boolean, |
| | | default: true |
| | | default: true, |
| | | }, |
| | | loadKey: { |
| | | // æ¯å¦èªå¨ä»åå°å è½½æ°æ®æº |
| | | type: Boolean, |
| | | default: true |
| | | default: true, |
| | | }, |
| | | single: { |
| | | type: Boolean, // æ¯å¦åé |
| | | default: false |
| | | default: false, |
| | | }, |
| | | doubleEdit: { |
| | | type: Boolean, // æ¯å¦åå»å¯ç¨ç¼è¾åè½ |
| | | default: true |
| | | default: true, |
| | | }, |
| | | beginEdit: { |
| | | // ç¼è¾å¼å§ |
| | | type: Function, |
| | | default: function(row, column, index) { |
| | | default: function (row, column, index) { |
| | | return true; |
| | | } |
| | | }, |
| | | }, |
| | | endEditBefore: { |
| | | // ç»æç¼è¾å |
| | | type: Function, |
| | | default: function(row, column, index) { |
| | | default: function (row, column, index) { |
| | | return true; |
| | | } |
| | | }, |
| | | }, |
| | | endEditAfter: { |
| | | // ç»æç¼è¾å |
| | | type: Function, |
| | | default: function(row, column, index) { |
| | | default: function (row, column, index) { |
| | | return true; |
| | | } |
| | | }, |
| | | }, |
| | | ck: { |
| | | // æ¯å¦æ¾ç¤ºcheckbox |
| | | type: Boolean, |
| | | default: true |
| | | default: true, |
| | | }, |
| | | columnIndex: { |
| | | // æ¯å¦æ¾ç¤ºè¡å·(2020..11.1) |
| | | type: Boolean, |
| | | default: true |
| | | default: true, |
| | | }, |
| | | highlightCurrentRow: { |
| | | //å¢å éä¸è¡é«äº®æ¾ç¤º(2022.10.07) |
| | | type: Boolean, |
| | | default: true |
| | | default: true, |
| | | }, |
| | | select2Count: { |
| | | //è¶
åºæ°éæ¾ç¤ºselect2ç»ä»¶ |
| | | type: Number, |
| | | default: 500 |
| | | default: 500, |
| | | }, |
| | | selectable: { |
| | | type: Function, |
| | | default: (row, index) => { |
| | | return true; |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | }, |
| | | data() { |
| | | return { |
| | | fixed: true, //æ¯åºå®è¡å·ä¸checkbox |
| | | fixed: false, //æ¯åºå®è¡å·ä¸checkbox |
| | | clickEdit: true, //2021.07.17设置为ç¹å»è¡ç»æç¼è¾ |
| | | randomTableKey: 1, |
| | | visiblyColumns: [], |
| | | key: '', |
| | | key: "", |
| | | realHeight: 0, |
| | | realMaxHeight: 0, |
| | | enableEdit: false, // æ¯å¦å¯è¡¨æ ¼ç¨ç¼è¾åè½ |
| | | empty: this.allowEmpty ? '' : '--', |
| | | defaultImg: 'this.src="' + require('@/assets/imgs/error.png') + '"', |
| | | empty: this.allowEmpty ? "" : "--", |
| | | defaultImg: 'this.src="' + require("@/assets/imgs/error.png") + '"', |
| | | loading: false, |
| | | footer: {}, |
| | | total: 0, |
| | | formatConfig: {}, |
| | | // defaultColor: "", |
| | | // 2020.09.06è°æ´tableåæ°æ®æºçèæ¯é¢è² |
| | | colors: ['', 'warning', 'success', 'danger', 'info'], |
| | | colors: ["", "warning", "success", "danger", "info"], |
| | | rule: { |
| | | phone: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, |
| | | decimal: /(^[\-0-9][0-9]*(.[0-9]+)?)$/, |
| | | number: /(^[\-0-9][0-9]*([0-9]+)?)$/ |
| | | number: /(^[\-0-9][0-9]*([0-9]+)?)$/, |
| | | }, |
| | | columnNames: [], |
| | | rowData: [], |
| | | paginations: { |
| | | sort: '', |
| | | order: 'desc', |
| | | Foots: '', |
| | | sort: "", |
| | | order: "desc", |
| | | Foots: "", |
| | | total: 0, |
| | | // 2020.08.29å¢å èªå®ä¹å页æ¡å¤§å° |
| | | sizes: [30, 60, 100, 120], |
| | | size: 30, // é»è®¤åé¡µå¤§å° |
| | | Wheres: [], |
| | | page: 1, |
| | | rows: 30 |
| | | rows: 30, |
| | | }, |
| | | errorFiled: '', |
| | | errorFiled: "", |
| | | edit: { columnIndex: -1, rowIndex: -1 }, // å½ååå»ç¼è¾çè¡ä¸ååæ |
| | | editStatus: {}, |
| | | summary: false, // æ¯å¦æ¾ç¤ºå计 |
| | |
| | | //vol-tableå¸¦æ°æ®æºçåå
æ ¼æ¯å¦å¯ç¨tagæ ç¾(䏿æ¡çåå
æ ¼ä»¥tagæ ç¾æ¾ç¤º) |
| | | //2023.04.02æ´æ°voltableä¸main.js |
| | | useTag: true, |
| | | currentRow:{}, |
| | | currentColumn:[], |
| | | fileInfo:[], |
| | | uploadUrl:"", |
| | | uploadModel:false |
| | | currentRow: {}, |
| | | currentColumn: [], |
| | | fileInfo: [], |
| | | uploadUrl: "", |
| | | uploadModel: false, |
| | | }; |
| | | }, |
| | | created() { |
| | |
| | | this.realHeight = this.getHeight(); |
| | | this.realMaxHeight = this.getMaxHeight(); |
| | | this.fxRight = this.columns.some((x) => { |
| | | return x.fixed == 'right'; |
| | | return x.fixed == "right"; |
| | | }); |
| | | //2021.09.21ç§»é¤å¼ºå¶åºå®è¡å·ä¸checkboxå |
| | | if ( |
| | | this.columns.some((x) => { |
| | | return x.fixed && x.fixed != 'right'; |
| | | return x.fixed && x.fixed != "right"; |
| | | }) |
| | | ) { |
| | | this.fixed = true; |
| | |
| | | // ä»åå°å 䏿æ¡ç[æ¯å¦å¯ç¨ç]æ°æ®æº |
| | | let keys = []; |
| | | let columnBind = []; |
| | | this.summaryData.push('å计'); |
| | | this.summaryData.push("å计"); |
| | | if (this.columnIndex) { |
| | | this.summaryData.push(' '); |
| | | this.summaryData.push(" "); |
| | | } |
| | | this.columns.forEach((x, _index) => { |
| | | if (x.cellStyle) { |
| | |
| | | if (!x.hidden) { |
| | | // this.summaryIndex[x.field] = _index; |
| | | // 2020.10.11ä¿®å¤æ±ååéä½çé®é¢ |
| | | this.summaryData.push(''); |
| | | this.summaryData.push(""); |
| | | this.summaryIndex[x.field] = this.summaryData.length - 1; |
| | | } |
| | | // æ±å |
| | |
| | | }); |
| | | if (keys.length > 0) { |
| | | this.http |
| | | .post('/api/Sys_Dictionary/GetVueDictionary', keys) |
| | | .post("/api/Sys_Dictionary/GetVueDictionary", keys) |
| | | .then((dic) => { |
| | | dic.forEach((x) => { |
| | | if (x.data.length > this.select2Count) { |
| | |
| | | // è½¬æ¢æ°æ®æºçç±»åä¸åçç±»åä¸è´(2020.04.04) |
| | | if ( |
| | | c.key == x.dicNo && |
| | | (c.valueTyoe == 'int' || c.valueTyoe == 'sbyte') |
| | | (c.valueTyoe == "int" || c.valueTyoe == "sbyte") |
| | | ) { |
| | | x.data.forEach((d) => { |
| | | // 2020.09.01å¢å 对æ°åç±»åçäºæ¬¡å¤æ |
| | |
| | | this.paginations.rows = this.pagination.size; |
| | | } |
| | | this.enableEdit = this.columns.some((x) => { |
| | | return x.hasOwnProperty('edit'); |
| | | return x.hasOwnProperty("edit"); |
| | | }); |
| | | let keyColumn = this.columns.find((x) => { |
| | | return x.isKey; |
| | |
| | | } |
| | | return !x.hidden; |
| | | }); |
| | | } |
| | | }, |
| | | }, |
| | | methods: { |
| | | watchRowSelectChange(newLen, oldLen) { |
| | |
| | | }, |
| | | rowDbClick(row, column, event) { |
| | | //2021.05.23å¢å åå»è¡äºä»¶ |
| | | this.$emit('rowDbClick', { row, column, event }); |
| | | this.$emit("rowDbClick", { row, column, event }); |
| | | }, |
| | | rowClick(row, column, event) { |
| | | // row.selectable = !row.selectable; |
| | | // this.$refs.table.toggleRowSelection(row); |
| | | |
| | | |
| | | // if(this.batchDeleteArr.length > 0){ |
| | | // this.checkNum = this.batchDeleteArr.length |
| | | // this.isCheck = true |
| | | // }else{ |
| | | // this.isCheck = false |
| | | // } |
| | | |
| | | |
| | | |
| | | //2022.02.20å¢å ç¹å»æ¶è¡¨æ ¼åæ°å¤æ |
| | | if (!column) { |
| | | return; |
| | | } |
| | | //æ£å¨ç¼è¾æ¶ï¼ç¦æ¢åºårowClickäºä»¶ |
| | | if (this.edit.rowIndex == -1) { |
| | | this.$emit('rowClick', { row, column, event }); |
| | | this.$emit("rowClick", { row, column, event }); |
| | | } |
| | | // ç¹å»è¡äºä»¶(2020.11.07) |
| | | |
| | |
| | | //彿£å¨ç¼è¾ï¼ä¸ç¹å»å°å
¶ä»è¡æ¶ï¼å¨åç¼è¾çè¡ç»æç¼è¾åï¼è§¦åæ°è¡çrowClickäºä»¶ |
| | | //æ£å¨ç¼è¾æ¶ï¼ç¦æ¢åºårowClickäºä»¶ |
| | | if (this.edit.rowIndex == -1) { |
| | | this.$emit('rowClick', { row, column, event }); |
| | | this.$emit("rowClick", { row, column, event }); |
| | | } |
| | | } |
| | | this.rowBeginEdit(row, column); |
| | |
| | | file.path, |
| | | file.name, |
| | | { |
| | | Authorization: this.$store.getters.getToken() |
| | | Authorization: this.$store.getters.getToken(), |
| | | }, |
| | | this.http.ipAddress |
| | | ); |
| | |
| | | return column.formatter(pathSring); |
| | | } |
| | | let filePath; |
| | | if (column.base64 && pathSring.indexOf('data') != -1) { |
| | | filePath = (',' + pathSring) |
| | | .split(',data') |
| | | if (column.base64 && pathSring.indexOf("data") != -1) { |
| | | filePath = ("," + pathSring) |
| | | .split(",data") |
| | | .filter((x) => { |
| | | return x; |
| | | }) |
| | | .map((m) => { |
| | | return 'data' + m; |
| | | return "data" + m; |
| | | }); |
| | | } else { |
| | | filePath = pathSring.replace(/\\/g, '/').split(','); |
| | | filePath = pathSring.replace(/\\/g, "/").split(","); |
| | | } |
| | | |
| | | let fileInfo = []; |
| | |
| | | // 2020.12.19å¢å base64å¾çæ¾ç¤º |
| | | if (column.base64) { |
| | | fileInfo.push({ |
| | | name: '', |
| | | name: "", |
| | | path: |
| | | (file.indexOf('data') == -1 ? 'data:image/png;base64,' : '') + |
| | | file |
| | | (file.indexOf("data") == -1 ? "data:image/png;base64," : "") + |
| | | file, |
| | | }); |
| | | } else if (file.indexOf('.') != -1) { |
| | | let splitFile = file.split('/'); |
| | | } else if (file.indexOf(".") != -1) { |
| | | let splitFile = file.split("/"); |
| | | if (splitFile.length > 0) { |
| | | fileInfo.push({ |
| | | name: splitFile[splitFile.length - 1], |
| | | path: this.base.isUrl(file) ? file : this.http.ipAddress + file |
| | | path: this.base.isUrl(file) ? file : this.http.ipAddress + file, |
| | | }); |
| | | } |
| | | } |
| | |
| | | this.paginations.wheres.splice(0); |
| | | } |
| | | } |
| | | this.errorFiled = ''; |
| | | this.errorFiled = ""; |
| | | this.edit.columnIndex = -1; |
| | | this.edit.rowIndex = -1; |
| | | }, |
| | |
| | | if ( |
| | | //ä¸è½ç¼è¾çåæ®µãswitchï¼ç¹å»ä¸å¼å¯å¯ç¼è¾åè½ |
| | | !_row.edit || |
| | | (_row.edit.keep && _row.edit.type == 'switch') |
| | | (_row.edit.keep && _row.edit.type == "switch") |
| | | ) { |
| | | return; |
| | | } |
| | | } |
| | | if (!this.enableEdit) return; |
| | | _errMsg = ''; |
| | | _errMsg = ""; |
| | | // ç¼è¾å |
| | | this.columns |
| | | .filter((x) => { |
| | |
| | | }) |
| | | .forEach((column) => { |
| | | let val = row[column.field]; |
| | | if (typeof column.bind.data[0].key == 'string') { |
| | | if (typeof val == 'number') { |
| | | row[column.field] = row[column.field] + ''; |
| | | if (typeof column.bind.data[0].key == "string") { |
| | | if (typeof val == "number") { |
| | | row[column.field] = row[column.field] + ""; |
| | | } |
| | | } else { |
| | | if (typeof val == 'string' && val) { |
| | | if (typeof val == "string" && val) { |
| | | let _val = val * 1; |
| | | if (_val + '' === val) { |
| | | if (_val + "" === val) { |
| | | row[column.field] = _val; |
| | | } |
| | | } |
| | | } |
| | | }); |
| | | if (!this.beginEdit(row, column, row.elementIndex)) return; |
| | | if (row.hasOwnProperty('elementIndex')) { |
| | | if (row.hasOwnProperty("elementIndex")) { |
| | | if (this.edit.rowIndex == row.elementIndex) { |
| | | return; |
| | | } |
| | |
| | | this.$message.error(option1.title + _errMsg); |
| | | return false; |
| | | } |
| | | this.errorFiled = ''; |
| | | this.errorFiled = ""; |
| | | return true; |
| | | }, |
| | | validateColum(option, data) { |
| | | if (option.hidden || option.bind) return true; |
| | | let val = data[option.field]; |
| | | if (option.require || option.required) { |
| | | if (val != '0' && (val === '' || val === undefined)) { |
| | | if (val != "0" && (val === "" || val === undefined)) { |
| | | if (!this.errorFiled) { |
| | | _errMsg = 'ä¸è½ä¸ºç©º'; |
| | | _errMsg = "ä¸è½ä¸ºç©º"; |
| | | } |
| | | return false; |
| | | } |
| | |
| | | } |
| | | let editType = option.edit.type; |
| | | // éªè¯æ°å |
| | | if (editType == 'int' || editType == 'decimal' || editType == 'number') { |
| | | if (val == '' || val == undefined) return true; |
| | | if (editType == 'decimal') { |
| | | if (editType == "int" || editType == "decimal" || editType == "number") { |
| | | if (val == "" || val == undefined) return true; |
| | | if (editType == "decimal") { |
| | | if (!this.rule.decimal.test(val)) { |
| | | _errMsg = 'åªè½æ¯æ°å'; |
| | | _errMsg = "åªè½æ¯æ°å"; |
| | | return false; |
| | | } |
| | | } else if (!this.rule.decimal.test(val)) { |
| | | _errMsg = 'åªè½æ¯æ°å'; |
| | | _errMsg = "åªè½æ¯æ°å"; |
| | | return false; |
| | | } |
| | | if ( |
| | | option.edit.min != undefined && |
| | | typeof option.edit.min === 'number' && |
| | | typeof option.edit.min === "number" && |
| | | val < option.edit.min |
| | | ) { |
| | | _errMsg = 'ä¸è½å°äº' + option.edit.min; |
| | | _errMsg = "ä¸è½å°äº" + option.edit.min; |
| | | return false; |
| | | } |
| | | if ( |
| | | option.edit.max != undefined && |
| | | typeof option.edit.max === 'number' && |
| | | typeof option.edit.max === "number" && |
| | | val > option.edit.max |
| | | ) { |
| | | _errMsg = 'ä¸è½å¤§äº' + option.edit.max; |
| | | _errMsg = "ä¸è½å¤§äº" + option.edit.max; |
| | | return false; |
| | | } |
| | | return true; |
| | | } |
| | | |
| | | // éªè¯å符串 |
| | | if (val && (editType == 'text' || editType == 'string')) { |
| | | if (val && (editType == "text" || editType == "string")) { |
| | | if ( |
| | | option.edit.min != undefined && |
| | | typeof option.edit.min === 'number' && |
| | | typeof option.edit.min === "number" && |
| | | val.length < option.edit.min |
| | | ) { |
| | | _errMsg = 'è³å°' + option.edit.min + '个å符'; |
| | | _errMsg = "è³å°" + option.edit.min + "个å符"; |
| | | return false; |
| | | } |
| | | if ( |
| | | option.edit.max != undefined && |
| | | typeof option.edit.max === 'number' && |
| | | typeof option.edit.max === "number" && |
| | | val.length > option.edit.max |
| | | ) { |
| | | _errMsg = 'æå¤' + option.edit.max + '个å符'; |
| | | _errMsg = "æå¤" + option.edit.max + "个å符"; |
| | | return false; |
| | | } |
| | | } |
| | |
| | | }, |
| | | delRow() { |
| | | let rows = this.getSelected(); |
| | | if (rows.length == 0) return this.$Message.error('è¯·éæ©è¦å é¤çè¡!'); |
| | | if (rows.length == 0) return this.$Message.error("è¯·éæ©è¦å é¤çè¡!"); |
| | | |
| | | let data = this.url ? this.rowData : this.tableData; |
| | | let indexArr = this.getSelectedIndex(); |
| | |
| | | // 2022.05.06 æ·»å è¡æ¶ï¼å¦æåæç¼è¾å±æ§ï¼è®¾ç½®å¼å¯ç¼è¾(é¿å
å
³éç¼è¾åï¼æ æ³å次å¯ç¨ç¼è¾)?? |
| | | //x.readonly = false; |
| | | if (!row.hasOwnProperty(x.field)) { |
| | | if (x.edit && x.edit.type == 'switch') { |
| | | row[x.field] = x.type == 'bool' ? false : 0; |
| | | if (x.edit && x.edit.type == "switch") { |
| | | row[x.field] = x.type == "bool" ? false : 0; |
| | | } else if (!row.hidden) { |
| | | // 2020.09.06æ·»å è¡æ¶ï¼è®¾ç½®é»è®¤å段 |
| | | row[x.field] = undefined; |
| | |
| | | let key = column.bind.key; |
| | | let data = []; |
| | | rows.forEach((row) => { |
| | | if (row[column.field] || row[column.field] == '0') { |
| | | if (row[column.field] || row[column.field] == "0") { |
| | | if (data.indexOf(row[column.field]) == -1) { |
| | | data.push(row[column.field]); |
| | | } |
| | |
| | | if (remoteInfo.length == 0) return; |
| | | // ha= Object.assign([], ha, hb) |
| | | this.http |
| | | .post('/api/Sys_Dictionary/GetTableDictionary', remoteInfo) |
| | | .post("/api/Sys_Dictionary/GetTableDictionary", remoteInfo) |
| | | .then((dic) => { |
| | | dic.forEach((x) => { |
| | | this.remoteColumns.forEach((column) => { |
| | |
| | | } |
| | | }); |
| | | }); |
| | | this.$emit('dicInited', dic); |
| | | this.$emit("dicInited", dic); |
| | | }); |
| | | }, |
| | | load(query, isResetPage) { |
| | |
| | | rows: this.paginations.rows, |
| | | sort: this.paginations.sort, |
| | | order: this.paginations.order, |
| | | wheres: [] // æ¥è¯¢æ¡ä»¶ï¼æ ¼å¼ä¸º[{ name: "åæ®µ", value: "xx" }] |
| | | wheres: [], // æ¥è¯¢æ¡ä»¶ï¼æ ¼å¼ä¸º[{ name: "åæ®µ", value: "xx" }] |
| | | }; |
| | | let status = true; |
| | | // åå¹¶æ¥è¯¢ä¿¡æ¯(å
æ¥è¯¢å页ãæåºãæ¥è¯¢æ¡ä»¶ç) |
| | |
| | | callBack(true); |
| | | }) |
| | | */ |
| | | this.$emit('loadBefore', param, (result) => { |
| | | this.$emit("loadBefore", param, (result) => { |
| | | status = result; |
| | | }); |
| | | if (!status) return; |
| | |
| | | // æ¥è¯¢è¿åç»æåå¤ç |
| | | // 2020.10.30å¢å æ¥è¯¢åè¿åææçæ¥è¯¢ä¿¡æ¯ |
| | | this.$emit( |
| | | 'loadAfter', |
| | | "loadAfter", |
| | | data.rows || [], |
| | | (result) => { |
| | | status = result; |
| | |
| | | this.summaryData.splice(0); |
| | | // å¼å¯äºè¡å·çï¼+1 |
| | | if (this.columnIndex) { |
| | | this.summaryData.push(''); |
| | | this.summaryData.push(""); |
| | | } |
| | | // 妿æcheckboxï¼åºè¯¥ç®ä½æ¯ç¬¬ä¸è¡ |
| | | if (this.ck) { |
| | | this.summaryData.push(''); |
| | | this.summaryData.push(""); |
| | | } |
| | | |
| | | this.columns.forEach((col) => { |
| | |
| | | this.getColumnSummaries(col, data); |
| | | } |
| | | }); |
| | | if (this.summaryData.length > 0 && this.summaryData[0] == '') { |
| | | this.summaryData[0] = 'å计'; |
| | | if (this.summaryData.length > 0 && this.summaryData[0] == "") { |
| | | this.summaryData[0] = "å计"; |
| | | } |
| | | }, |
| | | getColumnSummaries(col, data) { |
| | |
| | | let sum = data.summary[col.field]; |
| | | if (sum) { |
| | | sum = |
| | | (sum * 1.0).toFixed(col.numberLength || 2).replace('.00', '') * |
| | | (sum * 1.0).toFixed(col.numberLength || 2).replace(".00", "") * |
| | | 1.0; |
| | | } |
| | | this.summaryData.push(sum); |
| | | } else { |
| | | this.summaryData.push(''); |
| | | this.summaryData.push(""); |
| | | } |
| | | } |
| | | }, |
| | |
| | | }, |
| | | sortChange(sort) { |
| | | this.paginations.sort = sort.prop; |
| | | this.paginations.order = sort.order == 'ascending' ? 'asc' : 'desc'; |
| | | this.paginations.order = sort.order == "ascending" ? "asc" : "desc"; |
| | | this.load(); |
| | | }, |
| | | resetPage() { |
| | |
| | | this.selectRows = selection; |
| | | if (this.single) { |
| | | if (selection.length == 1) { |
| | | this.$emit('rowChange', selection[0]); |
| | | this.$emit("rowChange", selection[0]); |
| | | } |
| | | if (selection.length > 1) { |
| | | let _row = selection[selection.length - 1]; |
| | |
| | | } |
| | | } |
| | | // å°selectionchangeæ´é²åºå» |
| | | this.$emit('selectionChange', selection); |
| | | this.$emit("selectionChange", selection); |
| | | }, |
| | | getColor(row, column) { |
| | | let val = row[column.field]; |
| | | if (column.getColor && typeof column.getColor === 'function') { |
| | | if (column.getColor && typeof column.getColor === "function") { |
| | | let _color = column.getColor(row, column); |
| | | if (_color) { |
| | | return _color; |
| | | } |
| | | } |
| | | if (!val && val != '0') { |
| | | return ''; |
| | | if (!val && val != "0") { |
| | | return ""; |
| | | } |
| | | if (!this.formatConfig[column.field]) { |
| | | this.formatConfig[column.field] = [val]; |
| | |
| | | return this.colors[index]; |
| | | } |
| | | if (this.formatConfig[column.field].length > 5) { |
| | | return ''; |
| | | return ""; |
| | | } |
| | | |
| | | if (index == -1) { |
| | |
| | | return this.colors[index]; |
| | | }, |
| | | formatterDate(row, column) { |
| | | return (row[column.field] || '').substr(0, 10); |
| | | return (row[column.field] || "").substr(0, 10); |
| | | }, |
| | | formatter(row, column, template) { |
| | | if (!template) return row[column.property]; |
| | | let val = row[column.field]; |
| | | if (!val && val != 0) return val; |
| | | // æ¯å¦å¼ |
| | | if (column.edit && column.edit.type == 'switch') { |
| | | return val ? 'æ¯' : 'å¦'; |
| | | if (column.edit && column.edit.type == "switch") { |
| | | return val ? "æ¯" : "å¦"; |
| | | } |
| | | if (!column.bind || !column.bind.data) { |
| | | return row[column.field]; |
| | | } |
| | | |
| | | if (column.edit && (column.edit.type == 'selectList'||column.edit.type=='treeSelect')) { |
| | | if ( |
| | | column.edit && |
| | | (column.edit.type == "selectList" || column.edit.type == "treeSelect") |
| | | ) { |
| | | if (!Array.isArray(val)) { |
| | | row[column.field] = val.split(','); |
| | | row[column.field] = val.split(","); |
| | | } else { |
| | | val = val.join(','); |
| | | val = val.join(","); |
| | | } |
| | | return this.getSelectFormatter(column, val); |
| | | } |
| | | // ç¼è¾å¤étableæ¾ç¤º |
| | | if (column.bind.type == 'selectList' || column.bind.type == 'checkbox'||column.bind.type=='treeSelect') { |
| | | // if (typeof val === 'string' && val.indexOf(',') != -1) { |
| | | return this.getSelectFormatter(column, val+''); |
| | | // } |
| | | if ( |
| | | column.bind.type == "selectList" || |
| | | column.bind.type == "checkbox" || |
| | | column.bind.type == "treeSelect" |
| | | ) { |
| | | // if (typeof val === 'string' && val.indexOf(',') != -1) { |
| | | return this.getSelectFormatter(column, val + ""); |
| | | // } |
| | | } |
| | | let source = column.bind.data.filter((x) => { |
| | | // return x.key != "" && x.key == val; |
| | | // 2020.06.06ä¿®å¤åç¬ä½¿ç¨tableç»ä»¶æ¶,key为æ°å0æ¶è½¬æ¢æææ¬å¤±è´¥çé®é¢ |
| | | return x.key !== '' && x.key !== undefined && x.key + '' === val + ''; |
| | | return x.key !== "" && x.key !== undefined && x.key + "" === val + ""; |
| | | }); |
| | | if (source && source.length > 0) val = source[0].label || source[0].value; |
| | | return val; |
| | |
| | | // ç¼è¾å¤étableæ¾ç¤º |
| | | let valArr = val.split(","); |
| | | for (let index = 0; index < valArr.length; index++) { |
| | | ( column.bind.orginData&&column.bind.orginData.length |
| | | ?column.bind.orginData |
| | | :column.bind.data) |
| | | .forEach((x) => { |
| | | (column.bind.orginData && column.bind.orginData.length |
| | | ? column.bind.orginData |
| | | : column.bind.data |
| | | ).forEach((x) => { |
| | | // 2020.06.06ä¿®å¤æ°æ®æºä¸ºselectListæ¶,key为æ°å0æ¶ä¸è½è½¬æ¢ææ¬çé®é¢ |
| | | if (x.key !== "" && x.key !== undefined && x.key + "" == valArr[index] + "") { |
| | | if ( |
| | | x.key !== "" && |
| | | x.key !== undefined && |
| | | x.key + "" == valArr[index] + "" |
| | | ) { |
| | | valArr[index] = x.label || x.value; |
| | | } |
| | | }); |
| | |
| | | } |
| | | }); |
| | | if (sum) { |
| | | if (column.summary == 'avg') { |
| | | if (column.summary == "avg") { |
| | | sum = sum / (this.rowData.length || this.tableData.length || 1); |
| | | } |
| | | sum = |
| | | (sum * 1.0).toFixed(column.numberLength || 2).replace('.00', '') * |
| | | (sum * 1.0).toFixed(column.numberLength || 2).replace(".00", "") * |
| | | 1.0; |
| | | } |
| | | this.summaryData[this.summaryIndex[column.field]] = sum; |
| | |
| | | } |
| | | return ( |
| | | date1.valueOf() < |
| | | (typeof date2 == 'number' ? date2 : new Date(date2).valueOf()) |
| | | (typeof date2 == "number" ? date2 : new Date(date2).valueOf()) |
| | | ); |
| | | }, |
| | | getDateOptions(date, item) { |
| | |
| | | if ((!item.min && !item.max) || !date) { |
| | | return false; |
| | | } |
| | | if (item.min && item.min.indexOf(' ') == -1) { |
| | | if (item.min && item.min.indexOf(" ") == -1) { |
| | | //ä¸è®¾ç½®æ¶åç§ï¼åé¢ä¼èªå¨å ä¸ 08:00 |
| | | item.min = item.min + ' 00:00:000'; |
| | | item.min = item.min + " 00:00:000"; |
| | | } |
| | | return ( |
| | | this.compareDate(date, item.min) || !this.compareDate(date, item.max) |
| | |
| | | }, |
| | | getDateFormat(column) { |
| | | //è§https://day.js.org/docs/zh-CN/display/format |
| | | return column.edit.type == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'; |
| | | return column.edit.type == "date" ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm:ss"; |
| | | }, |
| | | userSelect(selection, row) { |
| | | this.selectRows = selection; |
| | | if (!this.single) { |
| | | this.$emit('rowChange', { row, selection }); |
| | | this.$emit("rowChange", { row, selection }); |
| | | } |
| | | }, |
| | | isEmptyTag(row, column) { |
| | | if (!row[column.field] && row[column.field] != '0') { |
| | | return 'empty-tag'; |
| | | if (!row[column.field] && row[column.field] != "0") { |
| | | return "empty-tag"; |
| | | } |
| | | return ''; |
| | | return ""; |
| | | }, |
| | | filterChildrenColumn(children) { |
| | | if (!children) { |
| | |
| | | initColumnDisabled(row, column) { |
| | | return column.getDisabled && column.getDisabled(row, column); |
| | | }, |
| | | showUpload(row,column){ |
| | | this.fileInfo = (row[column.field] || '').split(",") |
| | | .filter(x => { return x }) |
| | | .map(item => { |
| | | return { path: item, name: "" }; |
| | | }) |
| | | this.currentRow=row; |
| | | this.currentColumn=column; |
| | | if (this.currentColumn.edit.autoUpload===undefined) { |
| | | this.currentColumn.edit.autoUpload=true; |
| | | showUpload(row, column) { |
| | | this.fileInfo = (row[column.field] || "") |
| | | .split(",") |
| | | .filter((x) => { |
| | | return x; |
| | | }) |
| | | .map((item) => { |
| | | return { path: item, name: "" }; |
| | | }); |
| | | this.currentRow = row; |
| | | this.currentColumn = column; |
| | | if (this.currentColumn.edit.autoUpload === undefined) { |
| | | this.currentColumn.edit.autoUpload = true; |
| | | } |
| | | if (this.currentColumn.edit.multiple===undefined) { |
| | | this.currentColumn.edit.multiple=false; |
| | | if (this.currentColumn.edit.multiple === undefined) { |
| | | this.currentColumn.edit.multiple = false; |
| | | } |
| | | |
| | | if (this.currentColumn.edit.url===undefined) { |
| | | this.uploadUrl='api/'+(this.url||'').replace('/api','api').split('/')[1]+'/upload' |
| | | }else{ |
| | | this.uploadUrl=this.currentColumn.edit.url; |
| | | if (this.currentColumn.edit.url === undefined) { |
| | | this.uploadUrl = |
| | | "api/" + |
| | | (this.url || "").replace("/api", "api").split("/")[1] + |
| | | "/upload"; |
| | | } else { |
| | | this.uploadUrl = this.currentColumn.edit.url; |
| | | } |
| | | this.uploadModel=true; |
| | | this.uploadModel = true; |
| | | }, |
| | | uploadAfter(result, files) { |
| | | this.currentColumn.uploadAfter&&this.currentColumn.uploadAfter(result,files); |
| | | this.currentColumn.uploadAfter && |
| | | this.currentColumn.uploadAfter(result, files); |
| | | return true; |
| | | }, |
| | | saveUpload(){ |
| | | saveUpload() { |
| | | //çæä¿ååè¿åçè·¯å¾ |
| | | let arr = this.fileInfo.map((x) => { |
| | | if (x.path) { |
| | |
| | | this.currentRow[this.currentColumn.field] = arr.join(","); |
| | | this.uploadModel = false; |
| | | return true; |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | }); |
| | | </script> |
| | | <style lang="less" scoped> |