组件:
<template>
<el-form-item size="small">
<span class=" display: inline-block;"> 第 {{ index + 1 }} 次:</span>
<el-select
:value="startEndTimeObj.lable"
placeholder="清选择"
@change="getStartEndTime"
>
<el-option
v-for="subItem in items"
:key="subItem.index + 'option'"
:label="subItem.lable"
:value="subItem.lable"
>
</el-option>
</el-select>
<i class="el-icon-delete-solid execute-del" @click="executeDel"></i>
</el-form-item>
</template>
<script>
export default {
name: 'execute-option',
components: {},
props: {
value: {
type: Object,
default: () => {
return {};
},
},
index: {
type: Number,
required: true,
},
items: {
type: Array,
default: Array,
},
},
watch: {},
data() {
return {
startEndTimeObj: {},
name: '',
};
},
computed: {},
created() {
this.startEndTimeObj = this.value;
},
methods: {
getStartEndTime(val) {
let vm = this;
if (vm.startEndTimeObj && vm.startEndTimeObj.lable) {
this.items.push(this.startEndTimeObj);
this.items = this.items.sort((a, b) => {
return a.lable >= b.lable ? 1 : -1;
});
}
this.items.forEach((e) => {
vm.startEndTimeObj = e.lable == val ? e : vm.startEndTimeObj;
});
this.items = this.items.filter((e) => e.lable != val);
this.$emit('update:items', this.items);
this.$emit('input', this.startEndTimeObj);
},
executeDel: function() {
if (this.startEndTimeObj && this.startEndTimeObj.index) {
this.items.push(this.startEndTimeObj);
this.items = this.items.sort((a, b) => {
return a.lable >= b.lable ? 1 : -1;
});
this.$emit('update:items', this.items);
this.$emit('deleteIndex', {
lable: this.startEndTimeObj.lable,
index: this.index,
});
} else {
this.$emit('deleteIndex', {
lable: null,
index: this.index,
});
}
},
},
};
</script>
父组件
<template>
<div class="statistics mt30">
<div class="header">
<div class="title-head">
居家隔离管理配置
</div>
<el-form>
<div class="title-menu">
核酸检测计划
<el-button
class="save-btn"
size="small"
type="primary"
@click="saveData()"
>保存</el-button
>
</div>
<el-form-item size="small" label="起始时间">
<el-select
v-model="startEndTime"
style="width: 20%"
filterable
placeholder="清选择"
@change="getStartEndTime"
>
<el-option
v-for="item in startEndDate"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item size="small" label="执行计划"> </el-form-item>
<div class="execute-dom">
<executeOption
v-for="(item, index) in executeList"
:items.sync="executeOption"
:index="index"
:key="index + 'execute' + new Date().getTime()"
v-model="executeList[index]"
class="execute-item"
@deleteIndex="del($event, 'executeList')"
></executeOption>
<div class="form-btns">
<el-button
size="small"
icon="el-icon-plus"
type="primary"
plain
@click="addRow()"
>新增一条</el-button
>
</div>
</div>
<div class="title-menu">血清检测计划</div>
<el-form-item size="small" label="起始时间">
<el-select
v-model="startEndTime1"
style="width: 20%"
filterable
placeholder="清选择"
@change="getStartEndTime"
>
<el-option
v-for="item in startEndDate1"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item size="small" label="执行计划"> </el-form-item>
<div class="execute-dom">
<executeOption
v-for="(item, index) in executeList1"
:items.sync="executeOption1"
:index="index"
:key="index + 'execute1' + new Date().getTime()"
v-model="executeList1[index]"
class="execute-item"
@deleteIndex="del($event, 'executeList1')"
></executeOption>
<div class="form-btns">
<el-button
size="small"
icon="el-icon-plus"
type="primary"
plain
@click="addRow1()"
>新增一条</el-button
>
</div>
</div>
</el-form>
</div>
</div>
</template>
<script>
import executeOption from './execute-option';
export default {
name: 'medical-check-config-index',
components: { executeOption },
data() {
return {
test: [],
options: [
{ index: 1, value: 1, lable: '第一天' },
{ index: 2, value: 2, lable: '第二天' },
{ index: 3, value: 3, lable: '第三天' },
{ index: 4, value: 4, lable: '第四天' },
{ index: 5, value: 5, lable: '第五天' },
{ index: 6, value: 6, lable: '第六天' },
{ index: 7, value: 7, lable: '第七天' },
{ index: 8, value: 8, lable: '第八天' },
{ index: 9, value: 9, lable: '第九天' },
{ index: 10, value: 10, lable: '第十天' },
{ index: 11, value: 11, lable: '第十一天' },
{ index: 12, value: 12, lable: '第十二天' },
{ index: 13, value: 13, lable: '第十三天' },
{ index: 14, value: 14, lable: '第十四天' },
],
executeOption: [],
executeOption1: [],
startEndDate: [
{
value: 1,
label: '隔离第一天起计算',
},
{
value: 2,
label: '入境时间',
},
],
startEndDate1: [
{
value: 1,
label: '隔离第一天起计算',
},
{
value: 2,
label: '入境时间',
},
],
startEndTime: '',
startEndTime1: '',
executeList: [{}],
executeList1: [{}],
};
},
computed: {},
created() {
this.getData();
this.executeOption = this.options;
this.executeOption1 = this.options;
},
methods: {
getStartEndTime(val) {
console.log(val);
},
addRow() {
this.executeList.push({});
},
addRow1() {
this.executeList1.push({});
},
del: function(obj, executeListName) {
console.log(obj);
console.log(executeListName);
if (obj.lable) {
this[executeListName] = this[executeListName].filter(
(e) => e.lable != obj.lable,
);
} else {
this[executeListName].splice(obj.index, 1);
}
},
getData() {
let vm = this;
vm.$http({
showModal: true,
url: vm.api.ECECUT_POST_LIST,
method: 'get',
}).then((res) => {
let list = res.data;
if (list.code == 1) {
list.data.forEach((el) => {
if (el.category == 2 && el.type == 1) {
//居家隔离管理配置-核酸检测计划
vm.startEndTime =
el.beginTime == 1 ? '隔离第一天起计算' : '入境时间';
vm.executeList = JSON.parse(el.planDetails);
vm.executeOption = vm.executeOption.filter(
(e) => !vm.executeList.some((m) => m.lable == e.lable),
);
} else if (el.category == 2 && el.type == 2) {
//居家隔离管理配置-血清检测计划
vm.startEndTime1 =
el.beginTime == 1 ? '隔离第一天起计算' : '入境时间';
vm.executeList1 = JSON.parse(el.planDetails);
vm.executeOption1 = vm.executeOption1.filter(
(e) => !vm.executeList1.some((m) => m.lable == e.lable),
);
}
});
}
});
},
saveData() {
let vm = this;
if (vm.startEndTime) {
vm.startEndTime = vm.startEndTime == '隔离第一天起计算' ? 1 : 2;
} else {
vm.startEndTime = 1;
}
let form = {
id: 3,
category: 2,
type: 1,
beginTime: vm.startEndTime,
planDetails: JSON.stringify(vm.executeList),
};
vm.$http({
showModal: true,
url: vm.api.ECECUT_POST_UPDATE,
method: 'post',
data: form,
}).then((res) => {
if (res.data.code == 1) {
this.$message({
showClose: true,
message: '保存成功',
type: 'success',
});
}
});
if (vm.startEndTime1) {
vm.startEndTime1 = vm.startEndTime1 == '隔离第一天起计算' ? 1 : 2;
} else {
vm.startEndTime1 = 1;
}
let form1 = {
id: 4,
category: 2,
type: 2,
beginTime: vm.startEndTime1,
planDetails: JSON.stringify(vm.executeList1),
};
vm.$http({
showModal: true,
url: vm.api.ECECUT_POST_UPDATE,
method: 'post',
data: form1,
}).then((res) => {
console.log(res);
});
},
},
};
</script>