@@ -1,7 +1,7 @@ | |||
<template> | |||
<div class="app-content"> | |||
<el-button ref="hwcell" size="small" type="primary" @click="exportExcel" v-if="isShow">文件导出</el-button> | |||
<el-table :data="tableData" style="width: 100%" border> | |||
<!-- <el-table :data="tableData" style="width: 100%" border> | |||
<el-table-column type="index" label="序号" width="60" /> | |||
<el-table-column prop="etcCardNumber" label="ETC卡号" width="145" /> | |||
<el-table-column prop="licensePlateNumber" label="车牌号" width="100" /> | |||
@@ -13,7 +13,7 @@ | |||
<el-table-column prop="balanceBeforeTransaction" label="交易前余额(元)" width="140" /> | |||
<el-table-column prop="transactionAmount" label="交易金额(元)" width="125" /> | |||
<el-table-column prop="postransactionalance" label="交易后余额(元)" width="140" /> | |||
</el-table> | |||
</el-table> --> | |||
</div> | |||
<!-- <div style="padding-top: 12px" class="as-gravity-center-end"> | |||
<el-pagination :page-sizes="7" :total="100" :current-page="2" /> |
@@ -1,9 +1,9 @@ | |||
<template> | |||
<span> | |||
<div class="as-layout-horizontal"> | |||
<slot /> | |||
<el-button type="success" icon="search" @click="search">搜索</el-button> | |||
<el-button type="warning" icon="refreshLeft" @click="refreshLeft">重置</el-button> | |||
</span> | |||
</div> | |||
</template> | |||
<script lang="ts" setup> | |||
import { } from 'vue' |
@@ -20,7 +20,7 @@ const field = [ //字段 | |||
required: false, //表单是否不能为空(默认false) | |||
type: '', //表单类型(input,select[含选择框],date) | |||
placeholder: '', //表单提示 | |||
itemType: '', //表单type | |||
itemType: '', //组件type值 | |||
listData: [{ //列表数据 | |||
label: '', //标题 | |||
value: '' //表单提交值 | |||
@@ -36,6 +36,7 @@ const extend = [{ | |||
}] | |||
export const defaultOptions: {} = { | |||
tabSize: 'default', // Table 的尺寸 large / default /small (默认default) | |||
search: {}, //搜索字段 | |||
searchShow: true, //是否显示搜索模块(默认true) | |||
border: false, //是否添加边框(默认false) |
@@ -13,8 +13,8 @@ | |||
:SSearch="SSearch" :processData="processData" :child="tableFrom.crudChildShow"> | |||
</crud-operation> | |||
<!-- 表单组件 --> | |||
<el-table ref="multipleTableRef" :data="testData" @selection-change="handleSelectionChange" | |||
style="width: 100%; margin: 0 0 0 0" :border="tableFrom.border" :row-key="tableFrom.rowKey"> | |||
<el-table ref="multipleTableRef" :size="tableFrom.tabSize" :data="testData" @selection-change="handleSelectionChange" | |||
style="width: 100%;" :border="tableFrom.border" :row-key="tableFrom.rowKey"> | |||
<!-- 表头拓展 --> | |||
<el-table-column v-for="(item, index) in tableFrom.extend" :key="index" :type="item.type" | |||
:width="item.width" :label="item.label" /> |
@@ -130,7 +130,7 @@ export const list = [ | |||
title: '系统管理', | |||
icon: 'Notification', | |||
children: [{ | |||
title: '菜单模块', | |||
title: '菜单管理', | |||
path: 'menu', | |||
icon: 'User', | |||
children: [] |
@@ -44,6 +44,19 @@ | |||
</div> | |||
<div style="padding-top: 12px"> | |||
<el-table :data="tableData1" style="width: 100%" border> | |||
<el-table-column type="index" label="序号" width="60" /> | |||
<el-table-column prop="etcCardNumber" label="ETC卡号" width="145" /> | |||
<el-table-column prop="licensePlateNumber" label="车牌号" width="100" /> | |||
<el-table-column prop="consumptionType" label="消费类型" width="90" /> | |||
<el-table-column prop="entranceTime" label="入口时间" width="110" /> | |||
<el-table-column prop="entryStationName" label="入口站名" width="110" /> | |||
<el-table-column prop="exportTime" label="出口时间" width="110" /> | |||
<el-table-column prop="exitStationName" label="出口站名" width="110" /> | |||
<el-table-column prop="balanceBeforeTransaction" label="交易前余额(元)" width="140" /> | |||
<el-table-column prop="transactionAmount" label="交易金额(元)" width="125" /> | |||
<el-table-column prop="postransactionalance" label="交易后余额(元)" width="140" /> | |||
</el-table> | |||
<exportTable ref="exportTS" :tableData="tableData1"></exportTable> | |||
</div> | |||
<div style="padding-top: 12px" class="as-gravity-center-end"> | |||
@@ -303,150 +316,7 @@ const tableData1 = [ | |||
balanceBeforeTransaction: '38.25', | |||
transactionAmount: '0.00', | |||
postransactionalance: '38.25', | |||
},{ | |||
etcCardNumber: '52011328220200481698', | |||
licensePlateNumber: '贵A710AE', | |||
consumptionType: '省内流水', | |||
entranceTime: '2019-12-27 20:14:02', | |||
entryStationName: '贵阳西主线站', | |||
exportTime: '2019-12-27 20:18:20', | |||
exitStationName: '贵阳西主线站', | |||
balanceBeforeTransaction: '38.25', | |||
transactionAmount: '0.00', | |||
postransactionalance: '38.25', | |||
},{ | |||
etcCardNumber: '52011328220200481698', | |||
licensePlateNumber: '贵A710AE', | |||
consumptionType: '省内流水', | |||
entranceTime: '2019-12-27 20:14:02', | |||
entryStationName: '贵阳西主线站', | |||
exportTime: '2019-12-27 20:18:20', | |||
exitStationName: '贵阳西主线站', | |||
balanceBeforeTransaction: '38.25', | |||
transactionAmount: '0.00', | |||
postransactionalance: '38.25', | |||
},{ | |||
etcCardNumber: '52011328220200481698', | |||
licensePlateNumber: '贵A710AE', | |||
consumptionType: '省内流水', | |||
entranceTime: '2019-12-27 20:14:02', | |||
entryStationName: '贵阳西主线站', | |||
exportTime: '2019-12-27 20:18:20', | |||
exitStationName: '贵阳西主线站', | |||
balanceBeforeTransaction: '38.25', | |||
transactionAmount: '0.00', | |||
postransactionalance: '38.25', | |||
},{ | |||
etcCardNumber: '52011328220200481698', | |||
licensePlateNumber: '贵A710AE', | |||
consumptionType: '省内流水', | |||
entranceTime: '2019-12-27 20:14:02', | |||
entryStationName: '贵阳西主线站', | |||
exportTime: '2019-12-27 20:18:20', | |||
exitStationName: '贵阳西主线站', | |||
balanceBeforeTransaction: '38.25', | |||
transactionAmount: '0.00', | |||
postransactionalance: '38.25', | |||
},{ | |||
etcCardNumber: '52011328220200481698', | |||
licensePlateNumber: '贵A710AE', | |||
consumptionType: '省内流水', | |||
entranceTime: '2019-12-27 20:14:02', | |||
entryStationName: '贵阳西主线站', | |||
exportTime: '2019-12-27 20:18:20', | |||
exitStationName: '贵阳西主线站', | |||
balanceBeforeTransaction: '38.25', | |||
transactionAmount: '0.00', | |||
postransactionalance: '38.25', | |||
},{ | |||
etcCardNumber: '52011328220200481698', | |||
licensePlateNumber: '贵A710AE', | |||
consumptionType: '省内流水', | |||
entranceTime: '2019-12-27 20:14:02', | |||
entryStationName: '贵阳西主线站', | |||
exportTime: '2019-12-27 20:18:20', | |||
exitStationName: '贵阳西主线站', | |||
balanceBeforeTransaction: '38.25', | |||
transactionAmount: '0.00', | |||
postransactionalance: '38.25', | |||
},{ | |||
etcCardNumber: '52011328220200481698', | |||
licensePlateNumber: '贵A710AE', | |||
consumptionType: '省内流水', | |||
entranceTime: '2019-12-27 20:14:02', | |||
entryStationName: '贵阳西主线站', | |||
exportTime: '2019-12-27 20:18:20', | |||
exitStationName: '贵阳西主线站', | |||
balanceBeforeTransaction: '38.25', | |||
transactionAmount: '0.00', | |||
postransactionalance: '38.25', | |||
},{ | |||
etcCardNumber: '52011328220200481698', | |||
licensePlateNumber: '贵A710AE', | |||
consumptionType: '省内流水', | |||
entranceTime: '2019-12-27 20:14:02', | |||
entryStationName: '贵阳西主线站', | |||
exportTime: '2019-12-27 20:18:20', | |||
exitStationName: '贵阳西主线站', | |||
balanceBeforeTransaction: '38.25', | |||
transactionAmount: '0.00', | |||
postransactionalance: '38.25', | |||
},{ | |||
etcCardNumber: '52011328220200481698', | |||
licensePlateNumber: '贵A710AE', | |||
consumptionType: '省内流水', | |||
entranceTime: '2019-12-27 20:14:02', | |||
entryStationName: '贵阳西主线站', | |||
exportTime: '2019-12-27 20:18:20', | |||
exitStationName: '贵阳西主线站', | |||
balanceBeforeTransaction: '38.25', | |||
transactionAmount: '0.00', | |||
postransactionalance: '38.25', | |||
},{ | |||
etcCardNumber: '52011328220200481698', | |||
licensePlateNumber: '贵A710AE', | |||
consumptionType: '省内流水', | |||
entranceTime: '2019-12-27 20:14:02', | |||
entryStationName: '贵阳西主线站', | |||
exportTime: '2019-12-27 20:18:20', | |||
exitStationName: '贵阳西主线站', | |||
balanceBeforeTransaction: '38.25', | |||
transactionAmount: '0.00', | |||
postransactionalance: '38.25', | |||
},{ | |||
etcCardNumber: '52011328220200481698', | |||
licensePlateNumber: '贵A710AE', | |||
consumptionType: '省内流水', | |||
entranceTime: '2019-12-27 20:14:02', | |||
entryStationName: '贵阳西主线站', | |||
exportTime: '2019-12-27 20:18:20', | |||
exitStationName: '贵阳西主线站', | |||
balanceBeforeTransaction: '38.25', | |||
transactionAmount: '0.00', | |||
postransactionalance: '38.25', | |||
},{ | |||
etcCardNumber: '52011328220200481698', | |||
licensePlateNumber: '贵A710AE', | |||
consumptionType: '省内流水', | |||
entranceTime: '2019-12-27 20:14:02', | |||
entryStationName: '贵阳西主线站', | |||
exportTime: '2019-12-27 20:18:20', | |||
exitStationName: '贵阳西主线站', | |||
balanceBeforeTransaction: '38.25', | |||
transactionAmount: '0.00', | |||
postransactionalance: '38.25', | |||
},{ | |||
etcCardNumber: '52011328220200481698', | |||
licensePlateNumber: '贵A710AE', | |||
consumptionType: '省内流水', | |||
entranceTime: '2019-12-27 20:14:02', | |||
entryStationName: '贵阳西主线站', | |||
exportTime: '2019-12-27 20:18:20', | |||
exitStationName: '贵阳西主线站', | |||
balanceBeforeTransaction: '38.25', | |||
transactionAmount: '0.00', | |||
postransactionalance: '38.25', | |||
}, | |||
} | |||
] | |||
</script> | |||
<style lang="scss" scoped> |
@@ -21,7 +21,7 @@ | |||
<div class="as-layout-horizontal"> | |||
<el-form-item class="as-weight as-bold" :label-width="labelWidth" label="顶级部门"> | |||
<el-radio-group v-model="item.top" @change="change"> | |||
<el-radio-group v-model="item.top"> | |||
<el-radio label="是" /> | |||
<el-radio label="否" /> | |||
</el-radio-group> | |||
@@ -35,7 +35,7 @@ | |||
</el-form-item> | |||
</div> | |||
<el-form-item v-show="topStart" class="as-bold" :label-width="labelWidth" label="上级部门"> | |||
<el-form-item v-show="item.top === '否'" class="as-bold" :label-width="labelWidth" label="上级部门"> | |||
<el-tree-select v-model="item.section" :data="threeData" /> | |||
</el-form-item> | |||
@@ -51,7 +51,6 @@ import { add, get, empty } from "@/utils/offLineData" | |||
import { reactive, ref, toRaw } from 'vue' | |||
const labelWidth = '80px' | |||
const topStart = ref(false) | |||
const initData = [ | |||
{ | |||
title: '黔通智联', | |||
@@ -111,16 +110,6 @@ let item = ref({ | |||
section: '' | |||
}) | |||
//切换事件 | |||
const change = (event: any) => { | |||
console.log(event); | |||
if (event === '是') { | |||
topStart.value = false; | |||
} else { | |||
topStart.value = true; | |||
} | |||
} | |||
//编辑事件 | |||
const handleEdit = (idx: any, row: any) => { | |||
console.log(row); |
@@ -1,82 +1,57 @@ | |||
<template> | |||
<crud-template ref="crud" :home-data="field" :tableData="testData" @submit="submit" @handleEdit="handleEdit"> | |||
<template #dialog> | |||
<el-form :inline="false" ref="ruleFormRef" :rules="rules" :model="item"> | |||
<el-form-item class="as-bold" :label-width="labelWidth" label="名称" prop="title"> | |||
<div style="width: 100%"> | |||
<el-input v-model="item.title" placeholder="请输入部门名称"></el-input> | |||
</div> | |||
</el-form-item> | |||
<el-form-item class="as-bold" :label-width="labelWidth" label="排序"> | |||
<!-- 简单解决sort类型问题 --> | |||
<div v-show="false"> | |||
{{ item.sort = Number(item.sort) }} | |||
</div> | |||
<el-input-number class="el-input-number" v-model="item.sort" style="width: 100%;" controls-position="right"> | |||
</el-input-number> | |||
</el-form-item> | |||
<div class="as-layout-horizontal"> | |||
<el-form-item class="as-weight as-bold" :label-width="labelWidth" label="顶级部门"> | |||
<el-radio-group v-model="item.top" @change="change"> | |||
<el-radio label="是" /> | |||
<el-radio label="否" /> | |||
</el-radio-group> | |||
</el-form-item> | |||
<el-form-item class="as-weight as-bold" :label-width="labelWidth" label="状态"> | |||
<el-radio-group v-model="item.start"> | |||
<el-radio label="启用" /> | |||
<el-radio label="禁用" /> | |||
</el-radio-group> | |||
</el-form-item> | |||
<div class="as-layout-horizontal"> | |||
<div style="width:200px;padding:0 8px 0 8px"> | |||
<el-input :prefix-icon="Search" clearable placeholder="输入部门名称搜索" style="width: 200px;margin-bottom: 10px;" /> | |||
<el-tree :data="threeData" @node-click="handleNodeClick" /> | |||
</div> | |||
<crud-template class="as-weight" ref="crud" :home-data="field" :tableData="testData" @submit="submit" | |||
@handleEdit="handleEdit"> | |||
<template #search="{ searchCondition }"> | |||
<el-input v-model="searchCondition.fileTwo" clearable placeholder="输入名称或邮箱名称" style="width: 200px;" /> | |||
<div> | |||
<el-date-picker class="el-range-editor" v-model="searchCondition.fileOne" type="daterange" range-separator=":" | |||
start-placeholder="开始日期" end-placeholder="结束日期" style="margin: 0 10px 0 10px;" /> | |||
</div> | |||
<el-select v-model="searchCondition.fileThree" placeholder="状态" style="width: 80px;margin-right: 10px;"> | |||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> | |||
</el-select> | |||
<el-form-item v-show="topStart" class="as-bold" :label-width="labelWidth" label="上级部门"> | |||
<el-tree-select v-model="item.section" :data="threeData" /> | |||
</el-form-item> | |||
</el-form> | |||
</template> | |||
</crud-template> | |||
</template> | |||
</crud-template> | |||
</div> | |||
</template> | |||
<script lang="ts" setup> | |||
// @ts-ignore crudFrom模板 | |||
import CrudTemplate from "@/crud/index.vue" | |||
import { add, get, empty } from "@/utils/offLineData" | |||
import { reactive, ref, toRaw } from 'vue' | |||
import { Search } from '@element-plus/icons-vue' | |||
const labelWidth = '80px' | |||
const topStart = ref(false) | |||
const initData = [ | |||
{ | |||
title: '黔通智联', | |||
sort: 1, | |||
name: 'test', | |||
nickname: '测试', | |||
sex: '男', | |||
phone: '18888888889', | |||
email: 'test@el-admin.vip', | |||
department: '研发部', | |||
start: '启用', | |||
top: '是', | |||
children: [{ | |||
title: '部门一', | |||
start: '启用', | |||
top: '否', | |||
sort: 2, | |||
children: [] | |||
}] | |||
creationDate: '2020-05-05 11:15:49' | |||
}, | |||
{ | |||
title: '世纪恒通', | |||
sort: 3, | |||
start: '启用', | |||
top: '是', | |||
children: [{ | |||
title: '部门二', | |||
start: '启用', | |||
top: '否', | |||
sort: 4 | |||
}] | |||
name: 'admin', | |||
nickname: '管理员', | |||
sex: '男', | |||
phone: '18888888888', | |||
email: 'test@el-admin.vip', | |||
department: '研发部', | |||
start: '禁用', | |||
creationDate: '2018-05-05 11:15:49' | |||
}] | |||
//树数据 | |||
const threeData = [ | |||
{ | |||
value: '黔通智联', | |||
@@ -101,6 +76,7 @@ const threeData = [ | |||
}, | |||
] | |||
//表单数据 | |||
let item = ref({ | |||
title: '', | |||
sort: 0, | |||
@@ -109,20 +85,22 @@ let item = ref({ | |||
section: '' | |||
}) | |||
//切换事件 | |||
const change = (event: any) => { | |||
const options = [{ | |||
value: 'Option1', | |||
label: '启用', | |||
}, | |||
{ | |||
value: 'Option2', | |||
label: '禁用', | |||
}] | |||
//树形事件 | |||
const handleNodeClick = (event: any) => { | |||
console.log(event); | |||
if (event === '是') { | |||
topStart.value = false; | |||
} else { | |||
topStart.value = true; | |||
} | |||
} | |||
//编辑事件 | |||
const handleEdit = (idx: any, row: any) => { | |||
console.log(row); | |||
item.value = toRaw(row) | |||
} | |||
@@ -138,19 +116,50 @@ if (get('department').length === 0) { | |||
const testData: any = get('department') | |||
const field = { | |||
rowKey: 'title', | |||
searchShow: false, | |||
crudShow: true, | |||
dialogCustom: true, | |||
searchShow: true, | |||
tabSize: 'small', | |||
dialogCustom: false, | |||
operateWidth: '150', //操作栏宽度 | |||
field: [{ | |||
prop: 'title', | |||
label: '名称', | |||
prop: 'name', | |||
label: '用户名称', | |||
form: { | |||
type: 'input' | |||
} | |||
}, { | |||
prop: 'nickname', | |||
label: '昵称', | |||
form: { | |||
type: 'input' | |||
} | |||
}, { | |||
prop: 'sex', | |||
label: '性别', | |||
}, { | |||
prop: 'phone', | |||
label: '电话', | |||
form: { | |||
type: 'input', | |||
itemType: 'phone' | |||
} | |||
}, { | |||
prop: 'sort', | |||
label: '排序', | |||
prop: 'email', | |||
label: '邮箱', | |||
form: { | |||
type: 'input' | |||
} | |||
}, { | |||
prop: 'department', | |||
label: '部门', | |||
}, { | |||
prop: 'start', | |||
label: '状态', | |||
}, { | |||
prop: 'creationDate', | |||
label: '创建日期', | |||
form: { | |||
type: 'date' | |||
} | |||
}] | |||
} | |||
@@ -167,8 +176,11 @@ const submit = () => { | |||
</script> | |||
<style scoped> | |||
/*数字文本框文本对齐方式 */ | |||
/deep/ .el-input-number .el-input__inner { | |||
text-align: left; | |||
/deep/.el-range-editor.el-input__inner { | |||
display: inline-flex; | |||
align-items: center; | |||
padding: 3px 10px; | |||
height: 33px; | |||
width: 300px; | |||
} | |||
</style> |