| | |
| | | <Card> |
| | | <Row class="operation"> |
| | | <Button @click="addCar" 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" |
| | | v-model="searchForm2.carNo" |
| | | suffix="ios-search" |
| | | @on-change="getDataList" |
| | | @on-change="getDataList2" |
| | | placeholder="输入车牌号搜索" |
| | | clearable |
| | | style="width: 250px" |
| | |
| | | :mask-closable="false" |
| | | :width="500" |
| | | > |
| | | <Form |
| | | ref="carForm" |
| | | :model="carForm" |
| | | :label-width="80" |
| | | :rules="carFormValidate" |
| | | > |
| | | <Form ref="carForm" :model="carForm" :label-width="80" :rules="carFormValidate"> |
| | | <FormItem label="品牌" prop="brand"> |
| | | <Input v-model="carForm.brand"/> |
| | | </FormItem> |
| | |
| | | <FormItem label="牌照" prop="carNo"> |
| | | <Input v-model="carForm.carNo" /> |
| | | </FormItem> |
| | | |
| | | <FormItem label="加油卡号" prop="addOilCode"> |
| | | <Input v-model="carForm.addOilCode" /> |
| | | </FormItem> |
| | | <FormItem label="车辆编号" prop="code"> |
| | | <Input v-model="carForm.code" /> |
| | | </FormItem> |
| | | <FormItem label="司机" prop="userId"> |
| | | <Select v-model="carForm.userId" filterable> |
| | | <Option :value="0">请选择</Option> |
| | | <Option v-for="item in userList" :value="item.id" :key="item.id">{{ item.nickname }}</Option> |
| | | </Select> |
| | | </FormItem> |
| | | <FormItem label="配送员" prop="followUserId"> |
| | | <Select v-model="carForm.followUserId" filterable> |
| | | <Option :value="0" :key="0">请选择</Option> |
| | | <Option v-for="item in driverList" :value="item.id" :key="item.id">{{ item.nickname }}</Option> |
| | | </Select> |
| | | </FormItem> |
| | | </Form> |
| | | <div slot="footer"> |
| | | <Button type="text" @click="carRole">取消</Button> |
| | |
| | | > |
| | | </div> |
| | | </Modal> |
| | | <Modal :title="modalTitle" v-model="equipmentVisible" :mask-closable="false" :width="1200"> |
| | | <Modal :title="modalTitle" v-model="equipmentVisible" :mask-closable="false" :width="1044"> |
| | | <Row class="operation" style="padding-bottom: 20px"> |
| | | <Button @click="addEquipment" type="primary" icon="md-add">添加设备</Button> |
| | | <Button @click="init" icon="md-refresh">刷新</Button> |
| | | </Row> |
| | | <Table :loading="loading" border :columns="columns2" :data="data2" ref="table" |
| | | sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"> |
| | | |
| | | |
| | | </Table> |
| | | </Modal> |
| | | <Modal :title="modalTitle" v-model="addEquipmentVisible" :mask-closable="false" :width="500"> |
| | | <Form ref="equipmentForm" :model="equipmentForm" :label-width="80" :rules="equipmentFormValidate"> |
| | | <FormItem label="设备类型" prop="type"> |
| | | <Select v-model="equipmentForm.type"> |
| | | <Option :value="0">车机</Option> |
| | | <Option :value="1">摄像机</Option> |
| | | <Option :value="2">抓拍机</Option> |
| | | <Option :value="3">pad</Option> |
| | | </Select> |
| | | </FormItem> |
| | | <FormItem label="状态" prop="status"> |
| | | <Select v-model="equipmentForm.status"> |
| | | <Option :value="0">正常</Option> |
| | | <Option :value="1">异常</Option> |
| | | </Select> |
| | | </FormItem> |
| | | <FormItem label="编号" prop="code"> |
| | | <Input v-model="equipmentForm.code" /> |
| | | </FormItem> |
| | | <FormItem label="ip地址" prop="ip"> |
| | | <Input v-model="equipmentForm.ip" /> |
| | | </FormItem> |
| | | <FormItem label="端口号" prop="port"> |
| | | <Input v-model="equipmentForm.port" /> |
| | | </FormItem> |
| | | |
| | | </Form> |
| | | <div slot="footer"> |
| | | <Button type="text" @click="carRole">取消</Button> |
| | | <Button type="primary" :loading="submitLoading" @click="submitEquipment" |
| | | >提交</Button |
| | | > |
| | | </div> |
| | | </Modal> |
| | | <!-- 菜单权限 --> |
| | | <Drawer |
| | |
| | | editCar, |
| | | deleteCar, |
| | | getEquipment, |
| | | addEquipment, |
| | | getUser, |
| | | getDriver, |
| | | deleteEquipment, |
| | | } from "@/api/open"; |
| | | import util from "@/libs/util.js"; |
| | | export default { |
| | |
| | | sortType: "desc", |
| | | modalType: 0, |
| | | roleModalVisible: false, |
| | | addEquipmentVisible: false, |
| | | equipmentVisible: false, |
| | | carModalVisible: false, |
| | | permModalVisible: false, |
| | |
| | | order: "desc", // 默认排序方式 |
| | | key: "", |
| | | }, |
| | | searchForm2: { |
| | | // 搜索框初始化对象 |
| | | pageNumber: 1, // 当前页数 |
| | | pageSize: 10, // 页面大小 |
| | | sort: "createTime", // 默认排序字段 |
| | | order: "desc", // 默认排序方式 |
| | | key: "", |
| | | }, |
| | | carForm: { |
| | | status : 0 |
| | | }, |
| | | type: { |
| | | type : 0 |
| | | }, |
| | | equipmentForm: { |
| | | status : 0 |
| | | }, |
| | | removeForm: { |
| | |
| | | { |
| | | title: "车牌号", |
| | | key: "carNo", |
| | | width: 100, |
| | | width: 110, |
| | | sortable: true, |
| | | }, |
| | | { |
| | | title: "司机", |
| | | key: "nickName", |
| | | width: 100, |
| | | }, |
| | | { |
| | | title: "配送员", |
| | | key: "followNickName", |
| | | width: 100, |
| | | }, |
| | | { |
| | | title: "品牌", |
| | |
| | | title: "排量", |
| | | key: "displacement", |
| | | width: 100, |
| | | sortable: true, |
| | | }, |
| | | { |
| | | title: "加油卡号", |
| | | key: "addOilCode", |
| | | minWidth: 120, |
| | | // sortable: true, |
| | | render: (h, params) => { |
| | | return h("div",params.row.addOilCode=="undefined" ? '':params.row.addOilCode); |
| | | } |
| | | }, |
| | | { |
| | | title: "编号", |
| | | key: "code", |
| | | minWidth: 120, |
| | | tooltip:true, |
| | | // render: (h, params) => { |
| | | // return h("div",params.row.code=="undefined" ? '':params.row.code); |
| | | // } |
| | | }, |
| | | { |
| | | title: "购置年份", |
| | | key: "buyYear", |
| | | minWidth: 120, |
| | | sortable: true, |
| | | }, |
| | | { |
| | | title: "登记日期", |
| | | key: "createTime", |
| | | minWidth: 180, |
| | | sortable: true, |
| | | }, |
| | | { |
| | |
| | | title: "操作", |
| | | key: "action", |
| | | align: "center", |
| | | fixed: "right", |
| | | width: 280, |
| | | render: (h, params) => { |
| | | return h("div", [ |
| | |
| | | { |
| | | title: "设备类型", |
| | | key: "type", |
| | | width: 100, |
| | | width: 130, |
| | | sortable: true, |
| | | render: (h, params) => { |
| | | let re = ""; |
| | | if (params.row.type == 0) { |
| | | return h("div", [ |
| | | h("Badge", { |
| | | props: { |
| | | text: "车机", |
| | | }, |
| | | }), |
| | | ]); |
| | | } else if (params.row.type == 1) { |
| | | return h("div", [ |
| | | h("Badge", { |
| | | props: { |
| | | text: "摄像机", |
| | | }, |
| | | }), |
| | | ]); |
| | | }else if (params.row.type == 2) { |
| | | return h("div", [ |
| | | h("Badge", { |
| | | props: { |
| | | text: "抓拍机", |
| | | }, |
| | | }), |
| | | ]); |
| | | }else if (params.row.type == 3) { |
| | | return h("div", [ |
| | | h("Badge", { |
| | | props: { |
| | | text: "pad", |
| | | }, |
| | | }), |
| | | ]); |
| | | } |
| | | }, |
| | | }, |
| | | { |
| | | title: "编号", |
| | | key: "code", |
| | | width: 100, |
| | | width: 120, |
| | | }, |
| | | { |
| | | title: "状态", |
| | | key: "status", |
| | | width: 100, |
| | | width: 120, |
| | | sortable: true, |
| | | render: (h, params) => { |
| | | let re = ""; |
| | |
| | | h("Badge", { |
| | | props: { |
| | | status: "error", |
| | | text: "移除", |
| | | text: "停用", |
| | | }, |
| | | }), |
| | | ]); |
| | |
| | | { |
| | | title: "ip地址", |
| | | key: "ip", |
| | | width: 100, |
| | | width: 120, |
| | | }, |
| | | { |
| | | title: "端口号", |
| | | key: "port", |
| | | width: 100, |
| | | width: 120, |
| | | sortable: true, |
| | | }, |
| | | { |
| | |
| | | { |
| | | on: { |
| | | click: () => { |
| | | this.equipment(params.row); |
| | | }, |
| | | }, |
| | | }, |
| | | "设备" |
| | | ), |
| | | h("Divider", { |
| | | props: { |
| | | type: "vertical", |
| | | }, |
| | | }), |
| | | h( |
| | | "a", |
| | | { |
| | | on: { |
| | | click: () => { |
| | | this.removeCar(params.row); |
| | | }, |
| | | }, |
| | | }, |
| | | "移除车辆" |
| | | ), |
| | | h("Divider", { |
| | | props: { |
| | | type: "vertical", |
| | | }, |
| | | }), |
| | | h( |
| | | "a", |
| | | { |
| | | on: { |
| | | click: () => { |
| | | this.edit(params.row); |
| | | this.editEquipment(params.row); |
| | | }, |
| | | }, |
| | | }, |
| | |
| | | { |
| | | on: { |
| | | click: () => { |
| | | this.remove(params.row); |
| | | this.removeEquipment(params.row); |
| | | }, |
| | | }, |
| | | }, |
| | |
| | | data: [], |
| | | data2: [], |
| | | total: 0, |
| | | total2: 0, |
| | | permData: [], |
| | | editRolePermId: "", |
| | | selectAllFlag: false, |
| | | depData: [], |
| | | dataType: 0, |
| | | carId: '', |
| | | driverList: [], |
| | | userList: [], |
| | | editDepartments: [], |
| | | buyYear:'' |
| | | }; |
| | | }, |
| | | |
| | | methods: { |
| | | change1(e){ |
| | | this.buyYear = e; |
| | |
| | | init() { |
| | | this.getDataList(); |
| | | // 获取所有菜单权限树 |
| | | this.getPermList(); |
| | | }, |
| | | renderContent(h, { root, node, data }) { |
| | | let icon = ""; |
| | |
| | | this.searchForm.pageSize = v; |
| | | this.getDataList(); |
| | | }, |
| | | getAllUser(){ |
| | | getDriver({type:0}).then((res)=>{ |
| | | if (res.success){ |
| | | this.userList=res.result; |
| | | } |
| | | }); |
| | | //this.type.type=1; |
| | | getDriver({type:1}).then((res)=>{ |
| | | if (res.success){ |
| | | this.driverList=res.result; |
| | | } |
| | | }); |
| | | this.type.type=0; |
| | | console.log(this.userList); |
| | | console.log(this.driverList); |
| | | }, |
| | | changeSort(e) { |
| | | this.searchForm.sort = e.key; |
| | | this.searchForm.order = e.order; |
| | |
| | | } |
| | | }); |
| | | }, |
| | | getEquipmentList() { |
| | | getDataList2() { |
| | | this.loading = true; |
| | | getEquipment(this.searchForm).then((res) => { |
| | | getCarList(this.searchForm2).then((res) => { |
| | | this.loading = false; |
| | | if (res.success) { |
| | | this.data = res.result.records; |
| | | this.total = res.result.total; |
| | | } |
| | | }); |
| | | }, |
| | | getEquipmentList(carId) { |
| | | this.loading = true; |
| | | this.searchForm2.carId=carId; |
| | | getEquipment(this.searchForm2).then((res) => { |
| | | this.loading = false; |
| | | if (res.success) { |
| | | this.data2 = res.result.records; |
| | | this.total = res.result.total; |
| | | } |
| | | }); |
| | | }, |
| | |
| | | this.roleModalVisible = false; |
| | | }, |
| | | submitCar() { |
| | | if(this.carForm.userId==undefined || this.carForm.userId==0){ |
| | | this.carForm.userId=""; |
| | | } |
| | | if(this.carForm.followUserId==undefined || this.carForm.followUserId==0){ |
| | | this.carForm.followUserId=""; |
| | | } |
| | | this.carForm.buyYear = this.buyYear; |
| | | this.$refs.carForm.validate((valid) => { |
| | | if (valid) { |
| | |
| | | } |
| | | }); |
| | | }, |
| | | submitEquipment() { |
| | | this.$refs.equipmentForm.validate((valid) => { |
| | | this.equipmentForm.carId = this.carId; |
| | | if (valid) { |
| | | if (this.modalType == 0) { |
| | | // 添加 |
| | | this.submitLoading = true; |
| | | addEquipment(this.equipmentForm).then((res) => { |
| | | this.submitLoading = false; |
| | | if (res.success) { |
| | | this.$Message.success("操作成功"); |
| | | this.getEquipmentList(this.carId); |
| | | this.addEquipmentVisible = false; |
| | | this.getEquipmentList(this.carId); |
| | | } |
| | | }); |
| | | } else { |
| | | this.submitLoading = true; |
| | | addEquipment(this.equipmentForm).then((res) => { |
| | | this.submitLoading = false; |
| | | if (res.success) { |
| | | this.$Message.success("操作成功"); |
| | | this.getEquipmentList(this.carId); |
| | | this.addEquipmentVisible = false; |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | |
| | | }); |
| | | }, |
| | | submitRemove(){ |
| | | this.$refs.removeForm.validate((valid) => { |
| | | if (valid) { |
| | |
| | | } |
| | | }); |
| | | }, |
| | | equipment() { |
| | | this.getEquipmentList(); |
| | | equipment(row) { |
| | | this.carId = row.id |
| | | this.getEquipmentList(row.id); |
| | | this.modalType = 0; |
| | | this.modalTitle = "设备信息"; |
| | | this.$refs.carForm.resetFields(); |
| | |
| | | this.equipmentVisible = true; |
| | | }, |
| | | addCar() { |
| | | this.carForm={}; |
| | | this.getAllUser(); |
| | | this.modalType = 0; |
| | | this.modalTitle = "添加车辆"; |
| | | this.$refs.carForm.resetFields(); |
| | | delete this.carForm.id; |
| | | this.roleModalVisible = true; |
| | | }, |
| | | addEquipment() { |
| | | this.equipmentForm={}; |
| | | this.modalType = 0; |
| | | this.modalTitle = "添加设备"; |
| | | this.$refs.carForm.resetFields(); |
| | | delete this.carForm.id; |
| | | this.addEquipmentVisible = true; |
| | | }, |
| | | edit(v) { |
| | | this.getAllUser(); |
| | | 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; |
| | | }, |
| | | editEquipment(v) { |
| | | this.modalType = 1; |
| | | this.modalTitle = "编辑设备"; |
| | | this.$refs.equipmentForm.resetFields(); |
| | | // 转换null为"" |
| | | for (let attr in v) { |
| | | if (v[attr] == null) { |
| | | v[attr] = ""; |
| | | } |
| | | } |
| | | let str = JSON.stringify(v); |
| | | let roleInfo = JSON.parse(str); |
| | | this.equipmentForm = roleInfo; |
| | | this.addEquipmentVisible = true; |
| | | }, |
| | | removeCar(v) { |
| | | this.dataType = 0; |
| | |
| | | let str = JSON.stringify(v); |
| | | let roleInfo = JSON.parse(str); |
| | | roleInfo.status=1 |
| | | console.log(roleInfo); |
| | | this.removeForm = roleInfo; |
| | | this.carModalVisible = true; |
| | | |
| | |
| | | this.clearSelectAll(); |
| | | this.$Message.success("删除成功"); |
| | | this.getDataList(); |
| | | } |
| | | }); |
| | | }, |
| | | }); |
| | | }, |
| | | removeEquipment(v) { |
| | | this.$Modal.confirm({ |
| | | title: "确认删除", |
| | | content: "您确认要删除吗 ", |
| | | loading: true, |
| | | onOk: () => { |
| | | deleteEquipment({ ids: v.id }).then((res) => { |
| | | this.$Modal.remove(); |
| | | if (res.success) { |
| | | this.clearSelectAll(); |
| | | this.$Message.success("删除成功"); |
| | | this.getEquipmentList(this.carId); |
| | | } |
| | | }); |
| | | }, |
| | |
| | | this.init(); |
| | | }, |
| | | }; |
| | | </script> |
| | | </script> |