init

src/views/OrderRefund/OrderRefund.vue

@@ -1,377 +1,379 @@
 
 <template>
-    <div>
-        <el-card shadow="never" style="margin-top: 20px;">
-            <template #header>
-                <slot name="header">
-                    <vxe-toolbar :export="isHasAuth('export')" :print="isHasAuth('print')" custom ref="toolbar">
-                        <template #buttons>
-                            <el-button
-                                    v-if="isHasAuth('create')"
-                                    icon="el-icon-plus"
-                                    type="primary"
-                                    size="small"
-                                    @click="isShowAdd = true"
-                            >新增</el-button
-                            >
-                            <el-button
-                                    v-if="isHasAuth('search')"
-                                    icon="el-icon-search"
-                                    type="primary"
-                                    plain
-                                    size="small"
-                                    @click="getList"
-                            >搜索</el-button
-                            >
-                        </template>
-                    </vxe-toolbar>
-                </slot>
+  <div>
+    <el-card shadow="never" style="margin-top: 20px;">
+      <template #header>
+        <slot name="header">
+          <vxe-toolbar ref="toolbar" :export="isHasAuth('export')" :print="isHasAuth('print')" custom>
+            <template #buttons>
+              <el-button
+                v-if="isHasAuth('create')"
+                icon="el-icon-plus"
+                type="primary"
+                size="small"
+                @click="isShowAdd = true"
+              >新增</el-button>
+              <el-button
+                v-if="isHasAuth('search')"
+                icon="el-icon-search"
+                type="primary"
+                plain
+                size="small"
+                @click="getList"
+              >搜索</el-button>
             </template>
+          </vxe-toolbar>
+        </slot>
+      </template>
 
-            <vxe-table
-                    ref="table"
-                    stripe
-                    style="margin-top: 10px"
-                    :loading="loading"
-                    :height="tableHeight"
-                    keep-source
-                    show-overflow
-                    :menu-config="{
-                      className: 'my-menus',
-                      body: {
-                        options: [
-                          [
-                            { code: 'copy', name: '复制', prefixConfig: { icon: 'vxe-icon-copy' }, suffixConfig: { content: 'Ctrl+C' } },
-                            { code: 'remove', name: '删除', prefixConfig: { icon: 'vxe-icon-delete-fill', className: 'color-red' } }
-                          ],
-                        ]
-                      }
-                    }"
-                    @menu-click="contextMenuClickEvent"
-                    :row-config="{ isCurrent: true, isHover: true }"
-                    :column-config="{ resizable: true }"
-                    :export-config="{}"
-                    :edit-rules="validRules"
-                    :edit-config="{
+      <vxe-table
+        ref="table"
+        stripe
+        style="margin-top: 10px"
+        :loading="loading"
+        :height="tableHeight"
+        keep-source
+        show-overflow
+        :menu-config="{
+          className: 'my-menus',
+          body: {
+            options: [
+              [
+                { code: 'copy', name: '复制', prefixConfig: { icon: 'vxe-icon-copy' }, suffixConfig: { content: 'Ctrl+C' } },
+                { code: 'remove', name: '删除', prefixConfig: { icon: 'vxe-icon-delete-fill', className: 'color-red' } }
+              ],
+            ]
+          }
+        }"
+        :row-config="{ isCurrent: true, isHover: true }"
+        :column-config="{ resizable: true }"
+        :export-config="{}"
+        :edit-rules="validRules"
+        :edit-config="{
           trigger: 'manual',
           mode: 'row',
           showStatus: true,
           isHover: true,
           autoClear: false,
         }"
-                    
-                    :align="allAlign"
-                    :data="tableData"
-            >
-                <vxe-column type="seq" width="58" align="center"  />
-                
-                    
-                    
-                        
-                        <vxe-column
-                                align="center"
-                                field="status"
-                                width="180"
-                                title="状态"
-                                :edit-render="{ name: 'VxeSelect', options: [{'value':0,'label':'未退款'},{'value':1,'label':'退款成功'},{'value':2,'label':'退款失败'}], props: { multiple: false }, optionProps: { value: 'value', label: 'label' } }"
-                        />
-                        
-                <vxe-column field="operate" header-align="center" title="操作" min-width="220">
-                    <template #default="{ row }">
-                        <template v-if="isActiveStatus(row)">
-                            <el-button size="small" type="primary" @click="saveRowEvent(row)"
-                            >保存</el-button
-                            >
-                            <el-button
-                                    size="small"
-                                    type="primary"
-                                    plain
-                                    @click="cancelRowEvent(row)"
-                            >取消</el-button
-                            >
-                        </template>
-                        <template v-else>
-                            <el-button v-if="isHasAuth('detail')" size="small" type="primary" plain @click="detail(row)"
-                            >查看</el-button
-                            >
-                            <el-button v-if="isHasAuth('edit')" size="small" type="warning" @click="editRowEvent(row)"
-                            >编辑</el-button
-                            >
-                            <el-button
-                                    v-if="isHasAuth('delete')"
-                                    size="small"
-                                    type="danger"
-                                    @click="destroyRowEvent(row)"
-                            >删除</el-button
-                            >
-                        </template>
-                    </template>
-                </vxe-column>
-            </vxe-table>
+        :align="allAlign"
+
+        :data="tableData"
+        @menu-click="contextMenuClickEvent"
+      >
+        <vxe-column type="seq" width="58" align="center" />
+
+        <vxe-column field="no" title="退款编号" width="180" align="center" />
+        <vxe-column field="order.no" title="订单编号" width="180" align="center" />
+
+        <vxe-column
+          align="center"
+          field="status"
+          width="180"
+          title="状态"
+          :edit-render="{ name: 'VxeSelect', options: [{'value':0,'label':'未退款'},{'value':1,'label':'退款成功'},{'value':2,'label':'退款失败'}], props: { multiple: false }, optionProps: { value: 'value', label: 'label' } }"
+        />
+
+        <vxe-column field="created_at" title="创建时间" width="180" align="center" />
+
+        <vxe-column field="operate" header-align="center" title="操作" min-width="220">
+          <template #default="{ row }">
+            <template v-if="isActiveStatus(row)">
+              <el-button
+                size="small"
+                type="primary"
+                @click="saveRowEvent(row)"
+              >保存</el-button>
+              <el-button
+                size="small"
+                type="primary"
+                plain
+                @click="cancelRowEvent(row)"
+              >取消</el-button>
+            </template>
+            <template v-else>
+              <el-button
+                v-if="isHasAuth('detail')"
+                size="small"
+                type="primary"
+                plain
+                @click="detail(row)"
+              >查看</el-button>
+              <el-button
+                v-if="isHasAuth('edit')"
+                size="small"
+                type="warning"
+                @click="editRowEvent(row)"
+              >编辑</el-button>
+              <el-button
+                v-if="isHasAuth('delete')"
+                size="small"
+                type="danger"
+                @click="destroyRowEvent(row)"
+              >删除</el-button>
+            </template>
+          </template>
+        </vxe-column>
+      </vxe-table>
 
-            
-                <el-pagination
-                        style="margin-top: 10px;display: flex;justify-content: flex-end;"
-                        :current-page.sync="select.page"
-                        :page-sizes="[20, 30, 40, 50]"
-                        :page-size.sync="select.page_size"
-                        layout="total, sizes, prev, pager, next, jumper"
-                        :total="total"
-                        @size-change="
+      <el-pagination
+        style="margin-top: 10px;display: flex;justify-content: flex-end;"
+        :current-page.sync="select.page"
+        :page-sizes="[20, 30, 40, 50]"
+        :page-size.sync="select.page_size"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="
           (e) => {
             select.page_size = e;
             select.page = 1;
             getList();
           }
         "
-                        @current-change="
+        @current-change="
           (e) => {
             select.page = e;
             getList();
           }
         "
-                />
-            
-        </el-card>
+      />
 
-        <AddOrderRefund
-                ref="AddOrderRefund"
-                
-                :is-show.sync="isShowAdd"
-                @refresh="getList"
-        />
-        <ShowOrderRefund
-                ref="ShowOrderRefund"
-        
-                :is-show.sync="isShowDetail"
-        />
-        
-    </div>
+    </el-card>
+
+    <AddOrderRefund
+      ref="AddOrderRefund"
+
+      :is-show.sync="isShowAdd"
+      @refresh="getList"
+    />
+    <ShowOrderRefund
+      ref="ShowOrderRefund"
+
+      :is-show.sync="isShowDetail"
+    />
+
+  </div>
 </template>
 
 <script>
-  import VxeUI from "vxe-pc-ui";
-  
-  import { authMixin } from "@/mixin/authMixin"
-  import { uploadSize } from "@/settings";
-  import { deepCopy } from "@/utils";
-  import { destroy, index, save } from "@/api/order-refund/order-refund";
-  import AddOrderRefund from "./components/AddOrderRefund.vue";
-  import ShowOrderRefund from "./components/ShowOrderRefund.vue";
-  import axios from "axios";
-  import { getToken } from "@/utils/auth";
-  
-  export default {
-    name: "OrderRefund",
-    mixins: [authMixin],
-    components: {
-        
-      AddOrderRefund,
-      ShowOrderRefund,
-    },
-    data() {
-      return {
-        uploadSize,
-        examineKey: 0,
-        isShowAdd: false,
-        isShowDetail: false,
+import VxeUI from 'vxe-pc-ui'
+
+import { authMixin } from '@/mixin/authMixin'
+import { uploadSize } from '@/settings'
+import { deepCopy } from '@/utils'
+import { destroy, index, save } from '@/api/order-refund/order-refund'
+import AddOrderRefund from './components/AddOrderRefund.vue'
+import ShowOrderRefund from './components/ShowOrderRefund.vue'
+import axios from 'axios'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'OrderRefund',
+  components: {
+
+    AddOrderRefund,
+    ShowOrderRefund
+  },
+  mixins: [authMixin],
+  data() {
+    return {
+      uploadSize,
+      examineKey: 0,
+      isShowAdd: false,
+      isShowDetail: false,
+
+      loading: false,
+      tableHeight: 400,
+      select: {
+        page: 1,
+        page_size: 20,
+        keyword: '',
+        show_relation: ['order']
 
-        loading: false,
-        tableHeight: 400,
-        select: {
-          page: 1,
-          page_size: 20,
-          keyword: '',
-          show_relation: [],
-          
-        },
-        total: 0,
-        allAlign: null,
-        tableData: [],
-        form: {
-          id: '',
-          
-            status: '',
-          
-        },
-      validRules: {
-          
       },
+      total: 0,
+      allAlign: null,
+      tableData: [],
+      form: {
+        id: '',
+
+        status: ''
 
-        
-      };
-    },
-    computed: {
-      isActiveStatus() {
-        return function (row) {
-          if (this.$refs["table"]) {
-            return this.$refs["table"].isEditByRow(row);
-          }
-        };
       },
-      isHasAuth() {
-        return function (auth) {
-          return this.auths_auth_mixin.indexOf(auth) !== -1
+      validRules: {
+
+      }
+
+    }
+  },
+  computed: {
+    isActiveStatus() {
+      return function(row) {
+        if (this.$refs['table']) {
+          return this.$refs['table'].isEditByRow(row)
         }
       }
     },
-    created() {
-      
-      this.getList();
-    },
-    mounted() {
-      this.bindToolbar()
-      this.calcTableHeight()
+    isHasAuth() {
+      return function(auth) {
+        return this.auths_auth_mixin.indexOf(auth) !== -1
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {
+    this.bindToolbar()
+    this.calcTableHeight()
+  },
+  methods: {
+    calcTableHeight() {
+      const clientHeight = document.documentElement.clientHeight
+      const cardTitle = document.querySelector('.el-card__header')?.getBoundingClientRect()?.height
+      const search = document.querySelector('.vxe-toolbar')?.getBoundingClientRect()?.height
+      const paginationHeight = (document.querySelector('.el-pagination')?.getBoundingClientRect()?.height ?? 0) + 10 // 分页的高度
+      const topHeight = 50 // 页面 头部
+      const padding = 80
+      const margin = 20
+      this.tableHeight =
+          clientHeight - cardTitle - search - paginationHeight - topHeight - padding - margin
     },
-    methods: {
-      calcTableHeight() {
-        let clientHeight = document.documentElement.clientHeight;
-        let cardTitle = document.querySelector(".el-card__header")?.getBoundingClientRect()?.height;
-        let search = document.querySelector(".vxe-toolbar")?.getBoundingClientRect()?.height;
-        let paginationHeight = (document.querySelector(".el-pagination")?.getBoundingClientRect()?.height ?? 0) + 10; //分页的高度
-        let topHeight = 50; //页面 头部
-        let padding = 80;
-        let margin = 20;
-        this.tableHeight =
-          clientHeight - cardTitle - search - paginationHeight - topHeight - padding - margin;
-      },
-      contextMenuClickEvent ({ menu, row, column }) {
-        switch (menu.code) {
-          case 'copy':
-            // 示例
-            if (row && column) {
-              if (VxeUI.clipboard.copy(row[column.field])) {
-                this.$message.success('已复制到剪贴板！')
-              }
-            }
-            break
-          case 'remove':
-            if (row && column) {
-              this.destroyRowEvent(row)
-            }
-          default:
-        }
-      },
-      async detail (row) {
-        await this.$refs["ShowOrderRefund"].getDetail(row.id)
-        this.isShowDetail = true
-      },
-
-      
-
-      uploadMethod(file) {
-        const formData = new FormData()
-        formData.append('file', file)
-        window.$_uploading = true
-        return axios.post(process.env.VUE_APP_UPLOAD_API, formData, {
-          headers: {
-            Authorization: `Bearer ${getToken()}`,
-          }
-        }).then((response) => {
-          window.$_uploading = false
-          if (response.status === 200 && !response.data.code) {
-            return {
-              response: response.data,
-              name: response.data.original_name,
-              url: response.data.url
+    contextMenuClickEvent({ menu, row, column }) {
+      switch (menu.code) {
+        case 'copy':
+          // 示例
+          if (row && column) {
+            if (VxeUI.clipboard.copy(row[column.field])) {
+              this.$message.success('已复制到剪贴板！')
             }
-          } else {
-            this.$message.error("上传失败")
           }
-        }).catch(_ => {
-          window.$_uploading = false
-        })
-      },
-      bindToolbar() {
-        this.$nextTick(() => {
-          if (this.$refs["table"] && this.$refs["toolbar"]) {
-            this.$refs["table"].connect(this.$refs["toolbar"]);
+          break
+        case 'remove':
+          if (row && column) {
+            this.destroyRowEvent(row)
           }
-        });
-      },
+        default:
+      }
+    },
+    async detail(row) {
+      await this.$refs['ShowOrderRefund'].getDetail(row.id)
+      this.isShowDetail = true
+    },
 
-      editRowEvent(row) {
-        if (this.$refs["table"]) {
-          this.$refs["table"].setEditRow(row);
+    uploadMethod(file) {
+      const formData = new FormData()
+      formData.append('file', file)
+      window.$_uploading = true
+      return axios.post(process.env.VUE_APP_UPLOAD_API, formData, {
+        headers: {
+          Authorization: `Bearer ${getToken()}`
         }
-      },
-      cancelRowEvent(row) {
-        if (this.$refs["table"]) {
-          this.$refs["table"].clearEdit().then(() => {
-            // 还原行数据
-            this.$refs["table"].revertData(row);
-          });
+      }).then((response) => {
+        window.$_uploading = false
+        if (response.status === 200 && !response.data.code) {
+          return {
+            response: response.data,
+            name: response.data.original_name,
+            url: response.data.url
+          }
+        } else {
+          this.$message.error('上传失败')
         }
-      },
-
-      async getList() {
-        this.loading = true;
-        try {
-          const res = await index(this.select, false);
-          this.tableData = res.data;
-          this.total = res.total;
-          this.loading = false;
-        } catch (err) {
-          console.error(err);
-          this.loading = false;
+      }).catch(_ => {
+        window.$_uploading = false
+      })
+    },
+    bindToolbar() {
+      this.$nextTick(() => {
+        if (this.$refs['table'] && this.$refs['toolbar']) {
+          this.$refs['table'].connect(this.$refs['toolbar'])
         }
-      },
+      })
+    },
 
-      async saveRowEvent(row) {
-        if (window.$_uploading) {
-          this.$message.warning("文件正在上传中")
-          return
-        }
-        try {
-          const errMap = await this.$refs["table"].validate();
-          if (errMap) {
-            throw new Error(errMap);
-          }
-          await this.$confirm("确认保存？", "提示", {
-            confirmButtonText: "确认",
-            cancelButtonText: "取消",
-          });
-          await this.$refs["table"].clearEdit();
-          let form = deepCopy(this.form);
-          for (const key in form) {
-            form[key] = row[key];
-          }
-          
-          this.loading = true;
-          await save(form, false);
-          await this.getList();
-          this.loading = false;
-        } catch (err) {
-          this.loading = false;
+    editRowEvent(row) {
+      if (this.$refs['table']) {
+        this.$refs['table'].setEditRow(row)
+      }
+    },
+    cancelRowEvent(row) {
+      if (this.$refs['table']) {
+        this.$refs['table'].clearEdit().then(() => {
+          // 还原行数据
+          this.$refs['table'].revertData(row)
+        })
+      }
+    },
+
+    async getList() {
+      this.loading = true
+      try {
+        const res = await index(this.select, false)
+        this.tableData = res.data
+        this.total = res.total
+        this.loading = false
+      } catch (err) {
+        console.error(err)
+        this.loading = false
+      }
+    },
+
+    async saveRowEvent(row) {
+      if (window.$_uploading) {
+        this.$message.warning('文件正在上传中')
+        return
+      }
+      try {
+        const errMap = await this.$refs['table'].validate()
+        if (errMap) {
+          throw new Error(errMap)
         }
-      },
-      async destroyRowEvent(row) {
-        try {
-          await this.$confirm("确认删除？", "提示", {
-            confirmButtonText: "确认",
-            cancelButtonText: "取消",
-          });
-          this.loading = true;
-          if (row.id) {
-            await destroy({
-              id: row.id,
-            },false);
-            await this.getList();
-          } else {
-            console.log(row);
-            this.tableData.splice(
-              this.tableData.findIndex((i) => i._X_ROW_KEY === row._X_ROW_KEY),
-              1
-            );
-          }
-          this.loading = false;
-        } catch (err) {
-          this.loading = false;
+        await this.$confirm('确认保存？', '提示', {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消'
+        })
+        await this.$refs['table'].clearEdit()
+        const form = deepCopy(this.form)
+        for (const key in form) {
+          form[key] = row[key]
         }
-      },
 
+        this.loading = true
+        await save(form, false)
+        await this.getList()
+        this.loading = false
+      } catch (err) {
+        this.loading = false
+      }
     },
-  };
+    async destroyRowEvent(row) {
+      try {
+        await this.$confirm('确认删除？', '提示', {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消'
+        })
+        this.loading = true
+        if (row.id) {
+          await destroy({
+            id: row.id
+          }, false)
+          await this.getList()
+        } else {
+          console.log(row)
+          this.tableData.splice(
+            this.tableData.findIndex((i) => i._X_ROW_KEY === row._X_ROW_KEY),
+            1
+          )
+        }
+        this.loading = false
+      } catch (err) {
+        this.loading = false
+      }
+    }
+
+  }
+}
 </script>
 
 <style scoped lang="scss">