| | |
| | | return postRequest('/car/insertOrUpdate', params) |
| | | } |
| | | |
| | | // 添加车辆信息 |
| | | // 修改车辆信息 |
| | | export const editCar = (params) => { |
| | | return postRequest('/car/insertOrUpdate', params) |
| | | } |
| | | |
| | | // 添加车辆信息 |
| | | // 删除车辆信息 |
| | | export const deleteCar = (params) => { |
| | | return postRequest('/car/delByIds', params) |
| | | } |
| | |
| | | return getRequest('/car/getAll', params) |
| | | } |
| | | |
| | | // 分页获取加油信息 |
| | | export const getAddOilList = (params) => { |
| | | return getRequest('/addOil/getByPage', params) |
| | | } |
| | | |
| | | //添加加油记录 |
| | | export const addOil = (params) => { |
| | | return postRequest('/addOil/insertOrUpdate', params) |
| | | } |
| | | |
| | | // 删除加油信息 |
| | | export const deleteAddOil = (params) => { |
| | | return postRequest('/addOil/delByIds', params) |
| | | } |
| | | |
| | | // 查询事故信息 |
| | | export const getAccident = (params) => { |
| | | return getRequest('/accident/getByPage', params) |
| | | } |
| | | |
| | | // 添加事故信息 |
| | | export const addAccident = (params) => { |
| | | return postRequest('/accident/insertOrUpdate', params) |
| | | } |
| | | |
| | | // 删除事故信息 |
| | | export const deleteAccident = (params) => { |
| | | return postRequest('/accident/delByIds', params) |
| | | } |
New file |
| | |
| | | .permModal { |
| | | .ivu-modal-body { |
| | | max-height: 560px; |
| | | overflow: auto; |
| | | } |
| | | } |
| | | |
| | | .depModal { |
| | | .ivu-modal-body { |
| | | max-height: 500px; |
| | | overflow: auto; |
| | | } |
| | | } |
New file |
| | |
| | | <style lang="less"> |
| | | @import "@/styles/table-common.less"; |
| | | @import "@/styles/drawer-common.less"; |
| | | @import "./accidentManage.less"; |
| | | </style> |
| | | <template> |
| | | <div class="search"> |
| | | <Card> |
| | | <Row class="operation"> |
| | | <Button @click="addOil" type="primary" icon="md-add">添加事故记录</Button> |
| | | <Button @click="delAll" icon="md-trash">批量删除</Button> |
| | | <Button @click="init" icon="md-refresh">刷新</Button> |
| | | <Button type="dashed" @click="openTip = !openTip">{{ |
| | | openTip ? "关闭提示" : "开启提示" |
| | | }}</Button> |
| | | <Input |
| | | v-model="searchForm.carNo" |
| | | suffix="ios-search" |
| | | @on-change="getDataList" |
| | | placeholder="输入车牌号搜索" |
| | | clearable |
| | | style="width: 250px" |
| | | /> |
| | | </Row> |
| | | <Alert show-icon v-show="openTip"> |
| | | 已选择 |
| | | <span class="select-count">{{ selectList.length }}</span> 项 |
| | | <a class="select-clear" @click="clearSelectAll">清空</a> |
| | | </Alert> |
| | | <Table |
| | | :loading="loading" |
| | | border |
| | | :columns="columns" |
| | | :data="data" |
| | | ref="table" |
| | | sortable="custom" |
| | | @on-sort-change="changeSort" |
| | | @on-selection-change="changeSelect" |
| | | ></Table> |
| | | <Row type="flex" justify="end" class="page"> |
| | | <Page |
| | | :current="searchForm.pageNumber" |
| | | :total="total" |
| | | :page-size="searchForm.pageSize" |
| | | @on-change="changePage" |
| | | @on-page-size-change="changePageSize" |
| | | :page-size-opts="[10, 20, 50]" |
| | | size="small" |
| | | show-total |
| | | show-elevator |
| | | show-sizer |
| | | ></Page> |
| | | </Row> |
| | | </Card> |
| | | |
| | | <!-- 编辑 --> |
| | | <Modal |
| | | :title="modalTitle" |
| | | v-model="roleModalVisible" |
| | | :mask-closable="false" |
| | | :width="500" |
| | | > |
| | | <Form |
| | | ref="accidentForm" |
| | | :model="accidentForm" |
| | | :label-width="80" |
| | | :rules="accidentFormValidate" |
| | | > |
| | | <FormItem label="车辆" prop="carId"> |
| | | <Select v-model="accidentForm.carId" filterable> |
| | | <Option v-for="item in carList" :value="item.id">{{ item.carNo }}</Option> |
| | | </Select> |
| | | </FormItem> |
| | | <Form-item label="事故日期" prop="accidentDate"> |
| | | <Row> |
| | | <Col span="11"> |
| | | <Date-picker @on-change="change1" type="date" value="yyyy-MM-dd" placeholder="选择日期" v-model="accidentForm.accidentDate"></Date-picker> |
| | | </Col> |
| | | </Row> |
| | | </Form-item> |
| | | <FormItem label="对方联系人" prop="linker" > |
| | | <Input v-model="accidentForm.linker"/> |
| | | </FormItem> |
| | | <FormItem label="事故描述" prop="description"> |
| | | <Input v-model="accidentForm.description"/> |
| | | </FormItem> |
| | | <FormItem label="事故照片" prop="img"> |
| | | <upload-pic-thumb v-model="accidentForm.img" :multiple="false"></upload-pic-thumb> |
| | | </FormItem> |
| | | <FormItem label="责任认定" prop="dutySure"> |
| | | <Input v-model="accidentForm.dutySure"/> |
| | | </FormItem> |
| | | <FormItem label="解决方案" prop="solve"> |
| | | <Input v-model="accidentForm.solve"/> |
| | | </FormItem> |
| | | </Form> |
| | | <div slot="footer"> |
| | | <Button type="text" @click="carRole">取消</Button> |
| | | <Button type="primary" :loading="submitLoading" @click="submitaccidentManage" |
| | | >提交</Button |
| | | > |
| | | </div> |
| | | </Modal> |
| | | <!-- 菜单权限 --> |
| | | <Drawer |
| | | :title="modalTitle" |
| | | v-model="permModalVisible" |
| | | :mask-closable="false" |
| | | :width="550" |
| | | draggable |
| | | > |
| | | <div :style="{ maxHeight: maxHeight }" class="drawer-content"> |
| | | <div style="position: relative"> |
| | | <Tree |
| | | ref="tree" |
| | | :data="permData" |
| | | show-checkbox |
| | | :render="renderContent" |
| | | :check-strictly="true" |
| | | ></Tree> |
| | | <Spin size="large" fix v-if="treeLoading"></Spin> |
| | | </div> |
| | | </div> |
| | | <div class="drawer-footer br"> |
| | | <Button |
| | | type="primary" |
| | | :loading="submitPermLoading" |
| | | @click="submitPermEdit" |
| | | >提交</Button |
| | | > |
| | | <Button @click="selectTreeAll">全选/反选</Button> |
| | | <Select |
| | | v-model="openLevel" |
| | | @on-change="changeOpen" |
| | | style="width: 110px" |
| | | transfer |
| | | > |
| | | <Option value="0">展开所有</Option> |
| | | <Option value="1">收合所有</Option> |
| | | <Option value="2">仅展开一级</Option> |
| | | <Option value="3">仅展开两级</Option> |
| | | </Select> |
| | | <Button type="text" @click="cancelPermEdit">取消</Button> |
| | | </div> |
| | | </Drawer> |
| | | <!-- 数据权限 --> |
| | | <Modal |
| | | :title="modalTitle" |
| | | v-model="carModalVisible" |
| | | :mask-closable="false" |
| | | :width="550" |
| | | class="depModal" |
| | | > |
| | | <Form :label-width="85" ref="removeForm" :model="removeForm"> |
| | | <FormItem label="移除原因" prop="removeReason"> |
| | | <Input v-model="removeForm.removeReason"/> |
| | | </FormItem> |
| | | </Form> |
| | | <div v-show="dataType == 1" style="margin-top: 15px"> |
| | | <div style="position: relative"> |
| | | <Tree |
| | | ref="depTree" |
| | | :data="depData" |
| | | :load-data="loadData" |
| | | @on-toggle-expand="expandCheckDep" |
| | | multiple |
| | | style="margin-top: 15px" |
| | | ></Tree> |
| | | <Spin size="large" fix v-if="depTreeLoading"></Spin> |
| | | </div> |
| | | </div> |
| | | <div slot="footer"> |
| | | <Button type="text" @click="depModalVisible = false">取消</Button> |
| | | <Button |
| | | type="primary" |
| | | :loading="submitDepLoading" |
| | | @click="submitRemove" |
| | | >提交</Button |
| | | > |
| | | </div> |
| | | </Modal> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | getAllPermissionList, |
| | | setDefaultRole, |
| | | editRolePerm, |
| | | initDepartment, |
| | | loadDepartment, |
| | | editRoleDep, |
| | | } from "@/api/index"; |
| | | import { |
| | | getAll, |
| | | addAccident, |
| | | getAccident, |
| | | deleteAccident, |
| | | getCarList, |
| | | } from "@/api/open"; |
| | | import util from "@/libs/util.js"; |
| | | export default { |
| | | name: "car-manage", |
| | | data() { |
| | | return { |
| | | maxHeight: 510, |
| | | openTip: true, |
| | | openLevel: "0", |
| | | loading: true, |
| | | treeLoading: true, |
| | | depTreeLoading: true, |
| | | submitPermLoading: false, |
| | | submitDepLoading: false, |
| | | searchKey: "", |
| | | sortColumn: "createTime", |
| | | sortType: "desc", |
| | | modalType: 0, |
| | | roleModalVisible: false, |
| | | carModalVisible: false, |
| | | permModalVisible: false, |
| | | depModalVisible: false, |
| | | modalTitle: "", |
| | | searchForm: { |
| | | // 搜索框初始化对象 |
| | | pageNumber: 1, // 当前页数 |
| | | pageSize: 10, // 页面大小 |
| | | sort: "createTime", // 默认排序字段 |
| | | order: "desc", // 默认排序方式 |
| | | key: "", |
| | | }, |
| | | accidentForm: { |
| | | status : 0 |
| | | }, |
| | | removeForm: { |
| | | status : 1 |
| | | }, |
| | | accidentFormValidate: { |
| | | name: [ |
| | | { required: true, message: "角色名称不能为空", trigger: "change" }, |
| | | ], |
| | | }, |
| | | submitLoading: false, |
| | | selectList: [], |
| | | columns: [ |
| | | { |
| | | type: "selection", |
| | | width: 60, |
| | | align: "center", |
| | | }, |
| | | { |
| | | type: "index", |
| | | width: 60, |
| | | align: "center", |
| | | }, |
| | | { |
| | | title: "车牌号", |
| | | key: "carNo", |
| | | width: 100, |
| | | sortable: true, |
| | | }, |
| | | { |
| | | title: "事故日期", |
| | | key: "accidentDate", |
| | | width: 120, |
| | | sortable: true, |
| | | }, |
| | | { |
| | | title: "对方联系人", |
| | | key: "linker", |
| | | width:120, |
| | | }, |
| | | { |
| | | title: "事故描述", |
| | | key: "description", |
| | | width: 150, |
| | | }, |
| | | { |
| | | title: "责任认定", |
| | | key: "dutySure", |
| | | width:150, |
| | | sortable: true, |
| | | }, |
| | | { |
| | | title: "解决方案", |
| | | key: "solve", |
| | | minWidth: 150, |
| | | sortable: true, |
| | | }, |
| | | { |
| | | title: "操作", |
| | | key: "action", |
| | | align: "center", |
| | | fixed: "right", |
| | | width: 200, |
| | | render: (h, params) => { |
| | | return h("div", [ |
| | | h( |
| | | "a", |
| | | { |
| | | on: { |
| | | click: () => { |
| | | this.edit(params.row); |
| | | }, |
| | | }, |
| | | }, |
| | | "编辑" |
| | | ), |
| | | h("Divider", { |
| | | props: { |
| | | type: "vertical", |
| | | }, |
| | | }), |
| | | h( |
| | | "a", |
| | | { |
| | | on: { |
| | | click: () => { |
| | | this.remove(params.row); |
| | | }, |
| | | }, |
| | | }, |
| | | "删除" |
| | | ), |
| | | ]); |
| | | }, |
| | | }, |
| | | ], |
| | | data: [], |
| | | total: 0, |
| | | permData: [], |
| | | editRolePermId: "", |
| | | selectAllFlag: false, |
| | | depData: [], |
| | | dataType: 0, |
| | | editDepartments: [], |
| | | buyYear:'', |
| | | carList:[] |
| | | }; |
| | | }, |
| | | methods: { |
| | | change1(e){ |
| | | this.accidentDate = e; |
| | | }, |
| | | init() { |
| | | this.getDataList(); |
| | | // 获取所有菜单权限树 |
| | | this.getPermList(); |
| | | }, |
| | | renderContent(h, { root, node, data }) { |
| | | let icon = ""; |
| | | if (data.level == 0) { |
| | | icon = "ios-navigate"; |
| | | } else if (data.level == 1) { |
| | | icon = "md-list-box"; |
| | | } else if (data.level == 2) { |
| | | icon = "md-list"; |
| | | } else if (data.level == 3) { |
| | | icon = "md-radio-button-on"; |
| | | } else { |
| | | icon = "md-radio-button-off"; |
| | | } |
| | | return h( |
| | | "span", |
| | | { |
| | | style: { |
| | | display: "inline-block", |
| | | cursor: "pointer", |
| | | }, |
| | | on: { |
| | | click: () => { |
| | | if (data.status == -1) { |
| | | return; |
| | | } |
| | | data.checked = !data.checked; |
| | | }, |
| | | }, |
| | | }, |
| | | [ |
| | | h("span", [ |
| | | h("Icon", { |
| | | props: { |
| | | type: icon, |
| | | size: "16", |
| | | }, |
| | | style: { |
| | | "margin-right": "8px", |
| | | "margin-bottom": "3px", |
| | | }, |
| | | }), |
| | | h("span", data.title), |
| | | ]), |
| | | ] |
| | | ); |
| | | }, |
| | | changePage(v) { |
| | | this.searchForm.pageNumber = v; |
| | | this.getDataList(); |
| | | this.clearSelectAll(); |
| | | }, |
| | | changePageSize(v) { |
| | | this.searchForm.pageSize = v; |
| | | this.getDataList(); |
| | | }, |
| | | changeSort(e) { |
| | | this.searchForm.sort = e.key; |
| | | this.searchForm.order = e.order; |
| | | if (e.order == "normal") { |
| | | this.searchForm.order = ""; |
| | | } |
| | | this.getDataList(); |
| | | }, |
| | | getDataList() { |
| | | this.loading = true; |
| | | getAccident(this.searchForm).then((res) => { |
| | | this.loading = false; |
| | | if (res.success) { |
| | | this.data = res.result.records; |
| | | this.total = res.result.total; |
| | | } |
| | | }); |
| | | }, |
| | | getPermList() { |
| | | this.treeLoading = true; |
| | | getAllPermissionList().then((res) => { |
| | | if (res.success) { |
| | | this.deleteDisableNode(res.result); |
| | | this.permData = res.result; |
| | | this.treeLoading = false; |
| | | } |
| | | this.treeLoading = false; |
| | | }); |
| | | }, |
| | | // 递归标记禁用节点 |
| | | deleteDisableNode(permData) { |
| | | let that = this; |
| | | permData.forEach(function (e) { |
| | | if (e.status == -1) { |
| | | e.title = "[已禁用] " + e.title; |
| | | e.disabled = true; |
| | | } |
| | | if (e.children && e.children.length > 0) { |
| | | that.deleteDisableNode(e.children); |
| | | } |
| | | }); |
| | | }, |
| | | carRole() { |
| | | this.roleModalVisible = false; |
| | | }, |
| | | submitaccidentManage() { |
| | | this.accidentForm.accidentDate = this.accidentDate; |
| | | this.$refs.accidentForm.validate((valid) => { |
| | | if (valid) { |
| | | if (this.modalType == 0) { |
| | | // 添加 |
| | | this.submitLoading = true; |
| | | addAccident(this.accidentForm).then((res) => { |
| | | this.submitLoading = false; |
| | | if (res.success) { |
| | | this.$Message.success("操作成功"); |
| | | this.getDataList(); |
| | | this.roleModalVisible = false; |
| | | } |
| | | }); |
| | | } else { |
| | | this.submitLoading = true; |
| | | addAccident(this.accidentForm).then((res) => { |
| | | this.submitLoading = false; |
| | | if (res.success) { |
| | | this.$Message.success("操作成功"); |
| | | this.getDataList(); |
| | | this.roleModalVisible = false; |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | | submitRemove(){ |
| | | this.$refs.removeForm.validate((valid) => { |
| | | if (valid) { |
| | | this.submitLoading = true; |
| | | addAccident(this.removeForm).then((res) => { |
| | | this.submitLoading = false; |
| | | if (res.success) { |
| | | this.$Message.success("操作成功"); |
| | | this.getDataList(); |
| | | this.carModalVisible = false; |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | }, |
| | | addOil() { |
| | | this.getAllCar(); |
| | | this.modalType = 0; |
| | | this.modalTitle = "添加事故记录"; |
| | | this.$refs.accidentForm.resetFields(); |
| | | delete this.accidentForm.id; |
| | | this.roleModalVisible = true; |
| | | }, |
| | | edit(v) { |
| | | this.getAllCar(); |
| | | this.accidentDate = v.accidentDate; |
| | | this.modalType = 1; |
| | | this.modalTitle = "编辑事故记录"; |
| | | this.$refs.accidentForm.resetFields(); |
| | | // 转换null为"" |
| | | for (let attr in v) { |
| | | if (v[attr] == null) { |
| | | v[attr] = ""; |
| | | } |
| | | } |
| | | let str = JSON.stringify(v); |
| | | let roleInfo = JSON.parse(str); |
| | | |
| | | this.accidentForm = roleInfo; |
| | | this.roleModalVisible = true; |
| | | }, |
| | | removeCar(v) { |
| | | this.dataType = 0; |
| | | this.modalTitle = "移除车辆"; |
| | | this.$refs.accidentForm.resetFields(); |
| | | // 转换null为"" |
| | | for (let attr in v) { |
| | | if (v[attr] == null) { |
| | | v[attr] = ""; |
| | | } |
| | | } |
| | | let str = JSON.stringify(v); |
| | | let roleInfo = JSON.parse(str); |
| | | roleInfo.status=1 |
| | | console.log(roleInfo); |
| | | this.removeForm = roleInfo; |
| | | this.carModalVisible = true; |
| | | |
| | | }, |
| | | getAllCar(){ |
| | | getAll().then((res) => { |
| | | if(res.success){ |
| | | this.carList = res.result; |
| | | console.log(this.carList); |
| | | } |
| | | }); |
| | | }, |
| | | remove(v) { |
| | | this.$Modal.confirm({ |
| | | title: "确认删除", |
| | | content: "您确认要删除吗 ", |
| | | loading: true, |
| | | onOk: () => { |
| | | deleteAccident({ ids: v.id }).then((res) => { |
| | | this.$Modal.remove(); |
| | | if (res.success) { |
| | | this.clearSelectAll(); |
| | | this.$Message.success("删除成功"); |
| | | this.getDataList(); |
| | | } |
| | | }); |
| | | }, |
| | | }); |
| | | }, |
| | | setDefault(v) { |
| | | this.loading = true; |
| | | let params = { |
| | | id: v.id, |
| | | isDefault: true, |
| | | }; |
| | | setDefaultRole(params).then((res) => { |
| | | this.loading = false; |
| | | if (res.success) { |
| | | this.$Message.success("操作成功"); |
| | | this.getDataList(); |
| | | } |
| | | }); |
| | | }, |
| | | cancelDefault(v) { |
| | | this.loading = true; |
| | | let params = { |
| | | id: v.id, |
| | | isDefault: false, |
| | | }; |
| | | setDefaultRole(params).then((res) => { |
| | | this.loading = false; |
| | | if (res.success) { |
| | | this.$Message.success("操作成功"); |
| | | this.getDataList(); |
| | | } |
| | | }); |
| | | }, |
| | | clearSelectAll() { |
| | | this.$refs.table.selectAll(false); |
| | | }, |
| | | changeSelect(e) { |
| | | this.selectList = e; |
| | | }, |
| | | delAll() { |
| | | if (this.selectList.length <= 0) { |
| | | this.$Message.warning("您还未选择要删除的数据"); |
| | | return; |
| | | } |
| | | this.$Modal.confirm({ |
| | | title: "确认删除", |
| | | content: "您确认要删除所选的 " + this.selectList.length + " 条数据?", |
| | | loading: true, |
| | | onOk: () => { |
| | | let ids = ""; |
| | | this.selectList.forEach(function (e) { |
| | | ids += e.id + ","; |
| | | }); |
| | | ids = ids.substring(0, ids.length - 1); |
| | | deleteCar({ ids: ids }).then((res) => { |
| | | this.$Modal.remove(); |
| | | if (res.success) { |
| | | this.$Message.success("删除成功"); |
| | | this.clearSelectAll(); |
| | | this.getDataList(); |
| | | } |
| | | }); |
| | | }, |
| | | }); |
| | | }, |
| | | editPerm(v) { |
| | | this.editRolePermId = v.id; |
| | | this.modalTitle = "分配 " + v.name + " 的菜单权限"; |
| | | // 匹配勾选 |
| | | let rolePerms = v.permissions; |
| | | if (this.treeLoading) { |
| | | this.$Message.warning("菜单权限数据加载中,请稍后点击查看"); |
| | | return; |
| | | } |
| | | // 递归判断子节点 |
| | | this.checkPermTree(this.permData, rolePerms); |
| | | this.permModalVisible = true; |
| | | }, |
| | | // 递归判断子节点 |
| | | checkPermTree(permData, rolePerms) { |
| | | let that = this; |
| | | permData.forEach(function (p) { |
| | | if (that.hasPerm(p, rolePerms) && p.status != -1) { |
| | | p.checked = true; |
| | | } else { |
| | | p.checked = false; |
| | | } |
| | | if (p.children && p.children.length > 0) { |
| | | that.checkPermTree(p.children, rolePerms); |
| | | } |
| | | }); |
| | | }, |
| | | // 判断角色拥有的权限节点勾选 |
| | | hasPerm(p, rolePerms) { |
| | | let flag = false; |
| | | for (let i = 0; i < rolePerms.length; i++) { |
| | | if (p.id == rolePerms[i].permissionId) { |
| | | flag = true; |
| | | break; |
| | | } |
| | | } |
| | | if (flag) { |
| | | return true; |
| | | } |
| | | return false; |
| | | }, |
| | | // 全选反选 |
| | | selectTreeAll() { |
| | | this.selectAllFlag = !this.selectAllFlag; |
| | | let select = this.selectAllFlag; |
| | | this.selectedTreeAll(this.permData, select); |
| | | }, |
| | | // 递归全选节点 |
| | | selectedTreeAll(permData, select) { |
| | | let that = this; |
| | | permData.forEach(function (e) { |
| | | e.checked = select; |
| | | if (e.children && e.children.length > 0) { |
| | | that.selectedTreeAll(e.children, select); |
| | | } |
| | | }); |
| | | }, |
| | | submitPermEdit() { |
| | | this.submitPermLoading = true; |
| | | let permIds = ""; |
| | | let selectedNodes = this.$refs.tree.getCheckedNodes(); |
| | | selectedNodes.forEach(function (e) { |
| | | permIds += e.id + ","; |
| | | }); |
| | | permIds = permIds.substring(0, permIds.length - 1); |
| | | editRolePerm({ |
| | | roleId: this.editRolePermId, |
| | | permIds: permIds, |
| | | }).then((res) => { |
| | | this.submitPermLoading = false; |
| | | if (res.success) { |
| | | this.$Message.success("操作成功"); |
| | | // 标记重新获取菜单数据 |
| | | this.$store.commit("setAdded", false); |
| | | util.initRouter(this); |
| | | this.getDataList(); |
| | | this.permModalVisible = false; |
| | | } |
| | | }); |
| | | }, |
| | | cancelPermEdit() { |
| | | this.permModalVisible = false; |
| | | }, |
| | | loadData(item, callback) { |
| | | loadDepartment(item.id, { openDataFilter: false }).then((res) => { |
| | | if (res.success) { |
| | | res.result.forEach(function (e) { |
| | | e.selected = false; |
| | | if (e.isParent) { |
| | | e.loading = false; |
| | | e.children = []; |
| | | } |
| | | if (e.status == -1) { |
| | | e.title = "[已禁用] " + e.title; |
| | | e.disabled = true; |
| | | } |
| | | }); |
| | | callback(res.result); |
| | | } |
| | | }); |
| | | }, |
| | | expandCheckDep(v) { |
| | | // 判断展开子节点 |
| | | this.checkDepTree(v.children, this.editDepartments); |
| | | }, |
| | | // 判断子节点 |
| | | checkDepTree(depData, roleDepIds) { |
| | | let that = this; |
| | | depData.forEach(function (p) { |
| | | if (that.hasDepPerm(p, roleDepIds)) { |
| | | p.selected = true; |
| | | } else { |
| | | p.selected = false; |
| | | } |
| | | }); |
| | | }, |
| | | // 判断角色拥有的权限节点勾选 |
| | | hasDepPerm(p, roleDepIds) { |
| | | let flag = false; |
| | | for (let i = 0; i < roleDepIds.length; i++) { |
| | | if (p.id == roleDepIds[i].departmentId) { |
| | | flag = true; |
| | | break; |
| | | } |
| | | } |
| | | if (flag) { |
| | | return true; |
| | | } |
| | | return false; |
| | | }, |
| | | submitDepEdit() { |
| | | let depIds = ""; |
| | | if (this.dataType == 1) { |
| | | let selectedNodes = this.$refs.depTree.getSelectedNodes(); |
| | | selectedNodes.forEach(function (e) { |
| | | depIds += e.id + ","; |
| | | }); |
| | | depIds = depIds.substring(0, depIds.length - 1); |
| | | } |
| | | this.submitDepLoading = true; |
| | | editRoleDep({ |
| | | roleId: this.editRolePermId, |
| | | dataType: this.dataType, |
| | | depIds: depIds, |
| | | }).then((res) => { |
| | | this.submitDepLoading = false; |
| | | if (res.success) { |
| | | this.$Message.success("操作成功"); |
| | | this.getDataList(); |
| | | this.depModalVisible = false; |
| | | } |
| | | }); |
| | | }, |
| | | changeOpen(v) { |
| | | if (v == "0") { |
| | | this.permData.forEach((e) => { |
| | | e.expand = true; |
| | | if (e.children && e.children.length > 0) { |
| | | e.children.forEach((c) => { |
| | | c.expand = true; |
| | | if (c.children && c.children.length > 0) { |
| | | c.children.forEach(function (b) { |
| | | b.expand = true; |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | } else if (v == "1") { |
| | | this.permData.forEach((e) => { |
| | | e.expand = false; |
| | | if (e.children && e.children.length > 0) { |
| | | e.children.forEach((c) => { |
| | | c.expand = false; |
| | | if (c.children && c.children.length > 0) { |
| | | c.children.forEach(function (b) { |
| | | b.expand = false; |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | } else if (v == "2") { |
| | | this.permData.forEach((e) => { |
| | | e.expand = true; |
| | | if (e.children && e.children.length > 0) { |
| | | e.children.forEach((c) => { |
| | | c.expand = false; |
| | | if (c.children && c.children.length > 0) { |
| | | c.children.forEach(function (b) { |
| | | b.expand = false; |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | } else if (v == "3") { |
| | | this.permData.forEach((e) => { |
| | | e.expand = true; |
| | | if (e.children && e.children.length > 0) { |
| | | e.children.forEach((c) => { |
| | | c.expand = true; |
| | | if (c.children && c.children.length > 0) { |
| | | c.children.forEach(function (b) { |
| | | b.expand = false; |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | | }, |
| | | mounted() { |
| | | this.maxHeight = Number(document.documentElement.clientHeight - 121) + "px"; |
| | | this.init(); |
| | | }, |
| | | }; |
| | | </script> |
New file |
| | |
| | | .permModal { |
| | | .ivu-modal-body { |
| | | max-height: 560px; |
| | | overflow: auto; |
| | | } |
| | | } |
| | | |
| | | .depModal { |
| | | .ivu-modal-body { |
| | | max-height: 500px; |
| | | overflow: auto; |
| | | } |
| | | } |
New file |
| | |
| | | <style lang="less"> |
| | | @import "@/styles/table-common.less"; |
| | | @import "@/styles/drawer-common.less"; |
| | | @import "./addOilManage.less"; |
| | | </style> |
| | | <template> |
| | | <div class="search"> |
| | | <Card> |
| | | <Row class="operation"> |
| | | <Button @click="addOil" type="primary" icon="md-add">添加加油记录</Button> |
| | | <Button @click="delAll" icon="md-trash">批量删除</Button> |
| | | <Button @click="init" icon="md-refresh">刷新</Button> |
| | | <Button type="dashed" @click="openTip = !openTip">{{ |
| | | openTip ? "关闭提示" : "开启提示" |
| | | }}</Button> |
| | | <Input |
| | | v-model="searchForm.carNo" |
| | | suffix="ios-search" |
| | | @on-change="getDataList" |
| | | placeholder="输入车牌号搜索" |
| | | clearable |
| | | style="width: 250px" |
| | | /> |
| | | </Row> |
| | | <Alert show-icon v-show="openTip"> |
| | | 已选择 |
| | | <span class="select-count">{{ selectList.length }}</span> 项 |
| | | <a class="select-clear" @click="clearSelectAll">清空</a> |
| | | </Alert> |
| | | <Table |
| | | :loading="loading" |
| | | border |
| | | :columns="columns" |
| | | :data="data" |
| | | ref="table" |
| | | sortable="custom" |
| | | @on-sort-change="changeSort" |
| | | @on-selection-change="changeSelect" |
| | | ></Table> |
| | | <Row type="flex" justify="end" class="page"> |
| | | <Page |
| | | :current="searchForm.pageNumber" |
| | | :total="total" |
| | | :page-size="searchForm.pageSize" |
| | | @on-change="changePage" |
| | | @on-page-size-change="changePageSize" |
| | | :page-size-opts="[10, 20, 50]" |
| | | size="small" |
| | | show-total |
| | | show-elevator |
| | | show-sizer |
| | | ></Page> |
| | | </Row> |
| | | </Card> |
| | | |
| | | <!-- 编辑 --> |
| | | <Modal |
| | | :title="modalTitle" |
| | | v-model="roleModalVisible" |
| | | :mask-closable="false" |
| | | :width="500" |
| | | > |
| | | <Form |
| | | ref="addOilForm" |
| | | :model="addOilForm" |
| | | :label-width="80" |
| | | :rules="addOilFormValidate" |
| | | > |
| | | <FormItem label="车辆" prop="carId"> |
| | | <Select v-model="addOilForm.carId" filterable> |
| | | <Option v-for="item in carList" :value="item.id">{{ item.carNo }}</Option> |
| | | </Select> |
| | | </FormItem> |
| | | <Form-item label="加油日期" prop="addDate"> |
| | | <Row> |
| | | <Col span="11"> |
| | | <Date-picker @on-change="change1" type="date" value="yyyy-MM-dd" placeholder="选择日期" v-model="addOilForm.addDate"></Date-picker> |
| | | </Col> |
| | | </Row> |
| | | </Form-item> |
| | | <FormItem label="加油量" prop="amount"> |
| | | <Input v-model="addOilForm.amount" type="number"/> |
| | | </FormItem> |
| | | <FormItem label="单价" prop="unitPrice"> |
| | | <Input v-model="addOilForm.unitPrice" type="number"/> |
| | | </FormItem> |
| | | <FormItem label="加油金额" prop="money"> |
| | | <Input v-model="addOilForm.money" type="number"/> |
| | | </FormItem> |
| | | <FormItem label="加油时里程" prop="mileage"> |
| | | <Input v-model="addOilForm.mileage" type="number"/> |
| | | </FormItem> |
| | | <FormItem label="备注" prop="remarks"> |
| | | <Input v-model="addOilForm.remarks" /> |
| | | </FormItem> |
| | | </Form> |
| | | <div slot="footer"> |
| | | <Button type="text" @click="carRole">取消</Button> |
| | | <Button type="primary" :loading="submitLoading" @click="submitAddOil" |
| | | >提交</Button |
| | | > |
| | | </div> |
| | | </Modal> |
| | | <!-- 菜单权限 --> |
| | | <Drawer |
| | | :title="modalTitle" |
| | | v-model="permModalVisible" |
| | | :mask-closable="false" |
| | | :width="500" |
| | | draggable |
| | | > |
| | | <div :style="{ maxHeight: maxHeight }" class="drawer-content"> |
| | | <div style="position: relative"> |
| | | <Tree |
| | | ref="tree" |
| | | :data="permData" |
| | | show-checkbox |
| | | :render="renderContent" |
| | | :check-strictly="true" |
| | | ></Tree> |
| | | <Spin size="large" fix v-if="treeLoading"></Spin> |
| | | </div> |
| | | </div> |
| | | <div class="drawer-footer br"> |
| | | <Button |
| | | type="primary" |
| | | :loading="submitPermLoading" |
| | | @click="submitPermEdit" |
| | | >提交</Button |
| | | > |
| | | <Button @click="selectTreeAll">全选/反选</Button> |
| | | <Select |
| | | v-model="openLevel" |
| | | @on-change="changeOpen" |
| | | style="width: 110px" |
| | | transfer |
| | | > |
| | | <Option value="0">展开所有</Option> |
| | | <Option value="1">收合所有</Option> |
| | | <Option value="2">仅展开一级</Option> |
| | | <Option value="3">仅展开两级</Option> |
| | | </Select> |
| | | <Button type="text" @click="cancelPermEdit">取消</Button> |
| | | </div> |
| | | </Drawer> |
| | | <!-- 数据权限 --> |
| | | <Modal |
| | | :title="modalTitle" |
| | | v-model="carModalVisible" |
| | | :mask-closable="false" |
| | | :width="500" |
| | | class="depModal" |
| | | > |
| | | <Form :label-width="85" ref="removeForm" :model="removeForm"> |
| | | <FormItem label="移除原因" prop="removeReason"> |
| | | <Input v-model="removeForm.removeReason"/> |
| | | </FormItem> |
| | | </Form> |
| | | <div v-show="dataType == 1" style="margin-top: 15px"> |
| | | <div style="position: relative"> |
| | | <Tree |
| | | ref="depTree" |
| | | :data="depData" |
| | | :load-data="loadData" |
| | | @on-toggle-expand="expandCheckDep" |
| | | multiple |
| | | style="margin-top: 15px" |
| | | ></Tree> |
| | | <Spin size="large" fix v-if="depTreeLoading"></Spin> |
| | | </div> |
| | | </div> |
| | | <div slot="footer"> |
| | | <Button type="text" @click="depModalVisible = false">取消</Button> |
| | | <Button |
| | | type="primary" |
| | | :loading="submitDepLoading" |
| | | @click="submitRemove" |
| | | >提交</Button |
| | | > |
| | | </div> |
| | | </Modal> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | getAllPermissionList, |
| | | setDefaultRole, |
| | | editRolePerm, |
| | | initDepartment, |
| | | loadDepartment, |
| | | editRoleDep, |
| | | } from "@/api/index"; |
| | | |
| | | import { |
| | | getAll, |
| | | getAddOilList, |
| | | addOil, |
| | | deleteAddOil, |
| | | getCarList, |
| | | editCar, |
| | | deleteCar, |
| | | } from "@/api/open"; |
| | | import util from "@/libs/util.js"; |
| | | export default { |
| | | name: "car-manage", |
| | | data() { |
| | | return { |
| | | maxHeight: 510, |
| | | openTip: true, |
| | | openLevel: "0", |
| | | loading: true, |
| | | treeLoading: true, |
| | | depTreeLoading: true, |
| | | submitPermLoading: false, |
| | | submitDepLoading: false, |
| | | searchKey: "", |
| | | sortColumn: "createTime", |
| | | sortType: "desc", |
| | | modalType: 0, |
| | | roleModalVisible: false, |
| | | carModalVisible: false, |
| | | permModalVisible: false, |
| | | depModalVisible: false, |
| | | modalTitle: "", |
| | | searchForm: { |
| | | // 搜索框初始化对象 |
| | | pageNumber: 1, // 当前页数 |
| | | pageSize: 10, // 页面大小 |
| | | sort: "createTime", // 默认排序字段 |
| | | order: "desc", // 默认排序方式 |
| | | key: "", |
| | | }, |
| | | addOilForm: { |
| | | status : 0 |
| | | }, |
| | | removeForm: { |
| | | status : 1 |
| | | }, |
| | | addOilFormValidate: { |
| | | name: [ |
| | | { required: true, message: "角色名称不能为空", trigger: "change" }, |
| | | ], |
| | | }, |
| | | submitLoading: false, |
| | | selectList: [], |
| | | columns: [ |
| | | { |
| | | type: "selection", |
| | | width: 60, |
| | | align: "center", |
| | | }, |
| | | { |
| | | type: "index", |
| | | width: 60, |
| | | align: "center", |
| | | }, |
| | | { |
| | | title: "车牌号", |
| | | key: "carNo", |
| | | width: 100, |
| | | sortable: true, |
| | | }, |
| | | { |
| | | title: "加油日期", |
| | | key: "addDate", |
| | | width: 150, |
| | | sortable: true, |
| | | }, |
| | | { |
| | | title: "加油量", |
| | | key: "amount", |
| | | width: 100, |
| | | sortable: true, |
| | | }, |
| | | { |
| | | title: "单价", |
| | | key: "unitPrice", |
| | | width: 100, |
| | | sortable: true, |
| | | }, |
| | | { |
| | | title: "加油金额", |
| | | key: "money", |
| | | minWidth: 100, |
| | | sortable: true, |
| | | }, |
| | | { |
| | | title: "加油时里程", |
| | | key: "mileage", |
| | | minWidth: 100, |
| | | sortable: true, |
| | | }, |
| | | { |
| | | title: "备注", |
| | | key: "remarks", |
| | | minWidth: 150, |
| | | }, |
| | | { |
| | | title: "操作", |
| | | key: "action", |
| | | align: "center", |
| | | width: 200, |
| | | render: (h, params) => { |
| | | return h("div", [ |
| | | h( |
| | | "a", |
| | | { |
| | | on: { |
| | | click: () => { |
| | | this.edit(params.row); |
| | | }, |
| | | }, |
| | | }, |
| | | "编辑" |
| | | ), |
| | | h("Divider", { |
| | | props: { |
| | | type: "vertical", |
| | | }, |
| | | }), |
| | | h( |
| | | "a", |
| | | { |
| | | on: { |
| | | click: () => { |
| | | this.remove(params.row); |
| | | }, |
| | | }, |
| | | }, |
| | | "删除" |
| | | ), |
| | | ]); |
| | | }, |
| | | }, |
| | | ], |
| | | data: [], |
| | | total: 0, |
| | | permData: [], |
| | | editRolePermId: "", |
| | | selectAllFlag: false, |
| | | depData: [], |
| | | dataType: 0, |
| | | editDepartments: [], |
| | | buyYear:'', |
| | | carList:[] |
| | | }; |
| | | }, |
| | | methods: { |
| | | change1(e){ |
| | | this.addDate = e; |
| | | }, |
| | | init() { |
| | | this.getDataList(); |
| | | // 获取所有菜单权限树 |
| | | this.getPermList(); |
| | | }, |
| | | renderContent(h, { root, node, data }) { |
| | | let icon = ""; |
| | | if (data.level == 0) { |
| | | icon = "ios-navigate"; |
| | | } else if (data.level == 1) { |
| | | icon = "md-list-box"; |
| | | } else if (data.level == 2) { |
| | | icon = "md-list"; |
| | | } else if (data.level == 3) { |
| | | icon = "md-radio-button-on"; |
| | | } else { |
| | | icon = "md-radio-button-off"; |
| | | } |
| | | return h( |
| | | "span", |
| | | { |
| | | style: { |
| | | display: "inline-block", |
| | | cursor: "pointer", |
| | | }, |
| | | on: { |
| | | click: () => { |
| | | if (data.status == -1) { |
| | | return; |
| | | } |
| | | data.checked = !data.checked; |
| | | }, |
| | | }, |
| | | }, |
| | | [ |
| | | h("span", [ |
| | | h("Icon", { |
| | | props: { |
| | | type: icon, |
| | | size: "16", |
| | | }, |
| | | style: { |
| | | "margin-right": "8px", |
| | | "margin-bottom": "3px", |
| | | }, |
| | | }), |
| | | h("span", data.title), |
| | | ]), |
| | | ] |
| | | ); |
| | | }, |
| | | changePage(v) { |
| | | this.searchForm.pageNumber = v; |
| | | this.getDataList(); |
| | | this.clearSelectAll(); |
| | | }, |
| | | changePageSize(v) { |
| | | this.searchForm.pageSize = v; |
| | | this.getDataList(); |
| | | }, |
| | | changeSort(e) { |
| | | this.searchForm.sort = e.key; |
| | | this.searchForm.order = e.order; |
| | | if (e.order == "normal") { |
| | | this.searchForm.order = ""; |
| | | } |
| | | this.getDataList(); |
| | | }, |
| | | getDataList() { |
| | | this.loading = true; |
| | | getAddOilList(this.searchForm).then((res) => { |
| | | this.loading = false; |
| | | if (res.success) { |
| | | this.data = res.result.records; |
| | | this.total = res.result.total; |
| | | } |
| | | }); |
| | | }, |
| | | getPermList() { |
| | | this.treeLoading = true; |
| | | getAllPermissionList().then((res) => { |
| | | if (res.success) { |
| | | this.deleteDisableNode(res.result); |
| | | this.permData = res.result; |
| | | this.treeLoading = false; |
| | | } |
| | | this.treeLoading = false; |
| | | }); |
| | | }, |
| | | // 递归标记禁用节点 |
| | | deleteDisableNode(permData) { |
| | | let that = this; |
| | | permData.forEach(function (e) { |
| | | if (e.status == -1) { |
| | | e.title = "[已禁用] " + e.title; |
| | | e.disabled = true; |
| | | } |
| | | if (e.children && e.children.length > 0) { |
| | | that.deleteDisableNode(e.children); |
| | | } |
| | | }); |
| | | }, |
| | | carRole() { |
| | | this.roleModalVisible = false; |
| | | }, |
| | | submitAddOil() { |
| | | this.addOilForm.addDate = this.addDate; |
| | | this.$refs.addOilForm.validate((valid) => { |
| | | if (valid) { |
| | | if (this.modalType == 0) { |
| | | // 添加 |
| | | this.submitLoading = true; |
| | | addOil(this.addOilForm).then((res) => { |
| | | this.submitLoading = false; |
| | | if (res.success) { |
| | | this.$Message.success("操作成功"); |
| | | this.getDataList(); |
| | | this.roleModalVisible = false; |
| | | } |
| | | }); |
| | | } else { |
| | | this.submitLoading = true; |
| | | addOil(this.addOilForm).then((res) => { |
| | | this.submitLoading = false; |
| | | if (res.success) { |
| | | this.$Message.success("操作成功"); |
| | | this.getDataList(); |
| | | this.roleModalVisible = false; |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | | submitRemove(){ |
| | | this.$refs.removeForm.validate((valid) => { |
| | | if (valid) { |
| | | this.submitLoading = true; |
| | | editCar(this.removeForm).then((res) => { |
| | | this.submitLoading = false; |
| | | if (res.success) { |
| | | this.$Message.success("操作成功"); |
| | | this.getDataList(); |
| | | this.carModalVisible = false; |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | }, |
| | | addOil() { |
| | | this.getAllCar(); |
| | | this.modalType = 0; |
| | | this.modalTitle = "添加加油记录"; |
| | | this.$refs.addOilForm.resetFields(); |
| | | delete this.addOilForm.id; |
| | | this.roleModalVisible = true; |
| | | }, |
| | | edit(v) { |
| | | this.getAllCar(); |
| | | this.addDate = v.addDate; |
| | | this.modalType = 1; |
| | | this.modalTitle = "编辑加油信息"; |
| | | this.$refs.addOilForm.resetFields(); |
| | | // 转换null为"" |
| | | for (let attr in v) { |
| | | if (v[attr] == null) { |
| | | v[attr] = ""; |
| | | } |
| | | } |
| | | let str = JSON.stringify(v); |
| | | let roleInfo = JSON.parse(str); |
| | | |
| | | this.addOilForm = roleInfo; |
| | | this.roleModalVisible = true; |
| | | }, |
| | | removeCar(v) { |
| | | this.dataType = 0; |
| | | this.modalTitle = "移除车辆"; |
| | | this.$refs.addOilForm.resetFields(); |
| | | // 转换null为"" |
| | | for (let attr in v) { |
| | | if (v[attr] == null) { |
| | | v[attr] = ""; |
| | | } |
| | | } |
| | | let str = JSON.stringify(v); |
| | | let roleInfo = JSON.parse(str); |
| | | roleInfo.status=1 |
| | | console.log(roleInfo); |
| | | this.removeForm = roleInfo; |
| | | this.carModalVisible = true; |
| | | |
| | | }, |
| | | getAllCar(){ |
| | | getAll().then((res) => { |
| | | if(res.success){ |
| | | this.carList = res.result; |
| | | console.log(this.carList); |
| | | } |
| | | }); |
| | | }, |
| | | remove(v) { |
| | | this.$Modal.confirm({ |
| | | title: "确认删除", |
| | | content: "您确认要删除吗 ", |
| | | loading: true, |
| | | onOk: () => { |
| | | deleteAddOil({ ids: v.id }).then((res) => { |
| | | this.$Modal.remove(); |
| | | if (res.success) { |
| | | this.clearSelectAll(); |
| | | this.$Message.success("删除成功"); |
| | | this.getDataList(); |
| | | } |
| | | }); |
| | | }, |
| | | }); |
| | | }, |
| | | setDefault(v) { |
| | | this.loading = true; |
| | | let params = { |
| | | id: v.id, |
| | | isDefault: true, |
| | | }; |
| | | setDefaultRole(params).then((res) => { |
| | | this.loading = false; |
| | | if (res.success) { |
| | | this.$Message.success("操作成功"); |
| | | this.getDataList(); |
| | | } |
| | | }); |
| | | }, |
| | | cancelDefault(v) { |
| | | this.loading = true; |
| | | let params = { |
| | | id: v.id, |
| | | isDefault: false, |
| | | }; |
| | | setDefaultRole(params).then((res) => { |
| | | this.loading = false; |
| | | if (res.success) { |
| | | this.$Message.success("操作成功"); |
| | | this.getDataList(); |
| | | } |
| | | }); |
| | | }, |
| | | clearSelectAll() { |
| | | this.$refs.table.selectAll(false); |
| | | }, |
| | | changeSelect(e) { |
| | | this.selectList = e; |
| | | }, |
| | | delAll() { |
| | | if (this.selectList.length <= 0) { |
| | | this.$Message.warning("您还未选择要删除的数据"); |
| | | return; |
| | | } |
| | | this.$Modal.confirm({ |
| | | title: "确认删除", |
| | | content: "您确认要删除所选的 " + this.selectList.length + " 条数据?", |
| | | loading: true, |
| | | onOk: () => { |
| | | let ids = ""; |
| | | this.selectList.forEach(function (e) { |
| | | ids += e.id + ","; |
| | | }); |
| | | ids = ids.substring(0, ids.length - 1); |
| | | deleteCar({ ids: ids }).then((res) => { |
| | | this.$Modal.remove(); |
| | | if (res.success) { |
| | | this.$Message.success("删除成功"); |
| | | this.clearSelectAll(); |
| | | this.getDataList(); |
| | | } |
| | | }); |
| | | }, |
| | | }); |
| | | }, |
| | | editPerm(v) { |
| | | this.editRolePermId = v.id; |
| | | this.modalTitle = "分配 " + v.name + " 的菜单权限"; |
| | | // 匹配勾选 |
| | | let rolePerms = v.permissions; |
| | | if (this.treeLoading) { |
| | | this.$Message.warning("菜单权限数据加载中,请稍后点击查看"); |
| | | return; |
| | | } |
| | | // 递归判断子节点 |
| | | this.checkPermTree(this.permData, rolePerms); |
| | | this.permModalVisible = true; |
| | | }, |
| | | // 递归判断子节点 |
| | | checkPermTree(permData, rolePerms) { |
| | | let that = this; |
| | | permData.forEach(function (p) { |
| | | if (that.hasPerm(p, rolePerms) && p.status != -1) { |
| | | p.checked = true; |
| | | } else { |
| | | p.checked = false; |
| | | } |
| | | if (p.children && p.children.length > 0) { |
| | | that.checkPermTree(p.children, rolePerms); |
| | | } |
| | | }); |
| | | }, |
| | | // 判断角色拥有的权限节点勾选 |
| | | hasPerm(p, rolePerms) { |
| | | let flag = false; |
| | | for (let i = 0; i < rolePerms.length; i++) { |
| | | if (p.id == rolePerms[i].permissionId) { |
| | | flag = true; |
| | | break; |
| | | } |
| | | } |
| | | if (flag) { |
| | | return true; |
| | | } |
| | | return false; |
| | | }, |
| | | // 全选反选 |
| | | selectTreeAll() { |
| | | this.selectAllFlag = !this.selectAllFlag; |
| | | let select = this.selectAllFlag; |
| | | this.selectedTreeAll(this.permData, select); |
| | | }, |
| | | // 递归全选节点 |
| | | selectedTreeAll(permData, select) { |
| | | let that = this; |
| | | permData.forEach(function (e) { |
| | | e.checked = select; |
| | | if (e.children && e.children.length > 0) { |
| | | that.selectedTreeAll(e.children, select); |
| | | } |
| | | }); |
| | | }, |
| | | submitPermEdit() { |
| | | this.submitPermLoading = true; |
| | | let permIds = ""; |
| | | let selectedNodes = this.$refs.tree.getCheckedNodes(); |
| | | selectedNodes.forEach(function (e) { |
| | | permIds += e.id + ","; |
| | | }); |
| | | permIds = permIds.substring(0, permIds.length - 1); |
| | | editRolePerm({ |
| | | roleId: this.editRolePermId, |
| | | permIds: permIds, |
| | | }).then((res) => { |
| | | this.submitPermLoading = false; |
| | | if (res.success) { |
| | | this.$Message.success("操作成功"); |
| | | // 标记重新获取菜单数据 |
| | | this.$store.commit("setAdded", false); |
| | | util.initRouter(this); |
| | | this.getDataList(); |
| | | this.permModalVisible = false; |
| | | } |
| | | }); |
| | | }, |
| | | cancelPermEdit() { |
| | | this.permModalVisible = false; |
| | | }, |
| | | loadData(item, callback) { |
| | | loadDepartment(item.id, { openDataFilter: false }).then((res) => { |
| | | if (res.success) { |
| | | res.result.forEach(function (e) { |
| | | e.selected = false; |
| | | if (e.isParent) { |
| | | e.loading = false; |
| | | e.children = []; |
| | | } |
| | | if (e.status == -1) { |
| | | e.title = "[已禁用] " + e.title; |
| | | e.disabled = true; |
| | | } |
| | | }); |
| | | callback(res.result); |
| | | } |
| | | }); |
| | | }, |
| | | expandCheckDep(v) { |
| | | // 判断展开子节点 |
| | | this.checkDepTree(v.children, this.editDepartments); |
| | | }, |
| | | // 判断子节点 |
| | | checkDepTree(depData, roleDepIds) { |
| | | let that = this; |
| | | depData.forEach(function (p) { |
| | | if (that.hasDepPerm(p, roleDepIds)) { |
| | | p.selected = true; |
| | | } else { |
| | | p.selected = false; |
| | | } |
| | | }); |
| | | }, |
| | | // 判断角色拥有的权限节点勾选 |
| | | hasDepPerm(p, roleDepIds) { |
| | | let flag = false; |
| | | for (let i = 0; i < roleDepIds.length; i++) { |
| | | if (p.id == roleDepIds[i].departmentId) { |
| | | flag = true; |
| | | break; |
| | | } |
| | | } |
| | | if (flag) { |
| | | return true; |
| | | } |
| | | return false; |
| | | }, |
| | | submitDepEdit() { |
| | | let depIds = ""; |
| | | if (this.dataType == 1) { |
| | | let selectedNodes = this.$refs.depTree.getSelectedNodes(); |
| | | selectedNodes.forEach(function (e) { |
| | | depIds += e.id + ","; |
| | | }); |
| | | depIds = depIds.substring(0, depIds.length - 1); |
| | | } |
| | | this.submitDepLoading = true; |
| | | editRoleDep({ |
| | | roleId: this.editRolePermId, |
| | | dataType: this.dataType, |
| | | depIds: depIds, |
| | | }).then((res) => { |
| | | this.submitDepLoading = false; |
| | | if (res.success) { |
| | | this.$Message.success("操作成功"); |
| | | this.getDataList(); |
| | | this.depModalVisible = false; |
| | | } |
| | | }); |
| | | }, |
| | | changeOpen(v) { |
| | | if (v == "0") { |
| | | this.permData.forEach((e) => { |
| | | e.expand = true; |
| | | if (e.children && e.children.length > 0) { |
| | | e.children.forEach((c) => { |
| | | c.expand = true; |
| | | if (c.children && c.children.length > 0) { |
| | | c.children.forEach(function (b) { |
| | | b.expand = true; |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | } else if (v == "1") { |
| | | this.permData.forEach((e) => { |
| | | e.expand = false; |
| | | if (e.children && e.children.length > 0) { |
| | | e.children.forEach((c) => { |
| | | c.expand = false; |
| | | if (c.children && c.children.length > 0) { |
| | | c.children.forEach(function (b) { |
| | | b.expand = false; |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | } else if (v == "2") { |
| | | this.permData.forEach((e) => { |
| | | e.expand = true; |
| | | if (e.children && e.children.length > 0) { |
| | | e.children.forEach((c) => { |
| | | c.expand = false; |
| | | if (c.children && c.children.length > 0) { |
| | | c.children.forEach(function (b) { |
| | | b.expand = false; |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | } else if (v == "3") { |
| | | this.permData.forEach((e) => { |
| | | e.expand = true; |
| | | if (e.children && e.children.length > 0) { |
| | | e.children.forEach((c) => { |
| | | c.expand = true; |
| | | if (c.children && c.children.length > 0) { |
| | | c.children.forEach(function (b) { |
| | | b.expand = false; |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | | }, |
| | | mounted() { |
| | | this.maxHeight = Number(document.documentElement.clientHeight - 121) + "px"; |
| | | this.init(); |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | v-model="searchForm.carNo" |
| | | suffix="ios-search" |
| | | @on-change="getDataList" |
| | | placeholder="输入关键词搜索" |
| | | placeholder="输入车牌号搜索" |
| | | clearable |
| | | style="width: 250px" |
| | | /> |
| | |
| | | <FormItem label="品牌" prop="brand"> |
| | | <Input v-model="carForm.brand"/> |
| | | </FormItem> |
| | | |
| | | <FormItem label="型号" prop="model"> |
| | | <Input v-model="carForm.model" /> |
| | | </FormItem> |
| | |
| | | <!-- 数据权限 --> |
| | | <Modal |
| | | :title="modalTitle" |
| | | v-model="depModalVisible" |
| | | v-model="carModalVisible" |
| | | :mask-closable="false" |
| | | :width="500" |
| | | class="depModal" |
| | | > |
| | | <Alert show-icon |
| | | >默认可查看全部数据,自定义数据范围时请勾选下方数据</Alert |
| | | > |
| | | <Form :label-width="85"> |
| | | <FormItem label="数据范围"> |
| | | <Select v-model="dataType" transfer> |
| | | <Option :value="0">全部数据权限</Option> |
| | | <Option :value="1">自定义数据权限</Option> |
| | | <Option :value="2">本部门及以下数据权限</Option> |
| | | <Option :value="3">本部门数据权限</Option> |
| | | </Select> |
| | | <Form :label-width="85" ref="removeForm" :model="removeForm"> |
| | | <FormItem label="移除原因" prop="removeReason"> |
| | | <Input v-model="removeForm.removeReason"/> |
| | | </FormItem> |
| | | </Form> |
| | | <div v-show="dataType == 1" style="margin-top: 15px"> |
| | |
| | | <Button |
| | | type="primary" |
| | | :loading="submitDepLoading" |
| | | @click="submitDepEdit" |
| | | @click="submitRemove" |
| | | >提交</Button |
| | | > |
| | | </div> |
| | |
| | | sortType: "desc", |
| | | modalType: 0, |
| | | roleModalVisible: false, |
| | | carModalVisible: false, |
| | | permModalVisible: false, |
| | | depModalVisible: false, |
| | | modalTitle: "", |
| | |
| | | // 搜索框初始化对象 |
| | | pageNumber: 1, // 当前页数 |
| | | pageSize: 10, // 页面大小 |
| | | sort: "carNo", // 默认排序字段 |
| | | sort: "createTime", // 默认排序字段 |
| | | order: "desc", // 默认排序方式 |
| | | key: "", |
| | | }, |
| | | carForm: { |
| | | type : 0, |
| | | status : 0 |
| | | }, |
| | | removeForm: { |
| | | status : 1 |
| | | }, |
| | | carFormValidate: { |
| | | name: [ |
| | |
| | | align: "center", |
| | | }, |
| | | { |
| | | title: "车牌号", |
| | | key: "carNo", |
| | | width: 100, |
| | | sortable: true, |
| | | }, |
| | | { |
| | | title: "品牌", |
| | | key: "brand", |
| | | width: 100, |
| | | sortable: true, |
| | | }, |
| | | { |
| | | title: "型号", |
| | | key: "model", |
| | | width: 100, |
| | | sortable: true, |
| | | }, |
| | | { |
| | | title: "排量", |
| | |
| | | { |
| | | title: "购置年份", |
| | | key: "buyYear", |
| | | minWidth: 150, |
| | | minWidth: 120, |
| | | sortable: true, |
| | | }, |
| | | { |
| | | title: "牌照", |
| | | key: "carNo", |
| | | width: 170, |
| | | sortable: true, |
| | | sortType: "desc", |
| | | }, |
| | | { |
| | | title: "状态", |
| | | key: "status", |
| | | width: 170, |
| | | width: 100, |
| | | sortable: true, |
| | | render: (h, params) => { |
| | | let re = ""; |
| | |
| | | title: "操作", |
| | | key: "action", |
| | | align: "center", |
| | | fixed: "right", |
| | | width: 280, |
| | | render: (h, params) => { |
| | | return h("div", [ |
| | |
| | | { |
| | | on: { |
| | | click: () => { |
| | | this.editPerm(params.row); |
| | | this.removeCar(params.row); |
| | | }, |
| | | }, |
| | | }, |
| | | "菜单权限" |
| | | ), |
| | | h("Divider", { |
| | | props: { |
| | | type: "vertical", |
| | | }, |
| | | }), |
| | | h( |
| | | "a", |
| | | { |
| | | on: { |
| | | click: () => { |
| | | this.editDep(params.row); |
| | | }, |
| | | }, |
| | | }, |
| | | "数据权限" |
| | | "移除车辆" |
| | | ), |
| | | h("Divider", { |
| | | props: { |
| | |
| | | depData: [], |
| | | dataType: 0, |
| | | editDepartments: [], |
| | | buyYear:'' |
| | | }; |
| | | }, |
| | | methods: { |
| | | change1(e){ |
| | | this.carForm.buyYear = e; |
| | | this.buyYear = e; |
| | | }, |
| | | init() { |
| | | this.getDataList(); |
| | |
| | | this.roleModalVisible = false; |
| | | }, |
| | | submitCar() { |
| | | this.carForm.buyYear = this.buyYear; |
| | | this.$refs.carForm.validate((valid) => { |
| | | this.carForm.buyYear = this.carForm.buyYear.toString() |
| | | if (valid) { |
| | | if (this.modalType == 0) { |
| | | // 添加 |
| | |
| | | } |
| | | }); |
| | | }, |
| | | submitRemove(){ |
| | | this.$refs.removeForm.validate((valid) => { |
| | | if (valid) { |
| | | this.submitLoading = true; |
| | | editCar(this.removeForm).then((res) => { |
| | | this.submitLoading = false; |
| | | if (res.success) { |
| | | this.$Message.success("操作成功"); |
| | | this.getDataList(); |
| | | this.carModalVisible = false; |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | }, |
| | | addCar() { |
| | | this.modalType = 0; |
| | | this.modalTitle = "添加车辆"; |
| | |
| | | this.roleModalVisible = true; |
| | | }, |
| | | edit(v) { |
| | | this.buyYear = v.buyYear; |
| | | this.modalType = 1; |
| | | this.modalTitle = "编辑车辆"; |
| | | this.modalTitle = "编辑角色"; |
| | | this.$refs.carForm.resetFields(); |
| | | // 转换null为"" |
| | | for (let attr in v) { |
| | |
| | | } |
| | | let str = JSON.stringify(v); |
| | | let roleInfo = JSON.parse(str); |
| | | |
| | | this.carForm = roleInfo; |
| | | this.roleModalVisible = true; |
| | | }, |
| | | removeCar(v) { |
| | | this.dataType = 0; |
| | | this.modalTitle = "移除车辆"; |
| | | this.$refs.carForm.resetFields(); |
| | | // 转换null为"" |
| | | for (let attr in v) { |
| | | if (v[attr] == null) { |
| | | v[attr] = ""; |
| | | } |
| | | } |
| | | let str = JSON.stringify(v); |
| | | let roleInfo = JSON.parse(str); |
| | | roleInfo.status=1 |
| | | console.log(roleInfo); |
| | | this.removeForm = roleInfo; |
| | | this.carModalVisible = true; |
| | | |
| | | }, |
| | | remove(v) { |
| | | this.$Modal.confirm({ |
| | | title: "确认删除", |
| | | content: "您确认要删除车辆 " + v.name + " ?", |
| | | content: "您确认要删除吗 ", |
| | | loading: true, |
| | | onOk: () => { |
| | | deleteCar({ ids: v.id }).then((res) => { |
| | |
| | | callback(res.result); |
| | | } |
| | | }); |
| | | }, |
| | | editDep(v) { |
| | | this.dataType = 0; |
| | | this.editRolePermId = v.id; |
| | | this.modalTitle = "分配 " + v.name + " 的数据权限"; |
| | | if (v.dataType) { |
| | | this.dataType = v.dataType; |
| | | } |
| | | // 匹配勾选 |
| | | let roleDepIds = v.departments; |
| | | this.editDepartments = roleDepIds; |
| | | this.depTreeLoading = true; |
| | | initDepartment({ openDataFilter: false }).then((res) => { |
| | | this.depTreeLoading = false; |
| | | if (res.success) { |
| | | res.result.forEach(function (e) { |
| | | e.selected = false; |
| | | if (e.isParent) { |
| | | e.loading = false; |
| | | e.children = []; |
| | | } |
| | | if (e.status == -1) { |
| | | e.title = "[已禁用] " + e.title; |
| | | e.disabled = true; |
| | | } |
| | | }); |
| | | this.depData = res.result; |
| | | // 判断子节点 |
| | | this.checkDepTree(this.depData, roleDepIds); |
| | | } |
| | | }); |
| | | this.depModalVisible = true; |
| | | }, |
| | | expandCheckDep(v) { |
| | | // 判断展开子节点 |