4 changed files with 558 additions and 1 deletions
@ -0,0 +1,260 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="modelVisible" :title="data ? '修改' : '新增'" width="550px"> |
||||
|
<div class="AddNEditDialog"> |
||||
|
<Form |
||||
|
v-model="formData" |
||||
|
class="form" |
||||
|
ref="FormConfigRef" |
||||
|
:formList="formList" |
||||
|
column="1" |
||||
|
labelWidth="90px" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<template #footer> |
||||
|
<Button |
||||
|
style="background-color: rgba(0, 179, 204, 0.3)" |
||||
|
@click.native="(modelVisible = false), (submitting = false)" |
||||
|
> |
||||
|
取消 |
||||
|
</Button> |
||||
|
<Button @click.native="handleSubmit" :loading="submitting"> 确定 </Button> |
||||
|
</template> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index.vue"; |
||||
|
import Button from "@screen/components/Buttons/Button.vue"; |
||||
|
import Form from "@screen/components/FormConfig"; |
||||
|
|
||||
|
import * as PresetFormItems from "@screen/common/PresetFormItems.js"; |
||||
|
import request from "@/utils/request"; |
||||
|
import { CameraDirectionEnumList } from "@screen/utils/enum.js"; |
||||
|
import { Message } from "element-ui"; |
||||
|
import { cloneDeep, merge } from "lodash"; |
||||
|
import { getSelectOptionsStation } from "@screen/pages/control/event/businessDataManagement/utils.js"; |
||||
|
|
||||
|
export default { |
||||
|
name: "AddNEditDialog", |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Button, |
||||
|
Form, |
||||
|
}, |
||||
|
model: { |
||||
|
prop: "visible", |
||||
|
event: "update:value", |
||||
|
}, |
||||
|
props: { |
||||
|
visible: Boolean, |
||||
|
data: Object, |
||||
|
vehicleTypeList:Array |
||||
|
}, |
||||
|
inject: ["setCurrentPage"], |
||||
|
data() { |
||||
|
return { |
||||
|
submitting: false, |
||||
|
formData: {}, |
||||
|
formList: [ |
||||
|
{ |
||||
|
label: "所属机构:", |
||||
|
key: "organizationId", |
||||
|
type: "select", |
||||
|
options: { |
||||
|
clearable: false, |
||||
|
options: [], |
||||
|
}, |
||||
|
}, |
||||
|
// { |
||||
|
// label: "机构类型2233:", |
||||
|
// key: "organizationType", |
||||
|
// required: true, |
||||
|
// type: 'select', |
||||
|
// ons: { |
||||
|
// change: (value, { data }) => { |
||||
|
// if (value == 1) { |
||||
|
// data.parentId = null; |
||||
|
// } |
||||
|
|
||||
|
// this.formList[0].options.options.forEach((item, index) => { |
||||
|
// item.disabled = value == 1 |
||||
|
// }) |
||||
|
// } |
||||
|
// }, |
||||
|
// options: { |
||||
|
// options: [ |
||||
|
// { |
||||
|
// key: 1, |
||||
|
// label: "路管中心" |
||||
|
// }, |
||||
|
// { |
||||
|
// key: 2, |
||||
|
// label: "驻点" |
||||
|
// }, |
||||
|
// ] |
||||
|
// } |
||||
|
// }, |
||||
|
{ |
||||
|
label: "车牌号:", |
||||
|
key: "vehiclePlate", |
||||
|
required: true, |
||||
|
}, |
||||
|
{ |
||||
|
label: "车辆类型:", |
||||
|
key: "vehicleType", |
||||
|
required: true, |
||||
|
type: "select", |
||||
|
options: { |
||||
|
options: this.vehicleTypeList.map((item) => ({ |
||||
|
key: item.dictValue, |
||||
|
label: item.dictLabel, |
||||
|
})), |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "车辆状态:", |
||||
|
key: "vehicleStatus", |
||||
|
type: "select", |
||||
|
options: { |
||||
|
options: [ |
||||
|
{ |
||||
|
key: 1, |
||||
|
label: "可用", |
||||
|
}, |
||||
|
{ |
||||
|
key: 2, |
||||
|
label: "使用中", |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
label: "备注:", |
||||
|
key: "remark", |
||||
|
isAlone: true, |
||||
|
options: { |
||||
|
type: "textarea", |
||||
|
autosize: true, |
||||
|
maxlength: 150, |
||||
|
autosize: { minRows: 6, maxRows: 6 }, |
||||
|
showWordLimit: true, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
modelVisible: { |
||||
|
get() { |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(val) { |
||||
|
this.$emit("update:value", val); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
watch: { |
||||
|
modelVisible: { |
||||
|
immediate: true, |
||||
|
handler(bool) { |
||||
|
if (!bool) return; |
||||
|
|
||||
|
console.log("vehicleTypeList:",this.vehicleTypeList); |
||||
|
|
||||
|
let abc = this.vehicleTypeList.map((item) => ({ |
||||
|
key: item.dictValue, |
||||
|
label: item.dictLabel, |
||||
|
})) |
||||
|
console.log("-----1:",abc); |
||||
|
|
||||
|
this.formData = !this.data ? null : { |
||||
|
organizationId: this.data.organizationId, |
||||
|
vehiclePlate: this.data.vehiclePlate, |
||||
|
vehicleType: this.data.vehicleType, |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
async getOptions() { |
||||
|
|
||||
|
|
||||
|
// this.vehicleTypeList.map((item) => ({ |
||||
|
// key: item.dictValue, |
||||
|
// label: item.dictLabel, |
||||
|
// })) |
||||
|
// console.log("-----1:",this.vehicleTypeList); |
||||
|
|
||||
|
console.log("this.vehicleTypeList:",this.vehicleTypeList); |
||||
|
|
||||
|
const result = await getSelectOptionsStation(1); |
||||
|
|
||||
|
this.formList[0].options.options = result; |
||||
|
this.formList[0].default = result[0].key; |
||||
|
// this.formList[0].options.options.push({ |
||||
|
// disabled: false, |
||||
|
// key: 0, |
||||
|
// label: "无", |
||||
|
// }); |
||||
|
// console.log(this.formList[0].options.options); |
||||
|
}, |
||||
|
handleSubmit() { |
||||
|
this.$refs.FormConfigRef.validate().then((data) => { |
||||
|
this.submitting = true; |
||||
|
|
||||
|
if (this.data) data.id = this.data.dcOrganizations.id; |
||||
|
|
||||
|
if (typeof data.parentId != "number") data.parentId = 0; |
||||
|
if (data.stakeMark[0]) { |
||||
|
data.stakeMark = `K${data.stakeMark[0]}+${data.stakeMark[1]}`; |
||||
|
} else { |
||||
|
data.stakeMark = ""; |
||||
|
} |
||||
|
|
||||
|
request({ |
||||
|
url: `/business/organization`, |
||||
|
method: this.data ? "PUT" : "POST", |
||||
|
data, |
||||
|
}) |
||||
|
.then((result) => { |
||||
|
if (result.code != 200) return Message.error(`提交失败!`); |
||||
|
|
||||
|
Message.success(`提交成功!`); |
||||
|
|
||||
|
this.modelVisible = false; |
||||
|
|
||||
|
this.setCurrentPage(1); |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
console.log( |
||||
|
"%c [ err ]-110-「DeviceControlDialog.vue」", |
||||
|
"font-size:15px; background:#547bf2; color:#98bfff;", |
||||
|
err |
||||
|
); |
||||
|
Message.error(`提交失败!`); |
||||
|
}) |
||||
|
.finally(() => { |
||||
|
this.submitting = false; |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getOptions(); |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.AddNEditDialog { |
||||
|
width: 450px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 15px; |
||||
|
|
||||
|
.tips { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,27 @@ |
|||||
|
// import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
|
||||
|
|
||||
|
export const searchFormList = [ |
||||
|
{ |
||||
|
label: "机构类型:", |
||||
|
key: "organizationType", |
||||
|
type: "select", |
||||
|
options: { |
||||
|
clearable: true, |
||||
|
options: [ |
||||
|
{ |
||||
|
key: 1, |
||||
|
label: "运营中心", |
||||
|
}, |
||||
|
{ |
||||
|
key: 2, |
||||
|
label: "驻点", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "机构名称:", |
||||
|
key: "organizationName", |
||||
|
type: "input", |
||||
|
}, |
||||
|
]; |
||||
@ -0,0 +1,264 @@ |
|||||
|
<template> |
||||
|
<div class="Vehicles"> |
||||
|
<div class="filter"> |
||||
|
<div> |
||||
|
<ButtonGradient @click.native="handleOpenDialogAddEdit()"> |
||||
|
<template #prefix> |
||||
|
<img src="@screen/images/insert.svg" /> |
||||
|
</template> |
||||
|
新增 |
||||
|
</ButtonGradient> |
||||
|
<ButtonGradient @click.native="handleExport"> |
||||
|
<template #prefix> |
||||
|
<img src="@screen/images/export.svg" /> |
||||
|
</template> |
||||
|
导出 |
||||
|
</ButtonGradient> |
||||
|
<ButtonGradient @click.native="onRefreshForm"> |
||||
|
<template #prefix> |
||||
|
<img src="@screen/images/refresh.svg" /> |
||||
|
</template> |
||||
|
刷新 |
||||
|
</ButtonGradient> |
||||
|
</div> |
||||
|
|
||||
|
<InputSearch |
||||
|
ref="searchComp" |
||||
|
style="width: 402px" |
||||
|
:formList="searchFormList" |
||||
|
:formConfigOptions="{ labelWidth: '90px' }" |
||||
|
@handleSearch="handleSearch" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div class="body"> |
||||
|
<!-- <ElEmpty v-if="!data.length && !isFirst" description="暂无数据" style="width: 100%;height: 100%;position: absolute;" /> --> |
||||
|
<div |
||||
|
v-if="!dataList.length && !isFirst" |
||||
|
class="no-data" |
||||
|
style="position: absolute" |
||||
|
> |
||||
|
暂无数据 |
||||
|
</div> |
||||
|
|
||||
|
<template v-else> |
||||
|
<Card |
||||
|
v-for="(item, index) in dataList" |
||||
|
:keyMap="keyMap" |
||||
|
:cardData="item" |
||||
|
:key="index" |
||||
|
> |
||||
|
<template #button> |
||||
|
<Button @click.native="() => handleOpenDialogAddEdit(item)"> |
||||
|
修改 |
||||
|
</Button> |
||||
|
<Button |
||||
|
style="background-color: #ff5f5f" |
||||
|
@click.native="handleDelete(item)" |
||||
|
> |
||||
|
删除 |
||||
|
</Button> |
||||
|
</template> |
||||
|
</Card> |
||||
|
</template> |
||||
|
</div> |
||||
|
|
||||
|
<AddNEditDialog v-model="addNEditDialogVisible" :data="dialogData" :vehicleTypeList="vehicleTypeList" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Card from "@screen/components/Card1/index.vue"; |
||||
|
import InputSearch from "@screen/components/InputSearch/index.vue"; |
||||
|
import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue"; |
||||
|
import Button from "@screen/components/Buttons/Button.vue"; |
||||
|
import AddNEditDialog from "./components/AddNEditDialog.vue"; |
||||
|
|
||||
|
import { searchFormList } from "./data"; |
||||
|
import request from "@/utils/request"; |
||||
|
import { setLoading } from "@screen/utils/index.js"; |
||||
|
import { delay, exportFile, confirm } from "@screen/utils/common"; |
||||
|
import { Message } from "element-ui"; |
||||
|
|
||||
|
// let vehicleTypeList = []; |
||||
|
|
||||
|
// 应急车辆 |
||||
|
export default { |
||||
|
name: "Vehicles", |
||||
|
inject: ["getPagination", "setTotal", "setCurrentPage"], |
||||
|
components: { |
||||
|
Card, |
||||
|
ButtonGradient, |
||||
|
InputSearch, |
||||
|
Button, |
||||
|
AddNEditDialog, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
searchFormList, |
||||
|
addNEditDialogVisible: false, |
||||
|
dialogData: null, |
||||
|
dataList: [], |
||||
|
keyMap: [ |
||||
|
{ |
||||
|
key: "organizationName", |
||||
|
label: "机构名称", |
||||
|
}, |
||||
|
{ |
||||
|
key: "vehiclePlate", |
||||
|
label: "车牌号", |
||||
|
}, |
||||
|
{ |
||||
|
key: "vehicleType", |
||||
|
label: "车辆类型", |
||||
|
value: (item) => { |
||||
|
return this.vehicleTypeList.find((dicts) => dicts.dictValue == item.vehicleStatus).dictLabel; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
key: "vehicleStatus", |
||||
|
label: "车辆状态", |
||||
|
value: (item) => { |
||||
|
return item.vehicleStatus == 1 ? "可用" : "使用中"; |
||||
|
}, |
||||
|
} |
||||
|
], |
||||
|
isFirst: true, |
||||
|
vehicleTypeList: [], |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.getData(); |
||||
|
this.getVehicleTypeList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
onRefreshForm(){ |
||||
|
this.$refs.searchComp.handleResetForm(); |
||||
|
this.setCurrentPage(1); |
||||
|
}, |
||||
|
getVehicleTypeList() { |
||||
|
if (this.vehicleTypeList.length) return; |
||||
|
|
||||
|
request({ |
||||
|
url: `/system/dict/data/type/vehicle_type`, |
||||
|
method: "GET", |
||||
|
params: {}, |
||||
|
}) |
||||
|
.then(({ data, code }) => { |
||||
|
if (code != 200) return; //Message.error("详情获取失败"); |
||||
|
this.vehicleTypeList = data; |
||||
|
}) |
||||
|
.catch((err) => {}); |
||||
|
}, |
||||
|
async handleDelete(data) { |
||||
|
await confirm({ message: "是否要删除该车辆?" }); |
||||
|
|
||||
|
request({ |
||||
|
url: `/business/vehicles/${data.dcvehicless.id}`, |
||||
|
method: "DELETE", |
||||
|
data: {}, |
||||
|
}) |
||||
|
.then((result) => { |
||||
|
if (result.code != 200) return Message.error(`删除失败!`); |
||||
|
this.setCurrentPage(1); |
||||
|
Message.success(`删除成功!`); |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
Message.error(`删除失败!`); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
handleOpenDialogAddEdit(data) { |
||||
|
this.addNEditDialogVisible = true; |
||||
|
this.dialogData = data; |
||||
|
console.log("Dialog", data); |
||||
|
}, |
||||
|
|
||||
|
handleSearch(data) { |
||||
|
this.searchData = data; |
||||
|
this.getData(); |
||||
|
}, |
||||
|
handleExport() { |
||||
|
exportFile({ |
||||
|
url: "/business/vehicles/export", |
||||
|
filename: "车辆列表", |
||||
|
data: { |
||||
|
...this.searchData, |
||||
|
...this.getPagination(), |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
async getData() { |
||||
|
const closeLoading = setLoading(); |
||||
|
|
||||
|
await delay(150); |
||||
|
|
||||
|
request({ |
||||
|
url: `/business/vehicles/list`, |
||||
|
method: "get", |
||||
|
params: { |
||||
|
...this.searchData, |
||||
|
...this.getPagination(), |
||||
|
}, |
||||
|
}) |
||||
|
.then((result) => { |
||||
|
if (result.code != 200) return; |
||||
|
|
||||
|
this.dataList = result.rows; |
||||
|
// let data = []; |
||||
|
// this.vehicleTypeList.forEach((items) => { |
||||
|
// this.dataList.forEach((item) => { |
||||
|
// if (item.car.length > 0) { |
||||
|
// for (var i = 0; i < item.car.length; i++) { |
||||
|
// if (item.car[i].vehicleType == items.dictValue) { |
||||
|
// data.push(items.dictLabel + "*" + item.car[i].carNum); |
||||
|
// // item.cars = items.dictLabel + "*" + item.car[i].carNum; |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
// }); |
||||
|
// }); |
||||
|
|
||||
|
// this.dataList.forEach((item) => { |
||||
|
// if (item.car.length > 0) { |
||||
|
// item.cars = data.join("、"); |
||||
|
// } |
||||
|
// }); |
||||
|
this.setTotal(result.total); |
||||
|
}) |
||||
|
.finally(() => { |
||||
|
closeLoading(); |
||||
|
this.isFirst = false; |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.Vehicles { |
||||
|
.body { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(5, 1fr); |
||||
|
grid-gap: 21px; |
||||
|
// grid-row-gap: 9px; |
||||
|
// grid-column-gap: 9px; |
||||
|
grid-auto-rows: min-content; |
||||
|
|
||||
|
.endSpecial { |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: #00b3cc; |
||||
|
line-height: 16px; |
||||
|
|
||||
|
span:first-child { |
||||
|
color: rgba(0, 179, 204, 1) #000; |
||||
|
} |
||||
|
|
||||
|
span:last-child { |
||||
|
color: rgba(217, 0, 27, 1); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue