页面优化

src/components/product-select/script.js

@@ -1,4 +1,4 @@
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Emit, Prop, Vue } from "vue-property-decorator";
 import Model from "@/models/admin/products";
 
 @Component
@@ -30,7 +30,8 @@ export default class ProductSelect extends Vue {
     this.items = items;
   }
 
+  @Emit()
   change(value) {
-    this.$emit("change", value);
+    return value;
   }
 }

src/views/ads/list/form/index.vue

@@ -60,77 +60,4 @@
   </Modal>
 </template>
 
-<script>
-import { Component, Vue } from "vue-property-decorator";
-import FormMixin from "view-ui-admin/src/mixins/form";
-
-const module = "ads";
-
-@Component({
-  mixins: [FormMixin]
-})
-export default class ListForm extends Vue {
-  data() {
-    return {
-      cForm: {
-        id: 0,
-        modal: false,
-        loading: true,
-        model: this.getFormInitModel(),
-        rules: {
-          title: [
-            {
-              required: true,
-              message: "标题不能为空"
-            }
-          ],
-          pictureId: [
-            {
-              required: true,
-              message: "图片不能为空"
-            }
-          ]
-        }
-      }
-    };
-  }
-
-  getFormInitModel() {
-    return {
-      status: 1
-    };
-  }
-
-  show(detail) {
-    this.cForm.modal = true;
-
-    if (detail && detail.id) {
-      this.cForm.id = detail.id;
-      this.initFormFields(detail);
-    } else {
-      this.cForm.id = 0;
-    }
-  }
-
-  submit() {
-    this.$refs.form.validate(async valid => {
-      if (valid) {
-        const { id, model } = this.cForm;
-        const { data } = await this.$store.dispatch(
-          `${module}/${id ? "put" : "post"}`,
-          {
-            id,
-            body: model
-          }
-        );
-
-        this.cForm.modal = false;
-        this.$Message.success(`${id ? "编辑" : "新增"}成功`);
-        this.$emit("get-list", data);
-      }
-
-      this.fixFormButtonLoading();
-    });
-  }
-}
-</script>
+<script src="./script.js"></script>

src/views/ads/list/form/script.js

@@ -0,0 +1,72 @@
+import { Component, Vue } from "vue-property-decorator";
+import FormMixin from "view-ui-admin/src/mixins/form";
+
+const module = "ads";
+
+@Component({
+  mixins: [FormMixin]
+})
+export default class ListForm extends Vue {
+  data() {
+    return {
+      cForm: {
+        id: 0,
+        modal: false,
+        loading: true,
+        model: this.getFormInitModel(),
+        rules: {
+          title: [
+            {
+              required: true,
+              message: "标题不能为空"
+            }
+          ],
+          pictureId: [
+            {
+              required: true,
+              message: "图片不能为空"
+            }
+          ]
+        }
+      }
+    };
+  }
+
+  getFormInitModel() {
+    return {
+      status: 1
+    };
+  }
+
+  show(detail) {
+    this.cForm.modal = true;
+
+    if (detail && detail.id) {
+      this.cForm.id = detail.id;
+      this.initFormFields(detail);
+    } else {
+      this.cForm.id = 0;
+    }
+  }
+
+  submit() {
+    this.$refs.form.validate(async valid => {
+      if (valid) {
+        const { id, model } = this.cForm;
+        const { data } = await this.$store.dispatch(
+          `${module}/${id ? "put" : "post"}`,
+          {
+            id,
+            body: model
+          }
+        );
+
+        this.cForm.modal = false;
+        this.$Message.success(`${id ? "编辑" : "新增"}成功`);
+        this.$emit("get-list", data);
+      }
+
+      this.fixFormButtonLoading();
+    });
+  }
+}

src/views/ads/list/index.vue

@@ -62,196 +62,4 @@
   </div>
 </template>
 
-<script>
-import { Component, Vue } from "vue-property-decorator";
-import { mapState } from "vuex";
-import ListForm from "./form";
-import RouteParamsMixin from "view-ui-admin/src/mixins/route-params";
-import ListMixin from "view-ui-admin/src/mixins/list";
-
-const module = "ads";
-const initWhere = {
-  status: {
-    $eq: ""
-  },
-  title: {
-    $like: ""
-  }
-};
-
-@Component({
-  mixins: [RouteParamsMixin, ListMixin],
-  components: {
-    "c-list-form": ListForm
-  },
-  computed: mapState({
-    list: state => state[module].list
-  })
-})
-export default class extends Vue {
-  data() {
-    const { ListColumnWidth, OrderAction } = this.$consts;
-
-    return {
-      cList: {
-        columns: [
-          {
-            type: "selection",
-            width: 60
-          },
-          {
-            title: "图片",
-            width: 118,
-            render: (h, { row }) => {
-              return h("c-list-image", {
-                props: {
-                  src: this.$helpers.getImageUrl({
-                    id: row.pictureId,
-                    width: 80,
-                    height: 80
-                  })
-                }
-              });
-            }
-          },
-          {
-            title: "标题",
-            key: "title",
-            minWidth: ListColumnWidth.Title
-          },
-          {
-            title: "链接",
-            key: "link",
-            width: 300
-          },
-          {
-            title: "状态",
-            width: 80,
-            render: (h, { row }) =>
-              h(
-                "span",
-                null,
-                this.$helpers.getItem(
-                  this.dicts.PublishStatus,
-                  "value",
-                  row.status
-                )["label"]
-              )
-          },
-          {
-            title: "操作",
-            key: "action",
-            width: 340,
-            render: (h, { row }) =>
-              h("div", [
-                h(
-                  "Button",
-                  {
-                    on: {
-                      click: () => {
-                        this.$refs.form.show(row);
-                      }
-                    }
-                  },
-                  "编辑"
-                ),
-                h("c-dropdown", {
-                  props: {
-                    width: 90,
-                    title: "修改状态",
-                    options: this.dicts.PublishStatus
-                  },
-                  on: {
-                    click: action => {
-                      this.changeStatus(row.id, action);
-                    }
-                  }
-                }),
-                h("c-dropdown", {
-                  attrs: {
-                    title: "排序",
-                    options: OrderAction
-                  },
-                  on: {
-                    click: action => {
-                      this.order(row.id, action);
-                    }
-                  }
-                }),
-                h("c-confirm-button", {
-                  props: {
-                    buttonText: "删除",
-                    confirmText: "确认删除？"
-                  },
-                  on: {
-                    ok: () => {
-                      this.confirmDelete(row.id);
-                    }
-                  }
-                })
-              ])
-          }
-        ],
-        cSearch: {
-          where: this.$helpers.deepCopy(initWhere)
-        }
-      }
-    };
-  }
-
-  async beforeRouteUpdate(to, from, next) {
-    this.initListSearchWhere(initWhere);
-    this.getList();
-    next();
-  }
-
-  async created() {
-    this.initListSearchWhere(initWhere);
-    this.getList();
-  }
-
-  getList() {
-    return this.$store.dispatch(`${module}/getList`, {
-      query: {
-        offset: (this.listPageCurrent - 1) * this.$consts.PageSize,
-        limit: this.$consts.PageSize,
-        where: this.listSearchWhere || initWhere,
-        order: [["order", "DESC"]]
-      }
-    });
-  }
-
-  async confirmDelete(ids) {
-    await this.$store.dispatch(`${module}/delete`, { id: ids });
-    this.$Message.success("删除成功");
-
-    const { items } = await this.getList();
-    !items.length && this.goListPrevPage();
-  }
-
-  async changeStatus(id, action) {
-    await this.$store.dispatch(`${module}/put`, {
-      id,
-      body: {
-        status: action
-      }
-    });
-    this.$Message.success("修改状态成功");
-    this.getList();
-  }
-
-  async order(id, action) {
-    await this.$store.dispatch(`${module}/postAction`, {
-      id,
-      action: "order",
-      query: {
-        where: this.listSearchWhere || initWhere
-      },
-      body: { action }
-    });
-
-    this.$Message.success("排序成功");
-    this.getList();
-  }
-}
-</script>
+<script src="./script.js"></script>