|
|
<template>
|
|
|
<div>
|
|
|
<div class="select">
|
|
|
<div class="select-item">
|
|
|
<div class="select-item__title">片区</div>
|
|
|
<el-checkbox-group size="small" v-model="select.area">
|
|
|
<el-checkbox-button v-for="item in areas" :label="item.value">{{
|
|
|
item.key
|
|
|
}}</el-checkbox-button>
|
|
|
</el-checkbox-group>
|
|
|
</div>
|
|
|
|
|
|
<div class="select-item">
|
|
|
<div class="select-item__title">功能</div>
|
|
|
<el-checkbox-group size="small" v-model="select.type">
|
|
|
<el-checkbox-button v-for="item in types" :label="item.value">{{
|
|
|
item.key
|
|
|
}}</el-checkbox-button>
|
|
|
</el-checkbox-group>
|
|
|
</div>
|
|
|
|
|
|
<div class="select-item">
|
|
|
<Button type="primary" style="margin-left: 10px" @click="clear"
|
|
|
>清空筛选</Button
|
|
|
>
|
|
|
</div>
|
|
|
|
|
|
<div class="date">
|
|
|
<p>
|
|
|
您正在为
|
|
|
<span style="color: red">{{ date }}</span>
|
|
|
创建
|
|
|
<span> {{ "排水" }} </span>
|
|
|
调令
|
|
|
</p>
|
|
|
<DatePicker
|
|
|
:value="date"
|
|
|
type="date"
|
|
|
format="yyyy-MM-dd"
|
|
|
:options="options"
|
|
|
placeholder="日期选择"
|
|
|
style="width: 160px; margin-left: 14px"
|
|
|
@on-change="(e) => (date = e)"
|
|
|
></DatePicker>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<Table
|
|
|
:columns="columns"
|
|
|
:data="mergeData"
|
|
|
stripe
|
|
|
:span-method="objectSpanMethod"
|
|
|
></Table>
|
|
|
|
|
|
<div class="btns">
|
|
|
<Button type="primary" @click="submit">创建调令</Button>
|
|
|
<Button type="primary" ghost @click="reset">重置列表</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { index, save } from "@/api/system/baseForm";
|
|
|
import { deepCopy } from "@/utils";
|
|
|
import { mergeTableRow } from "@/utils/mergeTableRow";
|
|
|
import { show } from "@/api/system/customFormField";
|
|
|
export default {
|
|
|
inject: ["equipments"],
|
|
|
props: {},
|
|
|
data() {
|
|
|
const _this = this;
|
|
|
return {
|
|
|
options: {
|
|
|
shortcuts: [
|
|
|
{
|
|
|
text: "今天",
|
|
|
onClick() {
|
|
|
_this.date = _this.$moment().format("YYYY-MM-DD");
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
text: "明天",
|
|
|
onClick() {
|
|
|
_this.date = _this.$moment().add(1, "days").format("YYYY-MM-DD");
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
text: "一周后",
|
|
|
onClick() {
|
|
|
_this.date = _this.$moment().add(1, "weeks").format("YYYY-MM-DD");
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
text: "一个月后",
|
|
|
onClick() {
|
|
|
_this.date = _this
|
|
|
.$moment()
|
|
|
.add(1, "months")
|
|
|
.format("YYYY-MM-DD");
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
areas: [],
|
|
|
types: [],
|
|
|
select: {
|
|
|
area: [],
|
|
|
type: [],
|
|
|
},
|
|
|
weather: [],
|
|
|
copyOriginalData: [],
|
|
|
date: this.$moment().format("YYYY-MM-DD"),
|
|
|
data:
|
|
|
this.equipmentList?.map((i) => ({
|
|
|
equipment_id: i.id,
|
|
|
start_time: "",
|
|
|
end_time: "",
|
|
|
content: "",
|
|
|
level: 1,
|
|
|
})) || [],
|
|
|
columns: [
|
|
|
// {
|
|
|
// width: 50,
|
|
|
// title: ' ',
|
|
|
// type: 'index',
|
|
|
// key: 'index'
|
|
|
// },
|
|
|
{
|
|
|
title: "点位",
|
|
|
width: 240,
|
|
|
key: "equipment_id",
|
|
|
align: "center",
|
|
|
render: (h, { row, index }) => {
|
|
|
let equipment = this.equipmentList.find(
|
|
|
(i) => i.id === row.equipment_id
|
|
|
);
|
|
|
let text = equipment ? equipment.name : "";
|
|
|
return h("div", [
|
|
|
h('span',text),
|
|
|
h('Button',{
|
|
|
props: {
|
|
|
size: 'small',
|
|
|
type: 'primary',
|
|
|
icon: 'ios-add'
|
|
|
},
|
|
|
style: {
|
|
|
'margin-left': '6px'
|
|
|
},
|
|
|
on: {
|
|
|
['click']:e => {
|
|
|
this.data.splice(index,0,deepCopy(row))
|
|
|
}
|
|
|
}
|
|
|
},'新增')
|
|
|
]);
|
|
|
},
|
|
|
// render: (h,{ row, index }) => {
|
|
|
// return h('div',{
|
|
|
// style: {
|
|
|
// display: 'flex',
|
|
|
// 'justify-content': 'space-between'
|
|
|
// }
|
|
|
// },[
|
|
|
// h('Select',{
|
|
|
// style: {
|
|
|
// width: '140px'
|
|
|
// },
|
|
|
// props: {
|
|
|
// value: row.equipment_id,
|
|
|
// filterable: true,
|
|
|
// size: 'small',
|
|
|
// transfer: true,
|
|
|
// disabled: true
|
|
|
// },
|
|
|
// on: {
|
|
|
// ['on-select']:e => {
|
|
|
// row.equipment_id = e.value;
|
|
|
// }
|
|
|
// }
|
|
|
// },this.equipments().map(i => {
|
|
|
// return h('Option',{
|
|
|
// props: {
|
|
|
// value: i.id,
|
|
|
// }
|
|
|
// },i.name)
|
|
|
// })),
|
|
|
// h('Button',{
|
|
|
// props: {
|
|
|
// size: 'small',
|
|
|
// type: 'primary'
|
|
|
// },
|
|
|
// on: {
|
|
|
// ['click']:e => {
|
|
|
// this.data.splice(index,0,deepCopy(row))
|
|
|
// }
|
|
|
// }
|
|
|
// },'新增')
|
|
|
// ])
|
|
|
// }
|
|
|
},
|
|
|
{
|
|
|
title: "开启时间",
|
|
|
width: 140,
|
|
|
align: "center",
|
|
|
key: "start_time",
|
|
|
render: (h, { row, index }) => {
|
|
|
return h("TimePicker", {
|
|
|
props: {
|
|
|
value: row.start_time,
|
|
|
type: "time",
|
|
|
size: "small",
|
|
|
transfer: true,
|
|
|
},
|
|
|
on: {
|
|
|
["on-change"]: (e) => (this.data[index].start_time = e),
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
title: "结束时间",
|
|
|
width: 140,
|
|
|
align: "center",
|
|
|
key: "end_time",
|
|
|
render: (h, { row, index }) => {
|
|
|
return h("TimePicker", {
|
|
|
props: {
|
|
|
value: row.end_time,
|
|
|
type: "time",
|
|
|
size: "small",
|
|
|
transfer: true,
|
|
|
},
|
|
|
on: {
|
|
|
["on-change"]: (e) => (this.data[index].end_time = e),
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
title: "调令内容",
|
|
|
minWidth: 200,
|
|
|
key: "content",
|
|
|
align: "center",
|
|
|
render: (h, { row, index }) => {
|
|
|
return h("Input", {
|
|
|
style: {
|
|
|
padding: "6px 0",
|
|
|
},
|
|
|
props: {
|
|
|
size: "small",
|
|
|
value: row.content,
|
|
|
type: "textarea",
|
|
|
},
|
|
|
on: {
|
|
|
["input"]: (e) => (this.data[index].content = e),
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
title: "调令等级",
|
|
|
width: 140,
|
|
|
key: "level",
|
|
|
align: "center",
|
|
|
render: (h, { row }) => {
|
|
|
return h(
|
|
|
"Select",
|
|
|
{
|
|
|
props: {
|
|
|
value: row.level,
|
|
|
filterable: true,
|
|
|
size: "small",
|
|
|
transfer: true,
|
|
|
},
|
|
|
on: {
|
|
|
["on-select"]: (e) => {
|
|
|
row.level = e.value;
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
[
|
|
|
{ label: "一般", value: 1 },
|
|
|
{ label: "紧急", value: 2 },
|
|
|
].map((i) => {
|
|
|
return h(
|
|
|
"Option",
|
|
|
{
|
|
|
props: {
|
|
|
value: i.value,
|
|
|
},
|
|
|
},
|
|
|
i.label
|
|
|
);
|
|
|
})
|
|
|
);
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
title: "操作",
|
|
|
width: 140,
|
|
|
key: "operate",
|
|
|
render: (h, { row, index }) => {
|
|
|
return h(
|
|
|
"Poptip",
|
|
|
{
|
|
|
props: {
|
|
|
title: "确认要删除吗？",
|
|
|
confirm: true,
|
|
|
transfer: true,
|
|
|
},
|
|
|
on: {
|
|
|
["on-ok"]: (e) => {
|
|
|
this.data.splice(index, 1);
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
[
|
|
|
h(
|
|
|
"Button",
|
|
|
{
|
|
|
props: {
|
|
|
type: "primary",
|
|
|
size: "small",
|
|
|
},
|
|
|
},
|
|
|
"删除"
|
|
|
),
|
|
|
]
|
|
|
);
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
clear () {
|
|
|
this.select = {
|
|
|
area: [],
|
|
|
type: [],
|
|
|
};
|
|
|
},
|
|
|
|
|
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
|
const span = column["key"] + "-span";
|
|
|
if (row[span]) {
|
|
|
return row[span];
|
|
|
}
|
|
|
},
|
|
|
|
|
|
reset () {
|
|
|
this.clear();
|
|
|
this.data =
|
|
|
this.equipmentList?.map((i) => ({
|
|
|
equipment_id: i.id,
|
|
|
start_time: "",
|
|
|
end_time: "",
|
|
|
content: "",
|
|
|
level: 1,
|
|
|
})) || [];
|
|
|
},
|
|
|
|
|
|
submit () {
|
|
|
let verify = true;
|
|
|
const submitData = this.data.filter(i => (i.start_time || i.end_time || i.content));
|
|
|
submitData.forEach(item => {
|
|
|
if (!item.start_time || !item.end_time || !item.level) {
|
|
|
verify = false;
|
|
|
}
|
|
|
})
|
|
|
if (!verify) {
|
|
|
this.$message({
|
|
|
type: 'warning',
|
|
|
message: '请填写完整信息'
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
|
|
|
let promiseAll = submitData.map(i => {
|
|
|
delete i['equipment_id-span']
|
|
|
delete i['_index']
|
|
|
delete i['_rowKey']
|
|
|
i.start_time = `${this.date} ${i.start_time}`;
|
|
|
i.end_time = `${this.date} ${i.end_time}`;
|
|
|
|
|
|
return save({
|
|
|
table_name: 'transfers',
|
|
|
...i
|
|
|
},false)
|
|
|
})
|
|
|
let loadingInstance = this.$loading({
|
|
|
lock:true,
|
|
|
background:"rgba(0,0,0,0.4)",
|
|
|
text:"正在加载中..."
|
|
|
})
|
|
|
Promise.all(promiseAll).then(res => {
|
|
|
this.reset();
|
|
|
loadingInstance.close();
|
|
|
this.$message({
|
|
|
type: 'success',
|
|
|
message: `成功创建${res.length}条调令`
|
|
|
})
|
|
|
}).catch(_ => {
|
|
|
loadingInstance.close();
|
|
|
})
|
|
|
},
|
|
|
|
|
|
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],
|
|
|
};
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
computed: {
|
|
|
mergeData() {
|
|
|
return mergeTableRow({
|
|
|
data: this.data.map((i) => {
|
|
|
delete i["equipment_id-span"];
|
|
|
return i;
|
|
|
}),
|
|
|
mergeColNames: ["equipment_id"], // 需要合并的列，默认合并列相同的数据
|
|
|
firstMergeColNames: ["equipment_id"], // 受影响的列，只合并以firstMerge为首的同类型数据
|
|
|
firstMerge: "equipment_id", // 以哪列为基础进行合并，一般为第一列
|
|
|
});
|
|
|
},
|
|
|
equipmentList() {
|
|
|
return this.equipments() || [];
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
equipmentList(val) {
|
|
|
this.data =
|
|
|
val?.map((i) => ({
|
|
|
equipment_id: i.id,
|
|
|
start_time: "",
|
|
|
end_time: "",
|
|
|
content: "",
|
|
|
level: 1,
|
|
|
})) || [];
|
|
|
},
|
|
|
select: {
|
|
|
handler: function (val) {
|
|
|
if (val.area.length > 0 || val.type.length > 0) {
|
|
|
let list1 = [];
|
|
|
let list2 = [];
|
|
|
if (val.area.length > 0) {
|
|
|
list1 = this.equipments().filter(i => val.area.find(j => j === i.id))
|
|
|
}
|
|
|
if (val.type.length > 0) {
|
|
|
list2 = this.equipments().filter(i => val.type.find(j => j === i.id))
|
|
|
}
|
|
|
this.data = Array.from(new Set([...list1,...list2].map(JSON.stringify))).map(JSON.parse).map((i) => ({
|
|
|
equipment_id: i.id,
|
|
|
start_time: "",
|
|
|
end_time: "",
|
|
|
content: "",
|
|
|
level: 1,
|
|
|
})) || [];
|
|
|
} else {
|
|
|
this.data = this.equipments()?.map((i) => ({
|
|
|
equipment_id: i.id,
|
|
|
start_time: "",
|
|
|
end_time: "",
|
|
|
content: "",
|
|
|
level: 1,
|
|
|
})) || [];;
|
|
|
}
|
|
|
},
|
|
|
deep: true
|
|
|
}
|
|
|
},
|
|
|
mounted() {},
|
|
|
created() {
|
|
|
this.getArea();
|
|
|
this.getType();
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.flex-center {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
.select {
|
|
|
&-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
&__title {
|
|
|
width: 50px;
|
|
|
flex-shrink: 0;
|
|
|
font-weight: 600;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
& + & {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.date {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
padding: 10px;
|
|
|
}
|
|
|
}
|
|
|
.btns {
|
|
|
|
|
|
margin-top: 10px;
|
|
|
padding-left: 10px;
|
|
|
}
|
|
|
</style>
|
