Skip to content

S
saas-manage
Commit 098f79b2 by wusiyi
Options

feat: 新增操作费管理

parent e3b6b5af
Showing with 700 additions and 209 deletions
src/common/components/base/CustomForm.vue
<script> <script lang="jsx">
export default { export default {
name: 'CustomForm', name: 'CustomForm',
components: {}, components: {},
...@@ -109,63 +109,82 @@ export default { ...@@ -109,63 +109,82 @@ export default {
inline inline
onSubmit={this.handleSubmit} onSubmit={this.handleSubmit}
onKeyupenterCapture={this.search}> onKeyupenterCapture={this.search}>
{this.formConfig?.map((item, index) => ( {this.formConfig?.map((item, index) => {
<el-form-item if (
style={{ typeof item.isShow === 'function' &&
width: item.type === 'textarea' ? '100%' : this.formItemWidth !item.isShow(this.formData)
}} ) {
class={item.type === 'textarea' ? 'textClass' : ''} return null
prop={item.prop} }
rules={(item.renderRules && item.renderRules(this.formData)) || []} return (
label-width={item.labelWidth || this.formLabelWidth} <el-form-item
key={index} style={{
label={item.name}> width: item.type === 'textarea' ? '100%' : this.formItemWidth
{item.type === 'input' && ( }}
<el-input class={item.type === 'textarea' ? 'textClass' : ''}
v-model={this.formData[item.prop]} prop={item.prop}
placeholder={item.placeholder || `请输入${item.name}`} rules={
clearable></el-input> (item.renderRules && item.renderRules(this.formData)) || []
)} }
{item.type === 'textarea' && ( label-width={item.labelWidth || this.formLabelWidth}
<el-input key={index}
type="textarea" label={item.name}>
v-model={this.formData[item.prop]} {item.type === 'input' && (
placeholder={item.placeholder || `请输入${item.name}`} <el-input
clearable></el-input>
)}
{item.type === 'select' && (
<el-select
v-model={this.formData[item.prop]}
placeholder={item.placeholder || `请选择${item.name}`}
clearable>
{item.options?.map((el, idx) => (
<el-option
label={el.label}
value={el.value}
key={idx}></el-option>
))}
</el-select>
)}
{item.type === 'datePicker' && (
<el-date-picker
value-format="yyyy-MM-dd"
type={item.dateType || 'date'}
placeholder="选择日期"
v-model={this.formData[item.prop]}
clearable
style="width: 100%;"></el-date-picker>
)}
{item.type === 'radio' &&
item.radioOptions?.map((el, idx) => (
<el-radio
v-model={this.formData[item.prop]} v-model={this.formData[item.prop]}
label={el.value} placeholder={item.placeholder || `请输入${item.name}`}
key={idx}> clearable></el-input>
{el.label} )}
</el-radio> {item.type === 'inputNumber' && (
))} <el-input-number
</el-form-item> v-model={this.formData[item.prop]}
))} placeholder={item.placeholder || `请输入${item.name}`}
clearable
step={item.step || 1}
controls-position={item.position || 'right'}
style="width: 100%;"></el-input-number>
)}
{item.type === 'textarea' && (
<el-input
type="textarea"
v-model={this.formData[item.prop]}
placeholder={item.placeholder || `请输入${item.name}`}
clearable></el-input>
)}
{item.type === 'select' && (
<el-select
v-model={this.formData[item.prop]}
placeholder={item.placeholder || `请选择${item.name}`}
clearable>
{item.options?.map((el, idx) => (
<el-option
label={el.label}
value={el.value}
key={idx}></el-option>
))}
</el-select>
)}
{item.type === 'datePicker' && (
<el-date-picker
value-format="yyyy-MM-dd"
type={item.dateType || 'date'}
placeholder="选择日期"
v-model={this.formData[item.prop]}
clearable
style="width: 100%;"></el-date-picker>
)}
{item.type === 'radio' &&
item.radioOptions?.map((el, idx) => (
<el-radio
v-model={this.formData[item.prop]}
label={el.value}
key={idx}>
{el.label}
</el-radio>
))}
</el-form-item>
)
})}
{this.isCustomButton && ( {this.isCustomButton && (
<el-form-item> <el-form-item>
<el-button <el-button
......
src/common/components/base/tableView.vue
<script> <script lang="jsx">
import { mapState } from 'vuex' import { mapState } from 'vuex'
const globalIndex = Math.random() const globalIndex = Math.random()
function getKey() { function getKey() {
return Math.random() return Math.random().toString().substr(3, 10)
.toString()
.substr(3, 10)
} }
export default { export default {
name: 'my-table', name: 'my-table',
...@@ -13,101 +11,101 @@ export default { ...@@ -13,101 +11,101 @@ export default {
props: { props: {
rowKey: { rowKey: {
type: String, type: String,
default: '_id', default: '_id'
}, },
tableColumns: { tableColumns: {
type: Array, type: Array,
default: () => [], default: () => []
}, },
sourceData: { sourceData: {
type: Array, type: Array,
default: () => [], default: () => []
}, },
selectMore: { selectMore: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
// 排序 // 排序
serverSort: { serverSort: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
treeConfig: { treeConfig: {
type: Object, type: Object,
default: () => { }, default: () => {}
}, },
expandConfig: { expandConfig: {
type: Object, type: Object,
default: () => { }, default: () => {}
}, },
stripe: { stripe: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
showHeader: { showHeader: {
type: Boolean, type: Boolean,
default: true, default: true
}, },
isFooter: { isFooter: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
more: { more: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
pageSize: { pageSize: {
type: Number, type: Number,
default: 100, default: 100
}, },
serialNumber: { serialNumber: {
type: Boolean, type: Boolean,
default: true, default: true
}, },
selection: { selection: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
radio: { radio: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
footerMethod: { footerMethod: {
type: Function, type: Function,
default: () => { }, default: () => {}
}, },
cellClick: { cellClick: {
type: Function, type: Function,
default: () => { }, default: () => {}
}, },
footerSpanMethod: { footerSpanMethod: {
type: Function, type: Function,
default: () => { }, default: () => {}
}, },
rowClassName: { rowClassName: {
type: Function, type: Function,
default: () => { }, default: () => {}
}, },
cellStyle: { cellStyle: {
type: Function, type: Function,
default: () => { }, default: () => {}
}, },
highIds: { highIds: {
// 高亮显示行 // 高亮显示行
type: Array, type: Array,
default: () => [], default: () => []
}, },
highFirst: { highFirst: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
spanMethod: { spanMethod: {
type: Function, type: Function,
default: () => { }, default: () => {}
}, },
checkboxConfig: { checkboxConfig: {
type: Object, type: Object,
default: () => { }, default: () => {}
}, },
customRightMenu: { customRightMenu: {
type: Object, type: Object,
...@@ -115,20 +113,20 @@ export default { ...@@ -115,20 +113,20 @@ export default {
code: '', code: '',
name: '', name: '',
prefixIcon: '', prefixIcon: '',
disabled: false, disabled: false
}), })
}, },
virtualScroll: { virtualScroll: {
type: Boolean, type: Boolean,
default: true, default: true
}, },
cellClassName: { cellClassName: {
type: Function, type: Function
}, }
}, },
computed: { computed: {
...mapState({ ...mapState({
keyCode: 'keyCode', keyCode: 'keyCode'
// oldSelection: (state) => state.Order.oldSelection, // oldSelection: (state) => state.Order.oldSelection,
}), }),
tableMenu() { tableMenu() {
...@@ -139,15 +137,15 @@ export default { ...@@ -139,15 +137,15 @@ export default {
{ {
code: 'hideColumn', code: 'hideColumn',
name: '隐藏列', name: '隐藏列',
disabled: false, disabled: false
}, },
{ {
code: 'showAllColumn', code: 'showAllColumn',
name: '取消所有隐藏列', name: '取消所有隐藏列',
disabled: false, disabled: false
}, }
], ]
], ]
}, },
body: { body: {
options: [ options: [
...@@ -155,40 +153,35 @@ export default { ...@@ -155,40 +153,35 @@ export default {
{ {
code: 'checkAll', code: 'checkAll',
name: '全部选择', name: '全部选择',
disabled: false, disabled: false
}, },
{ {
code: 'cancelSelection', code: 'cancelSelection',
name: '取消选择', name: '取消选择',
disabled: true, disabled: true
}, },
{ {
code: 'copy', code: 'copy',
name: '复制', name: '复制',
prefixIcon: 'fa fa-copy', prefixIcon: 'fa fa-copy',
disabled: false, disabled: false
}, }
], ]
], ]
}, }
// visibleMethod: this.visibleMethod // visibleMethod: this.visibleMethod
} }
if (this.$props.customRightMenu?.name) { if (this.$props.customRightMenu?.name) {
const { const { code, name, prefixIcon, disabled } = this.$props.customRightMenu
code,
name,
prefixIcon,
disabled,
} = this.$props.customRightMenu
obj.body.options[0].push({ obj.body.options[0].push({
code, code,
name, name,
prefixIcon, prefixIcon,
disabled, disabled
}) })
} }
return obj return obj
}, }
}, },
watch: { watch: {
sourceData(data) { sourceData(data) {
...@@ -196,14 +189,9 @@ export default { ...@@ -196,14 +189,9 @@ export default {
setTimeout(() => { setTimeout(() => {
if (data.length > 0 && this.highFirst) { if (data.length > 0 && this.highFirst) {
if (this.selection) { if (this.selection) {
this.$refs.vxetable.setCheckboxRow( this.$refs.vxetable.setCheckboxRow([data[0]], true)
[data[0]],
true,
)
} else if (this.radio) { } else if (this.radio) {
this.$refs.vxetable.setRadioRow( this.$refs.vxetable.setRadioRow(this.sourceData[0])
this.sourceData[0],
)
this.$refs.vxetable.setCurrentRow(data[0]) this.$refs.vxetable.setCurrentRow(data[0])
} else { } else {
this.$refs.vxetable.setCurrentRow(data[0]) this.$refs.vxetable.setCurrentRow(data[0])
...@@ -218,38 +206,19 @@ export default { ...@@ -218,38 +206,19 @@ export default {
}, },
tableColumns(newdata, olddata) { tableColumns(newdata, olddata) {
console.log('tableColumns') console.log('tableColumns')
if ( if (newdata && olddata && olddata.length > 0 && newdata !== olddata) {
newdata &&
olddata &&
olddata.length > 0 &&
newdata !== olddata
) {
this.tableKey = getKey() this.tableKey = getKey()
setTimeout(() => { setTimeout(() => {
if ( if (this.sourceData.length > 0 && this.highFirst) {
this.sourceData.length > 0 &&
this.highFirst
) {
if (this.selection) { if (this.selection) {
this.$refs.vxetable.setCheckboxRow( this.$refs.vxetable.setCheckboxRow([this.sourceData[0]], true)
[this.sourceData[0]],
true,
)
} else if (this.radio) { } else if (this.radio) {
this.$refs.vxetable.setRadioRow( this.$refs.vxetable.setRadioRow(this.sourceData[0])
this.sourceData[0], this.$refs.vxetable.setCurrentRow(this.sourceData[0])
)
this.$refs.vxetable.setCurrentRow(
this.sourceData[0],
)
} else { } else {
this.$refs.vxetable.setCurrentRow( this.$refs.vxetable.setCurrentRow(this.sourceData[0])
this.sourceData[0],
)
} }
this.$emit('selectionChange', [ this.$emit('selectionChange', [this.sourceData[0]])
this.sourceData[0],
])
// this.$emit('currentChange', { row: this.sourceData[0] }) // this.$emit('currentChange', { row: this.sourceData[0] })
} }
}, 200) }, 200)
...@@ -265,7 +234,7 @@ export default { ...@@ -265,7 +234,7 @@ export default {
// }, // },
selection() { selection() {
this.tableKey = getKey() this.tableKey = getKey()
}, }
}, },
data() { data() {
return { return {
...@@ -274,7 +243,7 @@ export default { ...@@ -274,7 +243,7 @@ export default {
tableData: [], tableData: [],
selections: [], selections: [],
startIndex: null, startIndex: null,
tableKey: getKey(), tableKey: getKey()
} }
}, },
methods: { methods: {
...@@ -282,7 +251,7 @@ export default { ...@@ -282,7 +251,7 @@ export default {
this.$refs.vxetable.reloadData(this.sourceData) this.$refs.vxetable.reloadData(this.sourceData)
}, },
clearSelectionBox() { clearSelectionBox() {
this.$refs.vxetable.clearCheckboxRow()// 清空表格左侧的选择框数据 this.$refs.vxetable.clearCheckboxRow() // 清空表格左侧的选择框数据
}, },
toggleRowExpand(obj) { toggleRowExpand(obj) {
this.$emit('toggleRowExpand', obj) this.$emit('toggleRowExpand', obj)
...@@ -331,10 +300,7 @@ export default { ...@@ -331,10 +300,7 @@ export default {
try { try {
if (this.selection) { if (this.selection) {
this.$refs.vxetable.clearCheckboxRow() this.$refs.vxetable.clearCheckboxRow()
this.$refs.vxetable.setCheckboxRow( this.$refs.vxetable.setCheckboxRow([row], true)
[row],
true,
)
this.$emit('selectionChange', [options.row]) this.$emit('selectionChange', [options.row])
} }
if (this.radio) { if (this.radio) {
...@@ -437,14 +403,12 @@ export default { ...@@ -437,14 +403,12 @@ export default {
break break
case 'hideColumn': // 隐藏列 case 'hideColumn': // 隐藏列
if (!column.property) { if (!column.property) {
return this.$message.warning( return this.$message.warning('当前列不支持此操作')
'当前列不支持此操作',
)
} }
this.$emit('columnChange', { this.$emit('columnChange', {
column: column.property, column: column.property,
key: 'show', key: 'show',
value: false, value: false
}) })
// this.$set(this.tableMenu.body.options[0][0],'disabled',true) // this.$set(this.tableMenu.body.options[0][0],'disabled',true)
break break
...@@ -452,20 +416,14 @@ export default { ...@@ -452,20 +416,14 @@ export default {
this.$emit('columnChange', { this.$emit('columnChange', {
column: 'all', column: 'all',
key: 'show', key: 'show',
value: true, value: true
}) })
// this.$set(this.tableMenu.body.options[0][0],'disabled',true) // this.$set(this.tableMenu.body.options[0][0],'disabled',true)
break break
} }
if (this.$props.customRightMenu?.func) { if (this.$props.customRightMenu?.func) {
if ( if (this.$props.customRightMenu.code === menu.code) {
this.$props.customRightMenu.code === menu.code this.$props.customRightMenu.func(row, column, $event)
) {
this.$props.customRightMenu.func(
row,
column,
$event,
)
} }
} }
}, },
...@@ -489,7 +447,7 @@ export default { ...@@ -489,7 +447,7 @@ export default {
this.$emit('columnChange', { this.$emit('columnChange', {
column: column.property, column: column.property,
key: 'width', key: 'width',
value: column.resizeWidth, value: column.resizeWidth
}) })
}, },
renderColumn(item, index, classname) { renderColumn(item, index, classname) {
...@@ -500,15 +458,14 @@ export default { ...@@ -500,15 +458,14 @@ export default {
return item.render(row, item.key, $rowIndex) return item.render(row, item.key, $rowIndex)
} }
return row[item.key] return row[item.key]
}, }
} }
if (item.content) { if (item.content) {
slots.content = ({ row }) => slots.content = ({ row }) =>
item.content ? item.content(row, item.key) : null item.content ? item.content(row, item.key) : null
} }
if (item.title) { if (item.title) {
slots.header = () => slots.header = () => (item.title ? item.title(item.label) : item.label)
item.title ? item.title(item.label) : item.label
} }
return ( return (
<vxe-table-column <vxe-table-column
...@@ -524,17 +481,16 @@ export default { ...@@ -524,17 +481,16 @@ export default {
header-align="center" header-align="center"
sortable={item.sortable} sortable={item.sortable}
align={item.align || 'center'} align={item.align || 'center'}
scopedSlots={slots} scopedSlots={slots}></vxe-table-column>
></vxe-table-column>
) )
}, }
}, },
render() { render() {
const isShow = this.tableColumns.length > 0 const isShow = this.tableColumns.length > 0
const checkboxconfig = { const checkboxconfig = {
reserve: true, reserve: true,
highlight: true, highlight: true
} }
if (this.checkboxConfig) { if (this.checkboxConfig) {
for (const key in this.checkboxConfig) { for (const key in this.checkboxConfig) {
...@@ -551,7 +507,7 @@ export default { ...@@ -551,7 +507,7 @@ export default {
sort-config={{ sort-config={{
trigger: 'cell', trigger: 'cell',
remote: this.serverSort, remote: this.serverSort,
orders: ['desc', 'asc', 'null'], orders: ['desc', 'asc', 'null']
}} }}
menu-config={this.tableMenu} menu-config={this.tableMenu}
checkbox-config={checkboxconfig} checkbox-config={checkboxconfig}
...@@ -589,17 +545,14 @@ export default { ...@@ -589,17 +545,14 @@ export default {
tree-config={this.treeConfig} tree-config={this.treeConfig}
stripe={this.stripe} stripe={this.stripe}
{...{ props: this.$attrs, on: this.$listeners }} {...{ props: this.$attrs, on: this.$listeners }}
key={this.tableKey} key={this.tableKey}>
>
{isShow && this.selection && ( {isShow && this.selection && (
<vxe-table-column <vxe-table-column
fixed="left" fixed="left"
field="selection" field="selection"
type="checkbox" type="checkbox"
align="center" align="center"
width={ width={this.selectMore && this.notSelected ? 120 : 40}
this.selectMore && this.notSelected ? 120 : 40
}
// width="120" // width="120"
scopedSlots={{ scopedSlots={{
title: ({ checked }) => title: ({ checked }) =>
...@@ -610,16 +563,14 @@ export default { ...@@ -610,16 +563,14 @@ export default {
size="default" size="default"
onClick={this.selectAll} onClick={this.selectAll}
style={{ style={{
color: this.more ? 'red' : '#4168FF', color: this.more ? 'red' : '#4168FF'
}} }}>
>
{this.more {this.more
? `${this.pageSize}+ selected` ? `${this.pageSize}+ selected`
: `select ${this.pageSize}+`} : `select ${this.pageSize}+`}
</el-button> </el-button>
) : null, ) : null
}} }}></vxe-table-column>
></vxe-table-column>
)} )}
{isShow && this.radio && ( {isShow && this.radio && (
<vxe-table-column <vxe-table-column
...@@ -628,8 +579,7 @@ export default { ...@@ -628,8 +579,7 @@ export default {
title="" title=""
field="radio" field="radio"
align="center" align="center"
width="40" width="40"></vxe-table-column>
></vxe-table-column>
)} )}
{isShow && this.serialNumber && ( {isShow && this.serialNumber && (
<vxe-table-column <vxe-table-column
...@@ -637,11 +587,10 @@ export default { ...@@ -637,11 +587,10 @@ export default {
title="序号" title="序号"
field="num" field="num"
scopedSlots={{ scopedSlots={{
default: this.$scopedSlots.serialNumberRender, default: this.$scopedSlots.serialNumberRender
}} }}
align="center" align="center"
width="60" width="60"></vxe-table-column>
></vxe-table-column>
)} )}
{this.tableColumns.map((item, index) => { {this.tableColumns.map((item, index) => {
...@@ -653,14 +602,9 @@ export default { ...@@ -653,14 +602,9 @@ export default {
<vxe-table-colgroup <vxe-table-colgroup
header-align="center" header-align="center"
header-class-name="tablecolgroup" header-class-name="tablecolgroup"
title={item.label} title={item.label}>
>
{item.subTitle.map((subitem, index1) => { {item.subTitle.map((subitem, index1) => {
return this.renderColumn( return this.renderColumn(subitem, index1, 'tablecolgroup')
subitem,
index1,
'tablecolgroup',
)
})} })}
</vxe-table-colgroup> </vxe-table-colgroup>
) )
...@@ -670,7 +614,7 @@ export default { ...@@ -670,7 +614,7 @@ export default {
})} })}
</vxe-table> </vxe-table>
) )
}, }
} }
</script> </script>
<style scoped> <style scoped>
...@@ -688,22 +632,22 @@ export default { ...@@ -688,22 +632,22 @@ export default {
.my-table >>> .vxe-footer--column.col--ellipsis { .my-table >>> .vxe-footer--column.col--ellipsis {
height: 30px; height: 30px;
} */ } */
.my-table>>>.vxe-checkbox--label { .my-table >>> .vxe-checkbox--label {
padding-left: 0; padding-left: 0;
} }
.my-table>>>.vxe-header--column.tablecolgroup, .my-table >>> .vxe-header--column.tablecolgroup,
.my-table>>>.vxe-header--column.col--ellipsis.tablecolgroup { .my-table >>> .vxe-header--column.col--ellipsis.tablecolgroup {
height: 22px !important; height: 22px !important;
} }
.my-table>>>.vxe-cell { .my-table >>> .vxe-cell {
/* max-height: 30px !important; */ /* max-height: 30px !important; */
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
} }
.my-table>>>.green { .my-table >>> .green {
background: green; background: green;
color: #fff; color: #fff;
} }
......
src/common/components/element-ui.js
...@@ -8,6 +8,7 @@ import { ...@@ -8,6 +8,7 @@ import {
Form, Form,
FormItem, FormItem,
Input, Input,
InputNumber,
Message, Message,
MessageBox, MessageBox,
Pagination, Pagination,
...@@ -21,6 +22,7 @@ import { ...@@ -21,6 +22,7 @@ import {
Cascader, Cascader,
Radio, Radio,
RadioGroup, RadioGroup,
RadioButton,
Menu, Menu,
Submenu, Submenu,
MenuItem, MenuItem,
...@@ -36,6 +38,7 @@ import { ...@@ -36,6 +38,7 @@ import {
Tooltip, Tooltip,
ColorPicker, ColorPicker,
CheckboxGroup, CheckboxGroup,
CheckboxButton,
Divider, Divider,
Popover, Popover,
Upload Upload
...@@ -49,6 +52,7 @@ const components = [ ...@@ -49,6 +52,7 @@ const components = [
Form, Form,
FormItem, FormItem,
Input, Input,
InputNumber,
DatePicker, DatePicker,
Pagination, Pagination,
Switch, Switch,
...@@ -57,6 +61,7 @@ const components = [ ...@@ -57,6 +61,7 @@ const components = [
Cascader, Cascader,
Radio, Radio,
RadioGroup, RadioGroup,
RadioButton,
Menu, Menu,
MenuItem, MenuItem,
Submenu, Submenu,
...@@ -75,6 +80,7 @@ const components = [ ...@@ -75,6 +80,7 @@ const components = [
Tooltip, Tooltip,
ColorPicker, ColorPicker,
CheckboxGroup, CheckboxGroup,
CheckboxButton,
Popover, Popover,
Upload Upload
] ]
...@@ -88,13 +94,13 @@ export default { ...@@ -88,13 +94,13 @@ export default {
Vue.prototype.$message = (message) => Vue.prototype.$message = (message) =>
typeof message === 'string' typeof message === 'string'
? Message({ ? Message({
duration: 2500, duration: 2500,
message, message
}) })
: Message({ : Message({
duration: 2500, duration: 2500,
...message, ...message
}) })
Vue.prototype.$message.success = (message) => Vue.prototype.$message.success = (message) =>
typeof message === 'string' typeof message === 'string'
? Message.success({ duration: 2500, message }) ? Message.success({ duration: 2500, message })
...@@ -115,5 +121,5 @@ export default { ...@@ -115,5 +121,5 @@ export default {
Vue.prototype.$alert = MessageBox.alert Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt Vue.prototype.$prompt = MessageBox.prompt
}, }
} }
src/router/index.js
...@@ -79,6 +79,12 @@ const routes = [ ...@@ -79,6 +79,12 @@ const routes = [
meta: { title: '服务管理' } meta: { title: '服务管理' }
}, },
{ {
path: '/saas/operationFee',
component: () => import('@/views/system/operationFee.vue'),
name: 'system_operationFee',
meta: { title: '操作费管理' }
},
{
path: '/saas/countryCode', path: '/saas/countryCode',
component: () => import('@/views/system/countryCode.vue'), component: () => import('@/views/system/countryCode.vue'),
name: 'system_countryCode', name: 'system_countryCode',
......
src/views/home/navMenu.vue
...@@ -275,6 +275,14 @@ export default { ...@@ -275,6 +275,14 @@ export default {
icon: 'el-icon-s-order', icon: 'el-icon-s-order',
index: '/saas/services', index: '/saas/services',
children: [] children: []
},
{
id: 6,
path: '',
label: '操作费管理',
icon: 'el-icon-s-order',
index: '/saas/operationFee',
children: []
} }
] ]
}, },
......
src/views/system/operationFee.vue 0 → 100644
<template>
<div class="wraper">
<CustomForm
:formConfig="queryformConfig"
v-model="queryFormData"
@addDialog="addDialog"
@searchFn="search"
:isFlex="false"></CustomForm>
<div class="table_wrap" v-loading="loading">
<table-vue
:sourceData="sourceData"
ref="multipleTable"
:tableColumns="usersTableColumns"
@currentChange="currentTabFn"
@selectionChange="selectionChange"></table-vue>
</div>
<div class="pagination">
<el-pagination
layout="sizes, total, prev, pager, next, jumper"
background
:total="paginationOptions.total"
:page-size="paginationOptions.pageSize"
:current-page="paginationOptions.currentPage"
@size-change="sizeChange"
@current-change="onCurrentChange"></el-pagination>
</div>
<!-- 弹出层 -->
<el-dialog
:close-on-click-modal="false"
:title="is_title == 1 ? '新增' : '编辑'"
:visible.sync="dialogVisible"
@closed="closedFn"
width="590px">
<CustomForm
formItemWidth="50%"
ref="formRefs"
v-model="formData"
:formConfig="editformConfig"
:isCustomButton="false"
formLabelWidth="100px"></CustomForm>
<span slot="footer" class="dialog-footer">
<el-button
@click="dialogVisible = false"
size="mini"
style="width: 100px">
取消
</el-button>
<el-button
type="primary"
@click="addServiceManagement"
size="mini"
style="width: 100px">
确认
</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import axios from '../../common/api/axios'
import CustomForm from '@/common/components/base/CustomForm.vue'
import { mapState } from 'vuex'
import tableVue from '@/common/components/base/tableView.vue'
export default {
name: 'system_users',
components: {
tableVue,
CustomForm
},
data() {
return {
is_title: 1,
ishowForm: false,
select: '',
sourceData: [],
serviceNameList: [],
formData: {},
queryFormData: {},
queryformConfig: [
{
prop: 'name',
type: 'input',
name: '名称',
options: []
},
{
prop: 'type',
name: '费用类型',
type: 'select',
labelWidth: '20',
options: [
{ label: '固定', value: 1 },
{ label: '浮动', value: 2 }
]
}
],
editformConfig: [
{
prop: 'name',
type: 'input',
name: '名称',
options: [],
renderRules: (item) => [
{
required: true,
message: '请输入名称',
trigger: 'blur'
}
]
},
{
prop: 'type',
name: '费用类型',
type: 'select',
options: [
{ label: '固定', value: 1 },
{ label: '浮动', value: 2 }
],
max: 1,
renderRules: (item) => [
{
required: true,
message: '请选择服务类型',
trigger: 'blur'
}
]
},
{
prop: 'fixedFee',
type: 'inputNumber',
name: '固定费用',
step: 0.01,
renderRules: (item) => [
{
required: true,
message: '请输入固定费用',
trigger: 'blur'
}
],
isShow: (formData) => formData.type === 1
},
{
prop: 'startFee',
type: 'inputNumber',
name: '起收费用',
step: 0.01,
renderRules: (item) => [
{
required: true,
message: '请输入起收费用',
trigger: 'blur'
}
],
isShow: (formData) => formData.type === 2
},
{
prop: 'incrementalFee',
type: 'inputNumber',
name: '每件加收',
step: 0.01,
renderRules: (item) => [
{
required: true,
message: '请输入每件加收',
trigger: 'blur'
}
],
isShow: (formData) => formData.type === 2
},
{
prop: 'endFee',
type: 'inputNumber',
name: '上限费用 ',
step: 0.01,
renderRules: (item) => [
{
required: true,
message: '请输入上限费用',
trigger: 'blur'
}
],
isShow: (formData) => formData.type === 2
}
],
dialogVisible: false,
formId: null,
paginationOptions: {
pageSize: 100,
currentPage: 1,
total: 0
},
details: [],
loading: false
}
},
created() {
this.getList()
},
computed: {
...mapState(['reqMenu', 'employee']),
usersTableColumns() {
return [
{
label: '名称',
key: 'name',
width: ''
},
{
label: ' 费用类型 ',
key: 'type',
width: '',
render: (item) => (
<span>
{item.type === 1 ? (
<el-tag type="success">固定类型</el-tag>
) : (
<el-tag type="warning">浮动类型</el-tag>
)}
</span>
)
},
{
label: '固定费用',
key: 'fixedFee',
width: '150'
},
{
label: '起收费用',
key: 'startFee',
width: '150'
},
{
label: '每件加收',
key: 'incrementalFee',
width: '150'
},
{
label: '上限费用',
key: 'endFee',
width: '150'
},
{
label: '创建时间',
key: 'createTime',
width: ''
},
{
label: '更新时间',
key: 'updateTime',
width: ''
},
{
label: '相关操作',
key: '',
fixed: 'right',
width: '130',
render: (item) => (
<div>
<span title="编辑" class="icon-view ">
<i
class="el-icon-edit-outline"
style="color:#E6A23C"
onClick={(e) => this.addDialog(item.id, e)}></i>
</span>
<span title="删除" class="icon-view ">
<i
style="color:#F56C6C"
class="el-icon-delete"
onClick={(e) => this.deleteSection(item, e)}></i>
</span>
</div>
)
}
]
},
funcRoleList() {
if (this.roleList.length > 0) {
return this.roleList.filter((item) => item.type === 'FUNCTION_ROLE')
}
return []
},
dataRoleList() {
if (this.roleList.length > 0) {
return this.roleList.filter((item) => item.type === 'DATA_ROLE')
}
return []
}
},
watch: {
formData: {
handler(newValue) {
// console.log(368, newValue)
},
immediate: true,
deep: true
}
},
methods: {
sizeChange(value) {
this.paginationOptions.pageSize = value
this.getList()
},
onCurrentChange(value) {
this.paginationOptions.currentPage = value
this.getList()
},
selectionChange(selection) {
if (selection.length > 0) {
this.select = selection
}
},
setempNo(id) {
for (const iterator of this.employee) {
if (iterator.id === id) {
this.addcurrencyform.empNumber = iterator.empNumber
break
}
}
},
search() {
this.getList()
},
currentTabFn(val) {
if (val.row) {
this.formId = val.row.id
}
},
// 修改新增
async addDialog(id, e) {
e && e.stopPropagation()
this.ishowForm = true
try {
if (id) {
this.is_title = 2
const url = '/serviceManagement/get'
const res = await axios.get(url, { params: { id } })
this.formData = { ...res.data }
} else {
this.is_title = 1
}
this.dialogVisible = true
} catch (error) {}
},
async checkData() {
const [isValid, postData] = await Promise.all([
new Promise((resolve) => {
this.$refs.formRefs
.validateForm()
.then((res) => resolve(true))
.catch((err) => {
resolve(false)
console.log(err)
})
}),
new Promise((resolve) => {
const params = {
name: '',
id: '',
type: '',
fixedFee: '',
startFee: '',
incrementalFee: '',
endFee: ''
}
for (const key in params) {
params[key] = this.formData[key]
}
resolve(params)
})
])
console.log(isValid, postData)
return { isValid, postData }
},
// 新增
async addServiceManagement() {
const isAdd = this.is_title === 1
const url = isAdd
? '/operationFeeManagement/add'
: '/operationFeeManagement/update'
try {
const { isValid, postData } = await this.checkData()
if (isValid) {
console.log('add', this.formData)
const finalData = isAdd ? { ...postData, id: undefined } : postData
const res = await axios.post(url, finalData)
if (res.code !== 200) {
return
}
this.dialogVisible = false
this.getList()
this.$message.success(isAdd ? '新增成功' : '更新成功')
} else {
console.log()
}
} catch (error) {
console.log(error)
}
},
// 查询
getList() {
this.loading = true
const { pageSize, currentPage } = this.paginationOptions
axios
.post('operationFeeManagement/list_page', {
pageSize,
currentPage,
...this.queryFormData
})
.then((res) => {
this.loading = false
if (res.code === 200) {
this.sourceData = res.data.records
this.paginationOptions.total = res.data.total
} else {
this.$alert(res.message, '错误提示', {
dangerouslyUseHTMLString: true
})
}
})
},
// 删除
deleteSection(data, e) {
e && e.stopPropagation()
const ids = [data.id].join()
this.$confirm('确定删除选中的信息？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
axios
.get('operationFeeManagement/delete', {
params: {
ids
}
})
.then((res) => {
if (res.code === 200) {
this.$message({
type: 'success',
message: '删除成功!'
})
this.getList()
}
})
})
.catch(() => {})
},
async closedFn() {
this.dialogVisible = false
this.formData = { enable: true, discount: true }
await this.$refs.formRefs?.resetFields()
}
}
}
</script>
<style scoped>
.wraper {
display: flex;
flex-direction: column;
height: 100%;
}
.table_wrap {
flex: 1;
}
.circle {
display: inline-block;
height: 10px;
width: 10px;
border-radius: 5px;
margin-right: 5px;
}
.my-table >>> .first {
background-color: red !important;
color: #fff !important;
}
/* 选中按钮的背景色和边框色 */
::v-deep .el-radio-button.is-checked .el-radio-button__inner {
background-color: #1565c0 !important;
border-color: #1565c0 !important;
color: #fff !important;
}
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
background-color: #1565c0 !important;
border-color: #1565c0 !important;
color: #fff !important;
}
/* 鼠标悬浮时的颜色 */
::v-deep .el-radio-button__inner:hover {
border-color: #1565c0 !important;
color: #1565c0 !important;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment