From 2d62200297546adc7e924392c6f13eb4d2cdaaae Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Thu, 5 Jan 2023 16:06:20 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE=E7=89=87=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=EF=BC=8C=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tianfuxing/AppCarousel/AppCarousel.vue    | 336 +++---------------
 .../tianfuxing/AppCarousel/components/Add.vue | 326 +++++++++++++++++
 .../AppCarousel/components/Detail.vue         |  76 ++++
 .../AppCarousel/components/List.vue           | 165 +++++++++
 4 files changed, 618 insertions(+), 285 deletions(-)
 create mode 100644 project/tianfuxing/AppCarousel/components/Add.vue
 create mode 100644 project/tianfuxing/AppCarousel/components/Detail.vue
 create mode 100644 project/tianfuxing/AppCarousel/components/List.vue

diff --git a/project/tianfuxing/AppCarousel/AppCarousel.vue b/project/tianfuxing/AppCarousel/AppCarousel.vue
index babfce00..46964ac1 100644
--- a/project/tianfuxing/AppCarousel/AppCarousel.vue
+++ b/project/tianfuxing/AppCarousel/AppCarousel.vue
@@ -1,304 +1,70 @@
 <template>
-  <div class="appcarousel">
-    <ai-list>
-      <template slot="title">
-        <ai-title title="轮播图片" :isShowBottomBorder="false" :isShowArea="false"></ai-title>
-      </template>
-
-      <template slot="content">
-        <ai-search-bar>
-          <template slot="left">
-            <el-button type="primary" icon="iconfont iconAdd" size="small" @click="add">添加</el-button>
-          </template>
-
-          <template slot="right">
-            <el-input v-model="search.title" size="small" placeholder="搜索标题" clearable
-                      v-throttle="() => {page.current = 1, getList()}"
-                      @clear=";(page.current = 1), (search.title = ''), getList()" suffix-icon="iconfont iconSearch"/>
-          </template>
-        </ai-search-bar>
-
-        <ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current"
-                  :size.sync="page.size" @getList="getList" class="ai-table">
-          <!-- 首页封面 -->
-          <el-table-column label="首页封面" align="left" width="150" slot="imgUrl">
-            <template slot-scope="{ row }">
-              <img :src="row.imgUrl" alt="" class="banner-img" v-if="row.imgUrl"/>
-            </template>
-          </el-table-column>
-
-          <!-- 操作 -->
-          <el-table-column label="操作" align="center" width="300" slot="option">
-            <template slot-scope="{ row }">
-              <el-button type="text" @click="release(row)" v-if="row.status == 1">取消发布</el-button>
-              <el-button type="text" @click="release(row)" v-else>发布</el-button>
-
-              <el-button type="text" @click="detail(row)">详情</el-button>
-              <el-button type="text" @click="edit(row)">编辑</el-button>
-              <el-button type="text" @click="remove(row.id)">删除</el-button>
-            </template>
-          </el-table-column>
-        </ai-table>
-      </template>
-    </ai-list>
-
-    <!-- 添加的模态框 -->
-    <ai-dialog :title="dialog.title" :visible.sync="visible" @onCancel="visible = false" @onConfirm="addConfirm"
-               width="800px">
-      <el-form ref="ruleForm" :model="dialogInfo" :rules="formRules" size="small" label-width="100px">
-        <!-- 首页封面 -->
-        <el-form-item label="首页封面" prop="imgUrl">
-          <ai-uploader v-model="dialogInfo.imgUrl" @change="change" :instance="instance" :limit="1"></ai-uploader>
-        </el-form-item>
-        <!-- 活动名称 -->
-        <el-form-item label="标题" prop="title">
-          <el-input placeholder="请输入标题" :maxlength="30" show-word-limit v-model="dialogInfo.title"></el-input>
-        </el-form-item>
-        <!-- 连接类型 -->
-        <el-form-item label="链接类型" prop="type">
-          <ai-select v-model="dialogInfo.type" placeholder="请选择链接类型"
-                     :selectList="$dict.getDict('bannerType')"></ai-select>
-        </el-form-item>
-        <!-- 链接 -->
-        <el-form-item label="链接" prop="linkUrl">
-          <el-input placeholder="请输入链接" v-model="dialogInfo.linkUrl"></el-input>
-        </el-form-item>
-      </el-form>
-    </ai-dialog>
-
-    <!-- 详情的模态框 -->
-    <ai-dialog title="详情" :visible.sync="detailDialog" customFooter width="800px">
-      <!--  -->
-      <el-form ref="ruleForm" :model="dialogInfo" :rules="formRules" size="small" label-width="100px">
-        <ai-wrapper label-width="80px" :columnsNumber="1">
-          <ai-info-item label="首页封面">
-            <span><img :src="dialogInfo.imgUrl" alt="" style="width:100px;height:100px;"/></span>
-          </ai-info-item>
-          <ai-info-item label="标题">
-            <span>{{ dialogInfo.title }}</span>
-          </ai-info-item>
-          <ai-info-item label="链接类型">
-            <span>{{ this.dict.getLabel('bannerType', dialogInfo.type) }}</span>
-          </ai-info-item>
-          <ai-info-item label="链接">
-            <span>{{ dialogInfo.linkUrl }}</span>
-          </ai-info-item>
-        </ai-wrapper>
-      </el-form>
-
-      <div class="dialog-footer" slot="footer">
-        <el-button @click="detailDialog=false">关闭</el-button>
-      </div>
-    </ai-dialog>
+  <div class="AppCarousel">
+    <keep-alive :include="['List']">
+      <component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
+    </keep-alive>
   </div>
 </template>
 
 <script>
-import {mapState} from 'vuex'
+  import List from './components/List'
+  import Detail from './components/Detail'
+  import Add from './components/Add'
 
-export default {
-  label: '轮播图片',
-  name: 'AppCarousel',
-  // 组件
-  components: {},
-  props: {
-    instance: Function,
-    dict: Object,
-    permissions: Function,
-  },
-  data() {
-    return {
-      visible: false,
-      detailDialog: false,
-      // status: 0,
-      // id:'',
-      search: {
-        title: '',
-      },
-      tableData: [],
-      page: {
-        size: 10,
-        current: 1,
-        total: 0,
-      },
-      dialog: {
-        // title: '',
-        visible: false,
-      },
-      dialogInfo: {
-        id: '',
-        title: '',
-        imgUrl: [],
-        type: '',
-        linkUrl: '',
-      },
-      // fileList: '',
-      formRules: {
-        imgUrl: [{required: true, message: '请添加图片', trigger: 'blur'}],
-        title: [{required: true, message: '请输入标题', trigger: 'blur'}],
-        type: [{required: true, trigger: 'change', message: '请选择链接类型'}],
-        // linkUrl: [{ required: true, message: '请输入链接', trigger: 'blur' }]
-      },
-      colConfigs: [
-        {prop: 'imgUrl', label: '首页封面', slot: 'imgUrl'},
-        {
-          prop: 'title',
-          label: '标题',
+  export default {
+    name: 'AppCarousel',
+    label: '轮播图片',
 
-          'show-overflow-tooltip': true,
-        },
-        {
-          prop: 'type',
-          label: '链接类型',
-          render: (h, {row}) => {
-            return h('span', null, this.dict.getLabel('bannerType', row.type))
-          },
-        },
-        {
-          prop: 'status',
-          label: '发布状态',
-          width: 400,
-          render: (h, {row}) => {
-            return h('span', null, this.dict.getLabel('bannerSstatus', row.status))
-          },
-        },
+    props: {
+      instance: Function,
+      dict: Object
+    },
 
-        {slot: 'option', label: '操作', width: 280},
-      ],
-    }
-  },
-  // 计算
-  computed: {
-    ...mapState(['user']),
-  },
-  // 监听
-  watch: {},
-  // 实例创建后
-  created() {
-    this.dict.load('bannerType', 'bannerSstatus').then(() => {
-      this.getList()
-    })
-    // this.getList()
-    this.getShopList()
-  },
-  // 实例渲染后
-  mounted() {
-  },
-  // 方法
-  methods: {
-    getList() {
-      this.instance
-      .post(`/app/appbanner/list`, null, {
-        params: {
-          ...this.search,
-          ...this.page,
-        },
-      })
-      .then((res) => {
-        if (res.code == 0) {
-          // console.log(res.data.records)
-          this.tableData = res.data.records
+    data () {
+      return {
+        component: 'List',
+        params: {},
+        include: []
+      }
+    },
 
-          this.page.total = res.data.total
+    components: {
+      Detail,
+      List,
+      Add
+    },
+
+    methods: {
+      onChange (data) {
+        if (data.type === 'Detail') {
+          this.component = 'Detail'
+          this.params = data.params
         }
-      })
-      .catch(() => {
-      })
-    },
-    getShopList() {
-    },
-    add() {
-      this.dialog.title = '添加'
-      this.dialogInfo = {}
-      this.getList()
-      this.visible = true
-    },
 
-    data(e) {
-      this.files.push(e)
-    },
-    change(e) {
-      this.files = e
-    },
-    // 确定新增
-    addConfirm() {
-      // console.log('确定')
-      this.$refs.ruleForm.validate((valid) => {
-        if (valid) {
-          this.instance.post(`/app/appbanner/addOrUpdate`, {
-            imgUrl: this.dialogInfo.imgUrl[0].url,
-            linkUrl: this.dialogInfo.linkUrl,
-            status: this.status,
-            title: this.dialogInfo.title,
-            type: this.dialogInfo.type,
-            id: this.dialogInfo.id,
-          }).then(res => {
-            if (res?.code == 0) {
-              this.$message.success('新增成功')
-              this.visible = false
-              this.getList()
+        if (data.type === 'Add') {
+          this.component = 'Add'
+          this.params = data.params
+        }
+
+        if (data.type === 'List') {
+          this.component = 'List'
+          this.params = data.params
+
+          this.$nextTick(() => {
+            if (data.isRefresh) {
+              this.$refs.component.getList()
             }
           })
         }
-      })
-    },
-    // 发布/取消发布
-    release(row) {
-      this.$confirm('确定此操作？').then(() => {
-        var status = row.status == 1 ? '0' : '1'
-        this.instance.post(`/app/appbanner/setStatus?id=${row.id}&status=${status}`)
-        .then((res) => {
-          if (res?.code == 0) {
-            this.getList()
-          }
-        })
-      })
-    },
-    // 详情
-    detail(row) {
-      this.detailDialog = true
-      this.instance.post(`/app/appbanner/detail?id=${row.id}`, {
-        // imgUrl: this.dialogInfo.imgUrl[0].url
-      })
-      .then((res) => {
-        if (res?.data) {
-          this.dialogInfo = {...row}
-        }
-      })
-    },
-    // 编辑
-    edit(row) {
-      this.dialog.title = '编辑'
-      this.visible = true
-      this.dialogInfo = {...row}
-      this.dialogInfo.imgUrl = [{url: ''}]
-      this.dialogInfo.imgUrl[0].url = row.imgUrl
-      // console.log(this.dialogInfo)
-    },
-    // 删除
-    remove(id) {
-      this.$confirm('删除后不可恢复，是否要删除该事项？', {
-        type: 'error',
-      }).then(() => {
-        this.instance.post(`/app/appbanner/delete?ids=${id}`).then((res) => {
-          if (res.code == 0) {
-            this.$message.success('删除成功！')
-            this.getList()
-          }
-        })
-      })
-    },
-  },
-}
+      }
+    }
+  }
 </script>
 
 <style lang="scss">
-.appcarousel {
-  height: 100%;
-  // padding: 15px 10px;
-  .banner-img {
-    width: 50px;
-    height: 50px;
+  .AppCarousel {
+    height: 100%;
+    background: #F3F6F9;
+    overflow: auto;
   }
-}
 </style>
diff --git a/project/tianfuxing/AppCarousel/components/Add.vue b/project/tianfuxing/AppCarousel/components/Add.vue
new file mode 100644
index 00000000..72bef62c
--- /dev/null
+++ b/project/tianfuxing/AppCarousel/components/Add.vue
@@ -0,0 +1,326 @@
+<template>
+  <ai-detail class="Add">
+    <template slot="title">
+      <ai-title :title="params.id ? '编辑轮播图片' : '添加轮播图片'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      </ai-title>
+    </template>
+    <template slot="content">
+      <el-form ref="ruleForm" :model="dialogInfo" :rules="formRules" size="small" label-width="100px">
+        <ai-card title="基本信息">
+          <template #content>
+            <!-- 首页封面 -->
+            <el-form-item label="首页封面" prop="imgUrl">
+              <ai-uploader v-model="dialogInfo.imgUrl" :instance="instance" :limit="1"></ai-uploader>
+            </el-form-item>
+            <!-- 活动名称 -->
+            <el-form-item label="标题" prop="title">
+              <el-input placeholder="请输入标题" :maxlength="30" show-word-limit v-model="dialogInfo.title"></el-input>
+            </el-form-item>
+            <!-- 连接类型 -->
+            <el-form-item label="链接类型" prop="type">
+              <ai-select v-model="dialogInfo.type" placeholder="请选择链接类型"
+                        :selectList="$dict.getDict('bannerType')"></ai-select>
+            </el-form-item>
+
+            <el-form-item label="内容" prop="rtf" v-if="dialogInfo.type == 3">
+              <ai-editor v-model="dialogInfo.rtf" :instance="instance" />
+            </el-form-item>
+
+            <!-- 链接 -->
+            <el-form-item label="链接" prop="linkUrl" v-else>
+              <el-input placeholder="请输入链接" v-model="dialogInfo.linkUrl"></el-input>
+            </el-form-item>
+          </template>
+        </ai-card>
+      </el-form>
+    </template>
+    <template #footer>
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="confirm()">确认</el-button>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+export default {
+  name: 'Add',
+
+  props: {
+    instance: Function,
+    dict: Object,
+    params: Object
+  },
+
+  data() {
+    return {
+      dialogInfo: {
+        id: '',
+        title: '',
+        imgUrl: [],
+        type: '',
+        linkUrl: '',
+      },
+      formRules: {
+        imgUrl: [{required: true, message: '请添加图片', trigger: 'change'}],
+        title: [{required: true, message: '请输入标题', trigger: 'blur'}],
+        type: [{required: true, trigger: 'change', message: '请选择链接类型'}],
+        rtf: [{ required: true, trigger: 'blur', message: '请输入内容' }]
+      },
+    }
+  },
+
+  created() {
+    if (this.params && this.params.id) {
+      this.getInfo()
+    }
+  },
+
+  methods: {
+    getInfo() {
+      this.instance.post(`/app/appbanner/detail?id=${this.params.id}`).then((res) => {
+        if (res.data) {
+          this.dialogInfo = res.data
+          this.dialogInfo.imgUrl = [{url: res.data.imgUrl}]
+        }
+      })
+    },
+
+    confirm() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.instance.post(`/app/appbanner/addOrUpdate`, {
+            ...this.dialogInfo,
+            imgUrl: this.dialogInfo.imgUrl[0].url,
+          }).then(res => {
+            if (res?.code == 0) {
+              this.$message.success(this.params.id ? '编辑成功' : '新增成功')
+              this.cancel(true)
+            }
+          })
+        }
+      })
+    },
+
+    cancel(isRefresh) {
+      this.$emit('change', {
+        type: 'List',
+        isRefresh: !!isRefresh
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+// .el-tooltip__popper.is-dark {
+//   max-width: 240px;
+// }
+
+// .AppAnnounceAdd {
+//   .ai-detail__content {
+//     .ai-detail__content--wrapper {
+//       position: relative;
+//       max-width: 100%;
+//       margin: 0;
+//       height: 100%;
+//       overflow: hidden;
+//     }
+//   }
+
+//   .ai-form {
+//     textarea {
+//       border-radius: 4px 4px 0 0!important;
+//     }
+//   }
+
+//   * {
+//     box-sizing: border-box;
+//   }
+
+//   .add {
+//     display: flex;
+//     flex-direction: column;
+//     padding: 14px 16px;
+//     background: #F9F9F9;
+//     border-radius: 0px 0px 4px 4px;
+//     border: 1px solid #D0D4DC;
+//     border-top: none;
+
+//     .add-item {
+//       display: flex;
+//       align-items: center;
+//       line-height: 1;
+//       cursor: pointer;
+
+//       &:hover {
+//         opacity: 0.6;
+//       }
+
+//       img {
+//         width: 20px;
+//         height: 20px;
+//         margin-right: 2px;
+//       }
+
+//       span {
+//         color: #222;
+//         font-size: 14px;
+//       }
+//     }
+
+//     .fileList {
+//       margin-bottom: 12px;
+
+//       .add-item {
+//         justify-content: space-between;
+//         margin-bottom: 8px;
+
+//         .left {
+//           display: flex;
+//           align-items: center;
+//         }
+
+//         i {
+//           font-size: 14px;
+//           cursor: pointer;
+//           font-style: normal;
+//           color: red;
+
+//           &:hover {
+//             opacity: 0.6;
+//           }
+//         }
+
+//         &:last-child {
+//           margin-bottom: 0;
+//         }
+//       }
+//     }
+//   }
+
+//   .AppAnnounceDetail-container {
+//     display: flex;
+//     position: relative;
+//     height: 100%;
+//     padding: 0 20px;
+//     overflow: auto;
+//     overflow: overlay;
+
+//     .left {
+//       flex: 1;
+//       margin-right: 20px;
+//     }
+
+//     .right {
+//       position: sticky;
+//       top: 0;
+//     }
+
+//     .AppAnnounceDetail-select {
+//       display: flex;
+//       align-items: center;
+//       min-height: 32px;
+//       line-height: 1;
+//       background: #F5F5F5;
+//       border-radius: 4px;
+//       border: 1px solid #D0D4DC;
+//       cursor: pointer;
+//       overflow: hidden;
+//       transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+//       &:hover {
+//         border-color: #26f;
+//       }
+
+//       & > i {
+//         flex: 1;
+//         height: 100%;
+//         line-height: 32px;
+//         padding: 0 12px;
+//         color: #888888;
+//         font-size: 14px;
+//         font-style: normal;
+//         border-right: 1px solid #D0D4DC;
+//         background: #fff;
+//       }
+
+//       .AppAnnounceDetail-select__input {
+//         position: absolute;
+//         left: 0;
+//         top: 0;
+//         z-index: -1;
+//         opacity: 0;
+//         height: 100%;
+//       }
+
+//       .select-right {
+//         height: 100%;
+//         padding: 0 12px;
+//         color: #222222;
+//         font-size: 12px;
+//         cursor: pointer;
+//         transition: all ease 0.3s;
+
+//         &:hover {
+//           opacity: 0.5;
+//         }
+//       }
+
+//       .select-left {
+//         display: flex;
+//         flex-wrap: wrap;
+//         flex: 1;
+//         padding: 5px 0 0px 12px;
+//         border-right: 1px solid #D0D4DC;
+//         border-radius: 4px 0 0 4px;
+//         background: #fff;
+
+//         em {
+//           height: 22px;
+//           line-height: 22px;
+//           margin: 0 4px 5px 0;
+//           color: #222222;
+//           font-size: 12px;
+//           font-style: normal;
+//         }
+
+//         span {
+//           height: 22px;
+//           line-height: 22px;
+//           margin: 0 4px 5px 0;
+//           padding: 0 8px;
+//           font-size: 12px;
+//           color: #222222;
+//           background: #F3F4F7;
+//           border-radius: 2px;
+//           border: 1px solid #D0D4DC;
+//         }
+//       }
+//     }
+//   }
+
+//   .tips {
+//     display: flex;
+//     align-items: center;
+//     font-size: 14px;
+//     color: #222222;
+
+//     span {
+//       margin: 0 3px;
+//       color: #2266FF;
+//     }
+
+//     i {
+//       color: #8899bb;
+//     }
+
+//     em {
+//       line-height: 20px;
+//       margin-top: 8px;
+//       color: #888888;
+//       font-size: 12px;
+//       font-style: normal;
+//     }
+//   }
+// }
+</style>
diff --git a/project/tianfuxing/AppCarousel/components/Detail.vue b/project/tianfuxing/AppCarousel/components/Detail.vue
new file mode 100644
index 00000000..edd5b6df
--- /dev/null
+++ b/project/tianfuxing/AppCarousel/components/Detail.vue
@@ -0,0 +1,76 @@
+<template>
+  <section class="detail">
+    <ai-title slot="title" title="轮播图详情" isShowBottomBorder :isShowBack="true" @onBackClick="cancel(false)"/>
+    <ai-card>
+      <ai-title slot="title" title="基本信息"/>
+      <template #content>
+        <ai-wrapper label-width="80px" :columnsNumber="1">
+          <ai-info-item label="首页封面">
+            <span><img :src="dialogInfo.imgUrl" alt="" style="width:100px;height:100px;"/></span>
+          </ai-info-item>
+          <ai-info-item label="标题">
+            <span>{{ dialogInfo.title }}</span>
+          </ai-info-item>
+          <ai-info-item label="链接类型">
+            <span>{{ dict.getLabel('bannerType', dialogInfo.type) }}</span>
+          </ai-info-item>
+          <ai-info-item label="内容" isLine v-if="dialogInfo.type == 3">
+            <div v-html="dialogInfo.rtf"></div>
+          </ai-info-item>
+          <ai-info-item label="链接" v-else>
+            <span>{{ dialogInfo.linkUrl }}</span>
+          </ai-info-item>
+          
+        </ai-wrapper>
+      </template>
+    </ai-card>
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: "detail",
+  data() {
+    return {
+      dialogInfo: {}
+    }
+  },
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    params: Object,
+  },
+  created() {
+    this.getDetail()
+  },
+  methods: {
+    getDetail() {
+      this.instance.post(`/app/appbanner/detail?id=${this.params.id}`).then((res) => {
+        if (res?.data) {
+          this.dialogInfo = {...res.data}
+        }
+      })
+    },
+
+    cancel(isRefresh) {
+      this.$emit('change', {
+        type: 'List',
+        isRefresh: !!isRefresh
+      })
+    }
+
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.detail {
+  width: 100%;
+  height: 100%;
+  padding: 0 20px;
+  box-sizing: border-box;
+  overflow-y: scroll;
+}
+</style>
diff --git a/project/tianfuxing/AppCarousel/components/List.vue b/project/tianfuxing/AppCarousel/components/List.vue
new file mode 100644
index 00000000..0112e486
--- /dev/null
+++ b/project/tianfuxing/AppCarousel/components/List.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="List">
+    <ai-list>
+      <template slot="title">
+        <ai-title title="轮播图片" :isShowBottomBorder="false" :isShowArea="false"></ai-title>
+      </template>
+      <template slot="content">
+        <ai-search-bar>
+          <template slot="left">
+            <el-button type="primary" icon="iconfont iconAdd" size="small" @click="add">添加</el-button>
+          </template>
+          <template slot="right">
+            <el-input v-model="search.title" size="small" placeholder="搜索标题" clearable v-throttle="() => {page.current = 1, getList()}"
+              @clear=";(page.current = 1), (search.title = ''), getList()" suffix-icon="iconfont iconSearch"/>
+          </template>
+        </ai-search-bar>
+        <ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current"
+          :size.sync="page.size" @getList="getList" class="ai-table">
+          <!-- 首页封面 -->
+          <el-table-column label="首页封面" align="left" width="150" slot="imgUrl">
+            <template slot-scope="{ row }">
+              <img :src="row.imgUrl" alt="" class="banner-img" v-if="row.imgUrl"/>
+            </template>
+          </el-table-column>
+          <!-- 操作 -->
+          <el-table-column label="操作" align="center" width="300" slot="option">
+            <template slot-scope="{ row }">
+              <el-button type="text" @click="release(row)" v-if="row.status == 1">取消发布</el-button>
+              <el-button type="text" @click="release(row)" v-else>发布</el-button>
+              <el-button type="text" @click="detail(row.id)">详情</el-button>
+              <el-button type="text" @click="edit(row.id)">编辑</el-button>
+              <el-button type="text" @click="remove(row.id)">删除</el-button>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name: 'List',
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+  },
+  data() {
+    return {
+      search: {
+        title: '',
+      },
+      tableData: [],
+      page: {
+        size: 10,
+        current: 1,
+        total: 0,
+      },
+      colConfigs: [
+        {prop: 'imgUrl', label: '首页封面', slot: 'imgUrl'},
+        {prop: 'title', label: '标题', 'show-overflow-tooltip': true,},
+        {prop: 'type', label: '链接类型',
+          render: (h, {row}) => {return h('span', null, this.dict.getLabel('bannerType', row.type))},
+        },
+        {prop: 'status', label: '发布状态', width: 400,
+          render: (h, {row}) => {return h('span', null, this.dict.getLabel('bannerSstatus', row.status))},
+        },
+        {slot: 'option', label: '操作', width: 280},
+      ],
+    }
+  },
+  // 计算
+  computed: {
+    ...mapState(['user']),
+  },
+  // 监听
+  watch: {},
+  // 实例创建后
+  created() {
+    this.dict.load('bannerType', 'bannerSstatus').then(() => {
+      this.getList()
+    })
+  },
+  // 实例渲染后
+  mounted() {
+  },
+  // 方法
+  methods: {
+    getList() {
+      this.instance.post(`/app/appbanner/list`, null, {
+        params: {
+          ...this.search,
+          ...this.page,
+        },
+      }).then((res) => {
+        if (res.code == 0) {
+          this.tableData = res.data.records
+          this.page.total = res.data.total
+        }
+      })
+    },
+    add() {
+      this.$emit('change', {
+        type: 'Add',
+        params: {id: ''}
+      })
+    },
+    // 发布/取消发布
+    release(row) {
+      this.$confirm('确定此操作？').then(() => {
+        var status = row.status == 1 ? '0' : '1'
+        this.instance.post(`/app/appbanner/setStatus?id=${row.id}&status=${status}`)
+        .then((res) => {
+          if (res?.code == 0) {
+            this.getList()
+          }
+        })
+      })
+    },
+    detail(id) {
+      this.$emit('change', {
+        type: 'Detail',
+        params: {
+          id
+        }
+      })
+    },
+    edit(id) {
+      this.$emit('change', {
+        type: 'Add',
+        params: {
+          id
+        }
+      })
+    },
+    // 删除
+    remove(id) {
+      this.$confirm('删除后不可恢复，是否要删除该事项？', {
+        type: 'error',
+      }).then(() => {
+        this.instance.post(`/app/appbanner/delete?ids=${id}`).then((res) => {
+          if (res.code == 0) {
+            this.$message.success('删除成功！')
+            this.getList()
+          }
+        })
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.List {
+  height: 100%;
+  // padding: 15px 10px;
+  .banner-img {
+    width: 50px;
+    height: 50px;
+  }
+}
+</style>