|
|
@@ -11,13 +11,14 @@
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<!-- 列表 -->
|
|
|
- <el-tabs v-model="tabActive" editable type="card" @edit="handleTabsEdit">
|
|
|
+ <el-tabs v-model="tabActive" addable closable type="card" @tab-add="dialogVisible = true"
|
|
|
+ @tab-remove="getRemove" v-loading="loading">
|
|
|
<el-tab-pane v-for="item in tabOptions" :key="item.value" :label="item.label" :name="item.value">
|
|
|
- <el-form inline label-width="100px">
|
|
|
+ <el-form label-width="100px">
|
|
|
<el-form-item label="关联设备：">
|
|
|
- <el-select v-model="value" multiple collapse-tags placeholder="请选择需要关联的设备">
|
|
|
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
- </el-select>
|
|
|
+ <el-checkbox-group v-model="value">
|
|
|
+ <el-checkbox v-for="item in options" :key="item.value" :label="item.label" />
|
|
|
+ </el-checkbox-group>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<el-table :data="tableData">
|
|
|
@@ -59,6 +60,8 @@ import { getChannelPage } from "@/api/channel/official";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ // 遮罩层
|
|
|
+ loading: false,
|
|
|
options: [
|
|
|
{
|
|
|
value: "1",
|
|
|
@@ -89,7 +92,7 @@ export default {
|
|
|
label: "机械光域",
|
|
|
},
|
|
|
],
|
|
|
- value: [],
|
|
|
+ value: ['野性mini', '小王子', '原子唱机', 'mate系列', '小确幸', '灵感手表', '机械光域'],
|
|
|
// 标签页
|
|
|
tabOptions: [
|
|
|
{
|
|
|
@@ -119,9 +122,11 @@ export default {
|
|
|
},
|
|
|
// 列表
|
|
|
getList() {
|
|
|
+ this.loading = true
|
|
|
getChannelPage().then((res) => {
|
|
|
if (res.code === 0) {
|
|
|
this.tableData = res.data;
|
|
|
+ this.loading = false
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
@@ -135,13 +140,8 @@ export default {
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
- // 操作列表
|
|
|
- handleTabsEdit(targetName, action) {
|
|
|
- if (action === "add") {
|
|
|
- this.dialogVisible = true;
|
|
|
- } else {
|
|
|
- console.log(targetName);
|
|
|
- }
|
|
|
+ getRemove(e){
|
|
|
+ this.tabOptions.splice(e - 1, 1)
|
|
|
},
|
|
|
// 新建列表
|
|
|
getAdd() {
|
