manager 升级到vue3

manager/src/views/member/message-manage/weChatMessageManager.vue

@@ -1,98 +1,108 @@
 <template>
   <div>
-    <!--微信模板-->
-    <Modal v-model="wechatModal" width="530">
-      <p slot="header">
-        <Icon type="edit"></Icon>
-        <span>微信设置</span>
-      </p>
-      <div>
-        <Form ref="wechatFormData" :model="wechatFormData" label-position="left" :label-width="100">
-          <FormItem v-if="tab === 'WECHAT'" label="模板名称">
-            <Input v-model="wechatFormData.name" size="large" maxlength="9" disabled></Input>
-          </FormItem>
-          <FormItem v-if="tab === 'WECHAT'" label="头部信息" prop="first">
-            <Input v-model="wechatFormData.first" size="large" maxlength="50"></Input>
-          </FormItem>
-          <FormItem v-if="tab === 'WECHAT'" label="备注" prop="remark">
-            <Input class='textarea' :rows="5" :autosize="{maxRows:5,minRows: 5}" v-model="wechatFormData.remark"
-                   type="textarea" maxlength="150"/>
-          </FormItem>
-          <FormItem label="是否开启" prop="enable">
-            <i-switch v-model="wechatFormData.enable" size="large">
-              <span slot="open">开启</span>
-              <span slot="close">关闭</span>
-            </i-switch>
-          </FormItem>
-        </Form>
+    <el-dialog v-model="wechatModal" title="微信设置" width="530px">
+      <el-form ref="wechatFormData" :model="wechatFormData" label-width="100px">
+        <el-form-item v-if="tab === 'WECHAT'" label="模板名称">
+          <el-input v-model="wechatFormData.name" maxlength="9" disabled />
+        </el-form-item>
+        <el-form-item v-if="tab === 'WECHAT'" label="头部信息" prop="first">
+          <el-input v-model="wechatFormData.first" maxlength="50" />
+        </el-form-item>
+        <el-form-item v-if="tab === 'WECHAT'" label="备注" prop="remark">
+          <el-input v-model="wechatFormData.remark" type="textarea" :rows="5" maxlength="150" />
+        </el-form-item>
+        <el-form-item label="是否开启" prop="enable">
+          <el-switch v-model="wechatFormData.enable" active-text="开启" inactive-text="关闭" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button v-if="tab === 'WECHAT'" type="primary" @click="wechatFormDataEdit">保存</el-button>
+        <el-button v-else type="primary" @click="wechatMPFormDataEdit">保存</el-button>
+      </template>
+    </el-dialog>
 
-      </div>
-      <div slot="footer" style="text-align: right">
-        <Button v-if="tab === 'WECHAT'"  type="primary"  @click="wechatFormDataEdit">保存</Button>
-
-        <Button v-else  type="primary" @click="wechatMPFormDataEdit">保存</Button>
-      </div>
-    </Modal>
-
-  <Card>
-    <Tabs @on-click="tabPaneChange" v-model="tab">
-      <TabPane label="微信消息" name="WECHAT">
-        <div class="search">
-            <Row class="operation mt_10">
-              <Button @click="weChatSync" type="primary">初始化微信消息</Button>
-            </Row>
-            <Table
-              :loading="loading"
-              border
-              :columns="weChatColumns"
-              :data="weChatData"
-              ref="weChatTable"
-            ></Table>
-            <Row type="flex" justify="end" class="mt_10">
-              <Page
-                :current="weChatSearchForm.pageNumber"
+    <el-card>
+      <el-tabs v-model="tab" @tab-click="tabPaneChange">
+        <el-tab-pane label="微信消息" name="WECHAT">
+          <div class="search">
+            <div class="operation mt_10">
+              <el-button type="primary" @click="weChatSync">初始化微信消息</el-button>
+            </div>
+            <el-table v-loading="loading" border :data="weChatData" ref="weChatTable" style="width: 100%">
+              <el-table-column prop="code" label="模板编号" width="500" sortable />
+              <el-table-column label="是否开启" width="150" sortable>
+                <template #default="{ row }">
+                  <span v-if="row">{{ row.enable ? "开启" : "关闭" }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="name" label="模板名称" width="200" sortable />
+              <el-table-column prop="createTime" label="创建时间" sortable />
+              <el-table-column label="操作" width="200" align="center" fixed="right">
+                <template #default="{ row }">
+                  <template v-if="row">
+                    <a class="link-text" @click="wechatSettingAlert(row)">编辑</a>
+                    <span class="op-split">|</span>
+                    <a class="link-text" @click="delWeChat(row)">删除</a>
+                  </template>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="mt_10" style="display: flex; justify-content: flex-end">
+              <el-pagination
+                v-model:current-page="weChatSearchForm.pageNumber"
+                v-model:page-size="weChatSearchForm.pageSize"
+                :page-sizes="[20, 50, 100]"
                 :total="weChatTotal"
-                :page-size="weChatSearchForm.pageSize"
-                @on-change="changePage"
-                @on-page-size-change="changePageSize"
-                :page-size-opts="[20, 50, 100]"
+                layout="total, sizes, prev, pager, next"
                 size="small"
-              ></Page>
-            </Row>
-        </div>
-      </TabPane>
+                @current-change="changePage"
+                @size-change="changePageSize"
+              />
+            </div>
+          </div>
+        </el-tab-pane>
 
-      <TabPane label="微信小程序订阅消息" name="WECHATMP">
-        <div class="search">
-            <Row class="operation mt_10">
-              <Button @click="weChatSync('mp')" type="primary">初始化微信小程序订阅消息</Button>
-            </Row>
-            <Table
-              :loading="loading"
-              border
-              :columns="weChatColumns"
-              :data="weChatMPData"
-              sortable="custom"
-              ref="weChatMPTable"
-            ></Table>
-            <Row type="flex" justify="end" class="mt_10">
-              <Page
-                :current="weChatMPSearchForm.pageNumber"
+        <el-tab-pane label="微信小程序订阅消息" name="WECHATMP">
+          <div class="search">
+            <div class="operation mt_10">
+              <el-button type="primary" @click="weChatSync('mp')">初始化微信小程序订阅消息</el-button>
+            </div>
+            <el-table v-loading="loading" border :data="weChatMPData" ref="weChatMPTable" style="width: 100%">
+              <el-table-column prop="code" label="模板编号" width="500" sortable />
+              <el-table-column label="是否开启" width="150" sortable>
+                <template #default="{ row }">
+                  <span v-if="row">{{ row.enable ? "开启" : "关闭" }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="name" label="模板名称" width="200" sortable />
+              <el-table-column prop="createTime" label="创建时间" sortable />
+              <el-table-column label="操作" width="200" align="center" fixed="right">
+                <template #default="{ row }">
+                  <template v-if="row">
+                    <a class="link-text" @click="wechatSettingAlert(row)">编辑</a>
+                    <span class="op-split">|</span>
+                    <a class="link-text" @click="delWeChat(row)">删除</a>
+                  </template>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="mt_10" style="display: flex; justify-content: flex-end">
+              <el-pagination
+                v-model:current-page="weChatMPSearchForm.pageNumber"
+                v-model:page-size="weChatMPSearchForm.pageSize"
+                :page-sizes="[20, 50, 100]"
                 :total="weChatMPTotal"
-                :page-size="weChatMPSearchForm.pageSize"
-                @on-change="changePage"
-                @on-page-size-change="changePageSize"
-                :page-size-opts="[20, 50, 100]"
+                layout="total, sizes, prev, pager, next"
                 size="small"
-              ></Page>
-            </Row>
-        </div>
-      </TabPane>
-    </Tabs>
-     </Card>
+                @current-change="changePage"
+                @size-change="changePageSize"
+              />
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
   </div>
-
-
 </template>
 
 <script>
@@ -101,257 +111,147 @@ import {
   getWechatMessagePage,
   editWechatMessageTemplate,
   delWechatMessageTemplate,
-
   wechatMPMessageSync,
   getWechatMPMessagePage,
   editWechatMPMessageTemplate,
-  delWechatMPMessageTemplate
+  delWechatMPMessageTemplate,
 } from "@/api/setting";
 
 export default {
   title: "wechat-message-manage",
   data() {
     return {
-
-      wechatModal: false,// modal展示
-      wechatFormData: {}, // 微信数据
-      wechatMPFormData: {}, // 微信订阅消息
-      tab: "WECHAT", // tab栏分类
-      searchForm: { // 请求参数
-        type: "WECHAT"
-      },
-      loading: true, // 表单加载状态
-      id: '', // 模板id
-      //微信消息查询
-      weChatSearchForm: {
-        // 搜索框对应data对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-      },
-      weChatMPSearchForm: {
-        // 搜索框对应data对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-      },
-      weChatColumns: [
-        {
-          title: "模板编号",
-          key: "code",
-          width: 500,
-          sortable: true
-        },
-        {
-          title: "是否开启",
-          key: "enable",
-          sortable: true,
-          width: 150,
-          render: (h, params) => {
-            if (params.row.enable == true) {
-              return h('div', [
-                h('span', {}, '开启'),
-              ]);
-            } else {
-              return h('div', [
-                h('span', {}, '关闭'),
-              ]);
-            }
-          },
-        },
-        {
-          title: "模板名称",
-          key: "name",
-          width: 200,
-          sortable: true
-        },
-        {
-          title: "创建时间",
-          key: "createTime",
-          sortable: true,
-          sortType: "desc",
-        },
-        {
-          title: "操作",
-          key: "action",
-          width: 200,
-          align: "center",
-          fixed: "right",
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none"
-                  },
-                  on: {
-                    click: () => {
-                      this.wechatSettingAlert(params.row);
-                    }
-                  }
-                },
-                "编辑"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none"
-                  },
-                  on: {
-                    click: () => {
-                      this.delWeChat(params.row);
-                    }
-                  }
-                },
-                "删除"
-              )
-            ]);
-          }
-        }
-      ],
-      weChatData: [], // 表单数据
-      weChatMPData: [], // 表单数据
-      weChatTotal: 0, // 表单数据总数
-      weChatMPTotal: 0, // 表单数据总数
+      wechatModal: false,
+      wechatFormData: {},
+      wechatMPFormData: {},
+      tab: "WECHAT",
+      searchForm: { type: "WECHAT" },
+      loading: true,
+      id: "",
+      weChatSearchForm: { pageNumber: 1, pageSize: 20 },
+      weChatMPSearchForm: { pageNumber: 1, pageSize: 20 },
+      weChatData: [],
+      weChatMPData: [],
+      weChatTotal: 0,
+      weChatMPTotal: 0,
     };
   },
   methods: {
-    // 初始化数据
     init() {
       this.getDataList();
     },
     changePage(v) {
       this.searchForm.type = this.tab;
-      this.getDataList();
+      if (this.tab === "WECHAT") {
+        this.weChatSearchForm.pageNumber = v;
+        this.getWechatMessagePage();
+      } else {
+        this.weChatMPSearchForm.pageNumber = v;
+        this.getWechatMPMessagePage();
+      }
     },
     changePageSize(v) {
       this.searchForm.type = this.tab;
-      this.getDataList();
+      if (this.tab === "WECHAT") {
+        this.weChatSearchForm.pageSize = v;
+        this.getWechatMessagePage();
+      } else {
+        this.weChatMPSearchForm.pageSize = v;
+        this.getWechatMPMessagePage();
+      }
     },
-    //微信弹出框
     wechatSettingAlert(v) {
-      this.wechatFormData = v
-      this.id = v.id
-      this.wechatModal = true
+      this.wechatFormData = v;
+      this.id = v.id;
+      this.wechatModal = true;
     },
-
-    //同步微信消息
     weChatSync(mp) {
       this.$Modal.confirm({
         title: "提示",
-        // 记得确认修改此处
         content: "确认要初始化微信小程序消息订阅?",
         loading: true,
         onOk: () => {
-          // 同步微信消息模板
-
           if (mp === "mp") {
-            wechatMPMessageSync().then(res => {
+            wechatMPMessageSync().then((res) => {
               this.$Modal.remove();
               if (res.success) {
-                this.$Message.success('微信小程序消息订阅初始化');
+                this.$Message.success("微信小程序消息订阅初始化");
+                this.getWechatMPMessagePage();
               }
             });
           } else {
-            // 同步微信消息模板
-            wechatMessageSync().then(res => {
+            wechatMessageSync().then((res) => {
               this.$Modal.remove();
               if (res.success) {
-                this.$Message.success('微信消息模板初始化成功');
+                this.$Message.success("微信消息模板初始化成功");
+                this.getWechatMessagePage();
               }
             });
           }
+        },
+      });
+    },
+    wechatFormDataEdit() {
+      this.$refs.wechatFormData.validate((valid) => {
+        if (valid) {
+          if (!this.wechatFormData.updateTime) {
+            this.wechatFormData.updateTime = "";
+          }
+          editWechatMessageTemplate(this.id, this.wechatFormData).then((res) => {
+            if (res.message === "success") {
+              this.$Message.success("微信模板修改成功");
+              this.wechatModal = false;
+              this.getWechatMessagePage();
+            }
+          });
         }
       });
     },
-    //微信设置保存
-    wechatFormDataEdit() {
-      this.$refs['wechatFormData'].validate((valid) => {
-        if (valid) {
-          if(!this.wechatFormData.updateTime){
-            this.wechatFormData.updateTime = ''
-          }
-          editWechatMessageTemplate(this.id, this.wechatFormData).then(res => {
-            if (res.message === 'success') {
-              this.$Message.success('微信模板修改成功');
-              this.wechatModal = false;
-              this.getWechatMessagePage();
-            }
-          });
-        }
-      })
-    },
     wechatMPFormDataEdit() {
-      this.$refs['wechatFormData'].validate((valid) => {
+      this.$refs.wechatFormData.validate((valid) => {
         if (valid) {
-          editWechatMPMessageTemplate(this.id, this.wechatMPFormData).then(res => {
-            if (res.message === 'success') {
-              this.$Message.success('微信消息订阅模板修改成功');
+          editWechatMPMessageTemplate(this.id, this.wechatMPFormData).then((res) => {
+            if (res.message === "success") {
+              this.$Message.success("微信消息订阅模板修改成功");
               this.wechatModal = false;
-              this.getWechatMessagePage();
+              this.getWechatMPMessagePage();
             }
           });
         }
-      })
+      });
     },
-
-    //删除微信模消息
     delWeChat(v) {
       this.$Modal.confirm({
         title: "提示",
         content: "确定删除此模板?",
         loading: true,
         onOk: () => {
-          // 删除微信消息模板
           if (this.tab === "WECHAT") {
-            delWechatMessageTemplate(v.id).then(res => {
+            delWechatMessageTemplate(v.id).then((res) => {
               if (res.success) {
                 this.$Modal.remove();
-                this.$Message.success('微信模板删除成功');
-                this.getWechatMessagePage()
+                this.$Message.success("微信模板删除成功");
+                this.getWechatMessagePage();
               }
             });
           } else {
-            delWechatMPMessageTemplate(v.id).then(res => {
+            delWechatMPMessageTemplate(v.id).then((res) => {
               if (res.success) {
                 this.$Modal.remove();
-                this.$Message.success('微信消息订阅删除成功');
-                this.getWechatMessagePage()
+                this.$Message.success("微信消息订阅删除成功");
+                this.getWechatMPMessagePage();
               }
             });
           }
-        }
+        },
       });
-
-    },
-    selectDateRange(v) {
-      if (v) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
-      }
     },
     getDataList() {
-      this.loading = true;
-      getWechatMessagePage(this.searchWe).then(res => {
-        this.loading = false;
-        if (res.success) {
-          this.weChatData = res.result.records;
-          this.weChatTotal = res.result.total;
-        }
-      });
+      this.getWechatMessagePage();
     },
-    //分页获取微信消息
     getWechatMessagePage() {
-      getWechatMessagePage(this.weChatSearchForm).then(res => {
+      this.loading = true;
+      getWechatMessagePage(this.weChatSearchForm).then((res) => {
         this.loading = false;
         if (res.success) {
           this.weChatData = res.result.records;
@@ -359,9 +259,9 @@ export default {
         }
       });
     },
-    //分页获取微信小程序消息订阅
     getWechatMPMessagePage() {
-      getWechatMPMessagePage(this.weChatMPSearchForm).then(res => {
+      this.loading = true;
+      getWechatMPMessagePage(this.weChatMPSearchForm).then((res) => {
         this.loading = false;
         if (res.success) {
           this.weChatMPData = res.result.records;
@@ -369,20 +269,30 @@ export default {
         }
       });
     },
-    //tab切换事件
-    tabPaneChange(v) {
+    tabPaneChange(tab) {
+      const v = tab.paneName || this.tab;
       this.searchForm.type = v;
-      //如果是微信消息则走单独的接口
       if (v === "WECHAT") {
         this.getWechatMessagePage();
       } else if (v === "WECHATMP") {
         this.getWechatMPMessagePage();
       }
-
-    }
+    },
   },
   mounted() {
     this.init();
-  }
+  },
 };
 </script>
+<style scoped>
+.link-text {
+  color: #2d8cf0;
+  cursor: pointer;
+  text-decoration: none;
+}
+.op-split {
+  display: inline-block;
+  margin: 0 8px;
+  color: #dcdee2;
+}
+</style>