<template> | <template> | ||||
<div class="app-content"> | <div class="app-content"> | ||||
<el-button ref="hwcell" size="small" type="primary" @click="exportExcel" v-if="isShow">文件导出</el-button> | <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 type="index" label="序号" width="60" /> | ||||
<el-table-column prop="etcCardNumber" label="ETC卡号" width="145" /> | <el-table-column prop="etcCardNumber" label="ETC卡号" width="145" /> | ||||
<el-table-column prop="licensePlateNumber" label="车牌号" width="100" /> | <el-table-column prop="licensePlateNumber" label="车牌号" width="100" /> | ||||
<el-table-column prop="balanceBeforeTransaction" label="交易前余额(元)" width="140" /> | <el-table-column prop="balanceBeforeTransaction" label="交易前余额(元)" width="140" /> | ||||
<el-table-column prop="transactionAmount" label="交易金额(元)" width="125" /> | <el-table-column prop="transactionAmount" label="交易金额(元)" width="125" /> | ||||
<el-table-column prop="postransactionalance" label="交易后余额(元)" width="140" /> | <el-table-column prop="postransactionalance" label="交易后余额(元)" width="140" /> | ||||
</el-table> | |||||
</el-table> --> | |||||
</div> | </div> | ||||
<!-- <div style="padding-top: 12px" class="as-gravity-center-end"> | <!-- <div style="padding-top: 12px" class="as-gravity-center-end"> | ||||
<el-pagination :page-sizes="7" :total="100" :current-page="2" /> | <el-pagination :page-sizes="7" :total="100" :current-page="2" /> |
<template> | <template> | ||||
<span> | |||||
<div class="as-layout-horizontal"> | |||||
<slot /> | <slot /> | ||||
<el-button type="success" icon="search" @click="search">搜索</el-button> | <el-button type="success" icon="search" @click="search">搜索</el-button> | ||||
<el-button type="warning" icon="refreshLeft" @click="refreshLeft">重置</el-button> | <el-button type="warning" icon="refreshLeft" @click="refreshLeft">重置</el-button> | ||||
</span> | |||||
</div> | |||||
</template> | </template> | ||||
<script lang="ts" setup> | <script lang="ts" setup> | ||||
import { } from 'vue' | import { } from 'vue' |
required: false, //表单是否不能为空(默认false) | required: false, //表单是否不能为空(默认false) | ||||
type: '', //表单类型(input,select[含选择框],date) | type: '', //表单类型(input,select[含选择框],date) | ||||
placeholder: '', //表单提示 | placeholder: '', //表单提示 | ||||
itemType: '', //表单type | |||||
itemType: '', //组件type值 | |||||
listData: [{ //列表数据 | listData: [{ //列表数据 | ||||
label: '', //标题 | label: '', //标题 | ||||
value: '' //表单提交值 | value: '' //表单提交值 | ||||
}] | }] | ||||
export const defaultOptions: {} = { | export const defaultOptions: {} = { | ||||
tabSize: 'default', // Table 的尺寸 large / default /small (默认default) | |||||
search: {}, //搜索字段 | search: {}, //搜索字段 | ||||
searchShow: true, //是否显示搜索模块(默认true) | searchShow: true, //是否显示搜索模块(默认true) | ||||
border: false, //是否添加边框(默认false) | border: false, //是否添加边框(默认false) |
:SSearch="SSearch" :processData="processData" :child="tableFrom.crudChildShow"> | :SSearch="SSearch" :processData="processData" :child="tableFrom.crudChildShow"> | ||||
</crud-operation> | </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" | <el-table-column v-for="(item, index) in tableFrom.extend" :key="index" :type="item.type" | ||||
:width="item.width" :label="item.label" /> | :width="item.width" :label="item.label" /> |
title: '系统管理', | title: '系统管理', | ||||
icon: 'Notification', | icon: 'Notification', | ||||
children: [{ | children: [{ | ||||
title: '菜单模块', | |||||
title: '菜单管理', | |||||
path: 'menu', | path: 'menu', | ||||
icon: 'User', | icon: 'User', | ||||
children: [] | children: [] |
</div> | </div> | ||||
<div style="padding-top: 12px"> | <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> | <exportTable ref="exportTS" :tableData="tableData1"></exportTable> | ||||
</div> | </div> | ||||
<div style="padding-top: 12px" class="as-gravity-center-end"> | <div style="padding-top: 12px" class="as-gravity-center-end"> | ||||
balanceBeforeTransaction: '38.25', | balanceBeforeTransaction: '38.25', | ||||
transactionAmount: '0.00', | transactionAmount: '0.00', | ||||
postransactionalance: '38.25', | 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> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> |
<div class="as-layout-horizontal"> | <div class="as-layout-horizontal"> | ||||
<el-form-item class="as-weight as-bold" :label-width="labelWidth" label="顶级部门"> | <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 label="否" /> | <el-radio label="否" /> | ||||
</el-radio-group> | </el-radio-group> | ||||
</el-form-item> | </el-form-item> | ||||
</div> | </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-tree-select v-model="item.section" :data="threeData" /> | ||||
</el-form-item> | </el-form-item> | ||||
import { reactive, ref, toRaw } from 'vue' | import { reactive, ref, toRaw } from 'vue' | ||||
const labelWidth = '80px' | const labelWidth = '80px' | ||||
const topStart = ref(false) | |||||
const initData = [ | const initData = [ | ||||
{ | { | ||||
title: '黔通智联', | title: '黔通智联', | ||||
section: '' | section: '' | ||||
}) | }) | ||||
//切换事件 | |||||
const change = (event: any) => { | |||||
console.log(event); | |||||
if (event === '是') { | |||||
topStart.value = false; | |||||
} else { | |||||
topStart.value = true; | |||||
} | |||||
} | |||||
//编辑事件 | //编辑事件 | ||||
const handleEdit = (idx: any, row: any) => { | const handleEdit = (idx: any, row: any) => { | ||||
console.log(row); | console.log(row); |
<template> | <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> | </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> | </template> | ||||
<script lang="ts" setup> | <script lang="ts" setup> | ||||
// @ts-ignore crudFrom模板 | // @ts-ignore crudFrom模板 | ||||
import CrudTemplate from "@/crud/index.vue" | import CrudTemplate from "@/crud/index.vue" | ||||
import { add, get, empty } from "@/utils/offLineData" | import { add, get, empty } from "@/utils/offLineData" | ||||
import { reactive, ref, toRaw } from 'vue' | import { reactive, ref, toRaw } from 'vue' | ||||
import { Search } from '@element-plus/icons-vue' | |||||
const labelWidth = '80px' | const labelWidth = '80px' | ||||
const topStart = ref(false) | const topStart = ref(false) | ||||
const initData = [ | const initData = [ | ||||
{ | { | ||||
title: '黔通智联', | |||||
sort: 1, | |||||
name: 'test', | |||||
nickname: '测试', | |||||
sex: '男', | |||||
phone: '18888888889', | |||||
email: 'test@el-admin.vip', | |||||
department: '研发部', | |||||
start: '启用', | 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 = [ | const threeData = [ | ||||
{ | { | ||||
value: '黔通智联', | value: '黔通智联', | ||||
}, | }, | ||||
] | ] | ||||
//表单数据 | |||||
let item = ref({ | let item = ref({ | ||||
title: '', | title: '', | ||||
sort: 0, | sort: 0, | ||||
section: '' | section: '' | ||||
}) | }) | ||||
//切换事件 | |||||
const change = (event: any) => { | |||||
const options = [{ | |||||
value: 'Option1', | |||||
label: '启用', | |||||
}, | |||||
{ | |||||
value: 'Option2', | |||||
label: '禁用', | |||||
}] | |||||
//树形事件 | |||||
const handleNodeClick = (event: any) => { | |||||
console.log(event); | console.log(event); | ||||
if (event === '是') { | |||||
topStart.value = false; | |||||
} else { | |||||
topStart.value = true; | |||||
} | |||||
} | } | ||||
//编辑事件 | //编辑事件 | ||||
const handleEdit = (idx: any, row: any) => { | const handleEdit = (idx: any, row: any) => { | ||||
console.log(row); | |||||
item.value = toRaw(row) | item.value = toRaw(row) | ||||
} | } | ||||
const testData: any = get('department') | const testData: any = get('department') | ||||
const field = { | const field = { | ||||
rowKey: 'title', | |||||
searchShow: false, | |||||
crudShow: true, | |||||
dialogCustom: true, | |||||
searchShow: true, | |||||
tabSize: 'small', | |||||
dialogCustom: false, | |||||
operateWidth: '150', //操作栏宽度 | |||||
field: [{ | 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', | prop: 'start', | ||||
label: '状态', | label: '状态', | ||||
}, { | |||||
prop: 'creationDate', | |||||
label: '创建日期', | |||||
form: { | |||||
type: 'date' | |||||
} | |||||
}] | }] | ||||
} | } | ||||
</script> | </script> | ||||
<style scoped> | <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> | </style> |