parent
8e9e483ab3
commit
ac07f0dd31
@ -0,0 +1,484 @@
|
||||
<template>
|
||||
<div style="padding-bottom: 45px;">
|
||||
<Steps :current="step" size="small" class="steps">
|
||||
<Step title="点位选择"></Step>
|
||||
<Step title="调令创建"></Step>
|
||||
<Step title="完成"></Step>
|
||||
</Steps>
|
||||
|
||||
<Card style="margin-top: 8px;" dis-hover v-show="step === 0">
|
||||
<div class="select">
|
||||
<div class="select-item">
|
||||
<div class="select-item__title">选择范围</div>
|
||||
<el-checkbox border
|
||||
size="mini"
|
||||
:indeterminate="isIndeterminateArea"
|
||||
v-model="isSelectAllArea"
|
||||
@change="handleAreaCheckAll">全选</el-checkbox>
|
||||
<el-checkbox-group size="mini"
|
||||
:value="select.filter[2].value.split(',').map(i => Number(i))"
|
||||
@input="e => select.filter[2].value = e.filter(i=>i).toString()"
|
||||
@change="handleAreaCheck">
|
||||
<el-checkbox border v-for="item in areas" :label="item.value">{{
|
||||
item.key
|
||||
}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
|
||||
<div class="select-item">
|
||||
<div class="select-item__title">选择泵闸</div>
|
||||
<el-checkbox border
|
||||
size="mini"
|
||||
:indeterminate="isIndeterminateType"
|
||||
v-model="isSelectAllType"
|
||||
@change="handleTypeCheckAll">全选</el-checkbox>
|
||||
<el-checkbox-group size="mini"
|
||||
:value="select.filter[1].value.split(',').map(i => Number(i))"
|
||||
@input="e => select.filter[1].value = e.filter(i=>i).toString()"
|
||||
@change="handleTypeCheck">
|
||||
<el-checkbox border v-for="item in types" :label="item.value">{{
|
||||
item.key
|
||||
}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
|
||||
<div class="select-item">
|
||||
<div class="select-item__title">名称</div>
|
||||
<el-input size="mini" v-model="select.name" placeholder="请输入名称"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="picked-list">
|
||||
<Tag v-for="item in pickedEquipments"
|
||||
:key="item.id"
|
||||
type="dot"
|
||||
closable
|
||||
color="primary"
|
||||
@on-close="closeTag(item)">{{ item.name }}</Tag>
|
||||
</div>
|
||||
|
||||
<div class="equipment-list">
|
||||
<Table stripe
|
||||
:loading="loading"
|
||||
size="small"
|
||||
:data="equipments"
|
||||
:columns="table"
|
||||
@on-select="(selection, row) => equipmentSelect(selection, row, false)"
|
||||
@on-select-cancel="(selection, row) => equipmentSelect(selection, row, false)"
|
||||
@on-select-all="(selection) => equipmentSelect(selection, {}, true)"
|
||||
@on-select-all-cancel="(selection) => equipmentSelect(selection, {}, true)"></Table>
|
||||
|
||||
<div class="page">
|
||||
<Page :total="total"
|
||||
:page-size="select.page_size"
|
||||
@on-change="e => {
|
||||
select.page = e;
|
||||
getEquipments()
|
||||
}"/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card style="margin-top: 8px;" dis-hover v-show="step === 1">
|
||||
<div class="select">
|
||||
<div class="select-item">
|
||||
<div class="select-item__title">日期选择</div>
|
||||
<el-input size="small"
|
||||
:value="date"
|
||||
readonly
|
||||
@focus="isShowDatePicker = true"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form v-for="(item, index) in form"
|
||||
size="mini"
|
||||
:model="item"
|
||||
label-position="top"
|
||||
:key="index">
|
||||
<Divider />
|
||||
<div>
|
||||
<p>{{ item._name }}</p>
|
||||
</div>
|
||||
<el-form-item label="闸门数量">
|
||||
<el-input-number v-model="item.kaiqishuliang" :precision="0" :max="Number(item._bengzhashuliang)" :min="0"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="水泵数量">
|
||||
<el-input-number v-model="item.kaiqishuliang1" :precision="0" :max="Number(item._shuibengtaishu)" :min="0"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="调令类型">
|
||||
<el-radio-group v-model="item.diaolingleixing">
|
||||
<el-radio :label="i.value" v-for="i in diaolingleixing">{{ i.key }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="开启时间">
|
||||
<el-time-select v-model="item.start_time" :picker-options="{ start: '00:00', step: '00:05', end: '23:59' }"></el-time-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="持续时间">
|
||||
<el-input-number :precision="1" :min="0" :step="0.5"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间">
|
||||
<el-time-select v-model="item.end_time" :picker-options="{ start: '00:00', step: '00:05', end: '23:59', minTime: item.start_time }"></el-time-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="调令内容">
|
||||
<el-input v-model="item.content" type="textarea" :autosize="{ minRows: 2 }"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="调令等级">
|
||||
<el-radio-group v-model="item.level">
|
||||
<el-radio :label="i.value" v-for="i in [{ label: '一般', value: 1 },{ label: '紧急', value: 2 }]">{{ i.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</Card>
|
||||
|
||||
<div class="btns">
|
||||
<Button v-show="step === 1" ghost size="default" type="primary" @click="forwardStep">上一步</Button>
|
||||
<Button size="default" type="primary" @click="nextStep">下一步</Button>
|
||||
</div>
|
||||
|
||||
<transition name="fade">
|
||||
<div v-show="isShowDatePicker" class="datepicker">
|
||||
<div class="mask" @click="isShowDatePicker = false"></div>
|
||||
<DatePicker ref="datepicker"
|
||||
class="datepicker-cpn"
|
||||
is-expanded
|
||||
:model-config="config"
|
||||
:rows="2"
|
||||
v-model="date"></DatePicker>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Calendar from "v-calendar/src/components/Calendar.vue";
|
||||
import DatePicker from "v-calendar/src/components/DatePicker.vue";
|
||||
import { show } from "@/api/system/customFormField";
|
||||
import { index } from "@/api/system/baseForm";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DatePicker,
|
||||
Calendar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config: {
|
||||
type: 'string',
|
||||
mask: 'YYYY-MM-DD'
|
||||
},
|
||||
isShowDatePicker: false,
|
||||
step: 0,
|
||||
|
||||
isIndeterminateArea: false,
|
||||
areas: [],
|
||||
isSelectAllArea: false,
|
||||
isIndeterminateType: false,
|
||||
types: [],
|
||||
isSelectAllType: false,
|
||||
select: {
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
table_name: 'equipments',
|
||||
filter: [
|
||||
{
|
||||
key: "name",
|
||||
op: "like",
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
key: "type",
|
||||
op: "in",
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
key: "area",
|
||||
op: "in",
|
||||
value: ""
|
||||
}
|
||||
]
|
||||
},
|
||||
diaolingleixing: [],
|
||||
|
||||
loading: false,
|
||||
total: 0,
|
||||
equipments: [],
|
||||
table: [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 54,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
key: "name",
|
||||
title: "名称"
|
||||
},
|
||||
{
|
||||
key: "area",
|
||||
title: "区域",
|
||||
render: (h,{ row }) => h('span', this.areas.find(i => i.value === row.area)?.key)
|
||||
},
|
||||
],
|
||||
|
||||
pickedEquipments: [],
|
||||
form: [],
|
||||
date: "",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleAreaCheckAll (e) {
|
||||
this.select.filter[2].value = e ? this.areas.map(i => i.value).toString() : "";
|
||||
this.isIndeterminateArea = false;
|
||||
|
||||
this.select.page = 1;
|
||||
this.getEquipments();
|
||||
},
|
||||
handleAreaCheck (e) {
|
||||
let count = e.length;
|
||||
this.isSelectAllArea = count === this.areas.length;
|
||||
this.isIndeterminateArea = count > 0 && count < this.areas.length;
|
||||
|
||||
this.select.page = 1;
|
||||
this.getEquipments();
|
||||
},
|
||||
handleTypeCheckAll (e) {
|
||||
this.select.filter[1].value = e ? this.types.map(i => i.value).toString() : "";
|
||||
this.isIndeterminateType = false;
|
||||
|
||||
this.select.page = 1;
|
||||
this.getEquipments();
|
||||
},
|
||||
handleTypeCheck (e) {
|
||||
let count = e.length;
|
||||
this.isSelectAllType = count === this.types.length;
|
||||
this.isIndeterminateType = count > 0 && count < this.types.length;
|
||||
|
||||
this.select.page = 1;
|
||||
this.getEquipments();
|
||||
},
|
||||
|
||||
closeTag (row) {
|
||||
let findIndex = this.pickedEquipments.findIndex(i => i.id === row.id)
|
||||
this.pickedEquipments.splice(findIndex, 1)
|
||||
},
|
||||
equipmentSelect (selection, row, isAll) {
|
||||
if (!isAll) {
|
||||
let findIndex = this.pickedEquipments.findIndex(i => i.id === row.id)
|
||||
if (findIndex === -1) {
|
||||
this.pickedEquipments.push(row)
|
||||
} else {
|
||||
this.pickedEquipments.splice(findIndex, 1)
|
||||
}
|
||||
} else {
|
||||
if (selection.length === this.equipments.length) {
|
||||
selection.forEach(myrow => {
|
||||
let findIndex = this.pickedEquipments.findIndex(i => i.id === myrow.id)
|
||||
if (findIndex === -1) {
|
||||
this.pickedEquipments.push(myrow)
|
||||
} else {
|
||||
this.pickedEquipments.splice(findIndex, 1)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.equipments.forEach(myrow => {
|
||||
let findIndex = this.pickedEquipments.findIndex(i => i.id === myrow.id)
|
||||
this.pickedEquipments.splice(findIndex, 1)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async getArea() {
|
||||
const obj = (await show({ id: 4 }, false))?.select_item;
|
||||
if (obj && typeof obj === "object") {
|
||||
let keys = Object.keys(obj);
|
||||
if (keys.length > 0) {
|
||||
this.areas = keys.map((key) => {
|
||||
return {
|
||||
key,
|
||||
value: /^\d*$/.test(obj[key]) ? Number(obj[key]) : obj[key],
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
async getType() {
|
||||
const obj = (await show({ id: 1 }, false))?.select_item;
|
||||
if (obj && typeof obj === "object") {
|
||||
let keys = Object.keys(obj);
|
||||
if (keys.length > 0) {
|
||||
this.types = keys.map((key) => {
|
||||
return {
|
||||
key,
|
||||
value: /^\d*$/.test(obj[key]) ? Number(obj[key]) : obj[key],
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
async getDiaolingleixing() {
|
||||
const obj = {
|
||||
"逻辑调令": "4",
|
||||
"防汛调令": "2",
|
||||
"水环境调令": "1",
|
||||
"船只过闸调令": "3"
|
||||
};
|
||||
if (obj && typeof obj === "object") {
|
||||
let keys = Object.keys(obj);
|
||||
if (keys.length > 0) {
|
||||
this.diaolingleixing = keys.map((key) => {
|
||||
return {
|
||||
key,
|
||||
value: /^\d*$/.test(obj[key]) ? Number(obj[key]) : obj[key],
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
async getEquipments () {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await index(this.select,false)
|
||||
this.total = res.total;
|
||||
this.equipments = res.data.map(i => ({
|
||||
...i,
|
||||
_checked: !!this.pickedEquipments.find(j => j.id === i.id)
|
||||
}));
|
||||
this.loading = false;
|
||||
} catch (err) {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
forwardStep () {
|
||||
if (this.step === 1) {
|
||||
this.step--;
|
||||
}
|
||||
},
|
||||
nextStep () {
|
||||
if (this.step === 0) {
|
||||
if (this.pickedEquipments.length <= 0) {
|
||||
alert("请先选择泵闸")
|
||||
return
|
||||
}
|
||||
this.form = this.pickedEquipments.map(i => ({
|
||||
equipment_id: i.id,
|
||||
start_time: "",
|
||||
end_time: "",
|
||||
content: "",
|
||||
level: 1,
|
||||
kaiqishuliang: 0,
|
||||
_bengzhashuliang: i.bengzhashuliang,
|
||||
kaiqishuliang1: 0,
|
||||
_shuibengtaishu: i.shuibengtaishu,
|
||||
_name: i.name,
|
||||
leibie: "",
|
||||
}))
|
||||
this.step++;
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
pickedEquipments (newVal) {
|
||||
this.equipments = this.equipments.map(i => ({
|
||||
...i,
|
||||
_checked: !!this.pickedEquipments.find(j => j.id === i.id)
|
||||
}));
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getArea();
|
||||
this.getType();
|
||||
this.getEquipments();
|
||||
this.getDiaolingleixing();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.steps {
|
||||
border: 1px solid #dcdee2;
|
||||
margin-top: 8px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 10px 0 6px 10px;
|
||||
}
|
||||
|
||||
.select {
|
||||
&-item {
|
||||
&__title {
|
||||
font-weight: 600;
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.equipment-list {
|
||||
margin-top: 10px;
|
||||
.page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
z-index: 10;
|
||||
padding: 6px 10px;
|
||||
filter: drop-shadow(0 -2px 4px #0001);
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
.datepicker {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
z-index: 99999997;
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
z-index: 99999998;
|
||||
background: #0002;
|
||||
}
|
||||
&-cpn {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999999999;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
::v-deep .el-checkbox {
|
||||
margin-right: 0;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
::v-deep .el-checkbox.is-bordered.el-checkbox--mini {
|
||||
padding: 3px 8px 3px 8px;
|
||||
}
|
||||
::v-deep .el-checkbox.is-bordered.el-checkbox--mini .el-checkbox__label {
|
||||
padding-left: 6px;
|
||||
}
|
||||
::v-deep .ivu-table-small td {
|
||||
height: 36px;
|
||||
}
|
||||
::v-deep .el-form-item--mini .el-form-item__label {
|
||||
line-height: 1.5;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
::v-deep .el-form-item--mini.el-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue