首页 > 其他分享 >表格可编辑,可保存

表格可编辑,可保存

时间:2024-10-15 11:22:21浏览次数:5  
标签:表格 type 保存 label 编辑 为空 message prop true

<script> import baseIndex from '../index' import { units, currencies, allBusinesssegments } from '@/components/business/viewbase' import { getDictMap } from '@/api/system/dictDetail' import { getInfoByDockingListMark, expenseConfigList, expenseSave, expenseRemove, expenseBatchUpdate } from '@/api/business/baseConfig/config' import { getTemplateListListOfValue } from '@/api/business/price/template'
export default {   name: 'freight-configure',   extends: baseIndex,   mixins: [units(), currencies(), allBusinesssegments()],   data() {     return {       formOptions: [         { label: '评估类型', name: 'assessmentType', element: 'el-select', clearable: true, options: [] },         { label: '业务板块', name: 'businessSegmentId', element: 'el-cascader', clearable: true, options: [] },         { label: '费用类型', name: 'transportExpenseType', element: 'el-select', clearable: true, options: [] },         { label: '生效日期', name: 'beginDate', element: 'el-date-picker-date', type: 'date' },         { label: '截止日期', name: 'endDate', element: 'el-date-picker-date', type: 'date' }       ],       tableColumns: [         { prop: 'assessmentType', label: '评估类型', width: 140, visible: true, ifEdit: true, type: 'select', options: [], isValue: true, rules: [{ required: true, message: '评估类型不能为空' }] },         { prop: 'businessSegmentId', label: '业务板块', width: 140, visible: true, ifEdit: true, type: 'cascader', options: [], isValue: true, multiple: true, rules: [{ required: true, message: '业务板块不能为空' }] },         { prop: 'transportExpenseType', label: '费用类型', width: 140, visible: true, ifEdit: true, type: 'select', options: [], isValue: true, rules: [{ required: true, message: '费用类型不能为空' }] },         { prop: 'beginDate', label: '生效日期', width: 140, visible: true, ifEdit: true, type: 'date', rules: [{ required: true, message: '生效日期不能为空' }] },         { prop: 'endDate', label: '截至日期', width: 140, visible: true, ifEdit: true, type: 'date', rules: [{ required: true, message: '截至日期不能为空' }] },         { prop: 'price', label: '单价', width: 140, visible: true, ifEdit: true, type: 'priceInput2', align: 'right', priceFormat2: true, rules: [{ required: true, message: '单价不能为空' }] },         { prop: 'taxRate', label: '税率', width: 140, visible: true, ifEdit: true, type: 'percentage', decimalPlaces: 4, percentFormat: true, formatOptions: { notation: 'fixed', precision: 4 }, rules: [{ required: true, message: '税率不能为空' }] },         { prop: 'settlementCurrencyId', label: '结算币种', width: 140, visible: true, ifEdit: true, type: 'select', options: [], rules: [{ required: true, message: '结算币种不能为空' }] },         { prop: 'quantityUnitId', label: '数量单位', width: 140, visible: true, ifEdit: true, type: 'select', options: [], rules: [{ required: true, message: '数量单位不能为空' }] }       ],       formItemsFields: [         { label: '生效日期', prop: 'beginDate', type: 'date', rules: [{ required: true, message: '生效日期不能为空' }] },         { label: '截止日期', prop: 'endDate', type: 'date', rules: [{ required: true, message: '截止日期不能为空' }] },         { prop: 'price', label: '单价', type: 'priceInput2', rules: [{ required: true, message: '单价不能为空' }] },         { prop: 'taxRate', label: '税率', type: 'percentage', decimalPlaces: 4, rules: [{ required: true, message: '税率不能为空' }] }       ],       defalutValues: {         taxRate: 0       },       apiBase: {         search: async (params) => Promise.resolve(await expenseConfigList(params)),         save: async (params) => Promise.resolve(await expenseSave(params)),         delete: async (params) => Promise.resolve(await expenseRemove(params)),         batchUpdated: async (params) => Promise.resolve(await expenseBatchUpdate(params))       }     }   },   watch: {     units(val) {       if (val?.length) {         this.setFormItemOptionsModify(this.col, 'quantityUnitId', val)       }     },     currencies(val) {       if (val?.length) {         this.setFormItemOptionsModify(this.col, 'settlementCurrencyId', val)       }     },     businesssegmentList(val) {       if (val?.length) {         this.setFormOptions('businessSegmentId', null, val)         this.setFormItemOptionsModify(this.col, 'businessSegmentId', val)       }     }   },   mounted() {     this.$refs.import.uploadObject.action = '/api/masterData/profitConfig/expenseConfigImport'     getTemplateListListOfValue({ configType: 'transportExpenseConfigModel' }).then(({ code, content }) => { if (code === 1) this.templateOptions = content.map(({ id, name }) => ({ id, name })) })   },   methods: {     async setSearchFormOption() {       const { data: { transport_expense_type = [] }} = await getDictMap('transport_expense_type')       this.setFormOptions('transportExpenseType', '', transport_expense_type)       this.setFormItemOptionsModify(this.col, 'transportExpenseType', transport_expense_type)       const { data: assessment_type } = await getInfoByDockingListMark({ dockingMark: 'AssessmentType' })       this.setFormOptions('assessmentType', '', assessment_type.map(i => ({ ...i, label: i.codeName })))       this.setFormItemOptionsModify(this.col, 'assessmentType', assessment_type.map(i => ({ ...i, label: i.codeName })))     },     otherCheck(row) {       const { beginDate = null, endDate = null } = row       if (new Date(beginDate).getTime() > new Date(endDate).getTime()) {         this.$message.warning('开始时间不能大于结束时间')         return Promise.resolve(false)       }       return Promise.resolve(true)     }   } } </script>

    //获取   computed: {     editProps() {       return this.tableColumns.filter(i => i.ifEdit).map(i => i.prop)     }   },

标签:表格,type,保存,label,编辑,为空,message,prop,true
From: https://www.cnblogs.com/chenlongsheng/p/18467072

相关文章

  • 怎么修改网页内容并保存
    要修改网页内容并保存,通常有几种方法可以实现,这里介绍两种常见的方法:使用浏览器开发者工具临时修改:打开浏览器的开发者工具(通常可以通过按F12或者右键选择“检查”来打开)。在“Elements”或“Inspector”标签页中,选中页面上的元素后可以直接在源代码上修改。这种方式的修改......
  • 如何保存修改过的网页源代码
    要保存修改过的网页源代码,可以按照以下步骤操作:选择保存方式:如果只是临时修改查看,可以直接在浏览器开发者工具中进行,但这些修改不会被持久化。若要永久保存修改后的源代码,则需要将其另存为本地文件。获取源代码:使用浏览器的“查看页面源代码”功能(通常可以通过右键菜......
  • python代码将文件夹里面pdf全部出现单词出现频次显示出来并且出现意思,保存到excle
    英语考试和代码结合(自动化人哭了)需要教程可以私信我,我可以出视频B站importcsvimportrefromcollectionsimportCounterfrompdfminer.pdfparserimportPDFParserfrompdfminer.pdfdocumentimportPDFDocumentfrompdfminer.pdfpageimportPDFPagefrompdfmine......
  • Excel表格中设置数据进度条注意事项
    首先是操作方法,附步骤:①选中需要进度条显示的单元格,点击开始②选择条件格式--数据条,然后选择样式,个人感觉实心填充效果图更好看。③然后数据条效果就设置完成注意事项,数据条规则要设置最大值和最小值,否则就会出现一组数据中未达到100%但单元格底色被填充满的现象。操作方......
  • 可编辑div遇到的那些事
        在日常开发中有时可能会遇到input或textarea不能满足的开发场景,比如多行输入的情况下,textarea的右下角icon无法去除,所以此时可以使用div设置可编辑状态,完成功能开发,在开发的过程中仍会遇到一下问题。1,如何设置div使其变成可编辑状态 通过给div添加:c......
  • python3.6 解析svg保存到mysql
     1importjson2fromcollectionsimportCounter3fromjsonimportJSONDecodeError45importmysql6importrequests7fromlxmlimportetree89#定义远程SVG文件的URL10file=r'D:\tmp_files\jmx\0919_3568.txt'11dat......
  • Linux 之 nano 编辑器
    使用git提交的时候,发生冲突或要记录相关信息时会弹出nano这个编辑器。nano[选项][[+行,列]文件名]...nano[必要参数][选择参数][文件]命令行白的部分是组合键,后面的则是该组合键的功能。指数符号(^)代表的是键盘的[ctrl]按键,(M)表示Alt键。[Ctrl]-G:取得在线帮助(hel......
  • Java与Python的角斗 动画动漫下载 猫和老鼠 爆笑虫子 微观小世界 及时保存以防失效
    在“代码王国”的金色大厅内,一场前所未有的角斗即将拉开序幕。大厅四周镶嵌着由各种算法构成的璀璨宝石,每一颗都闪烁着智慧的光芒,映照着即将上演的较量。爆笑虫子第一季104集合集 第一季1-104.mp4https://www.alipan.com/s/4nLKc6NWdG7提取码:12or点击链接保存,或者复制......
  • excel表格快捷键
    F8打开或关闭扩展模式。在扩展模式中,“EXT”将出现在状态行中,并且按箭头键可扩展选定范围。通过按Shift+F8,您可以使用箭头键将非邻近单元格或范围添加到单元格的选定范围。当工作簿未最大化时,按Ctrl+F8可执行“大小”命令(在工作簿窗口的“控制”菜单上。按Alt+F8可显示用于运......
  • excel表格快捷键分享
    Ctrl+F显示“查找”对话框。Ctrl+G显示“定位”对话框。按F5也会显示此对话框。Ctrl+H显示“查找和替换”对话框。Ctrl+I应用或取消倾斜格式设置。Ctrl+K为新的超链接显示“插入超链接”对话框, Ctrl+L显示“创建列表”对话框。Ctrl+N创建一个新的空白文件。Ctrl+O显......