leisure-core 0.4.41 → 0.4.43

package/index.js

@@ -4,6 +4,7 @@ import {
   formatMoney,
   formatCurrency,
 } from "leisure-js/common/dformat";
+import LeCommonPage from "./le-common-page/index.js";
 import LeArea from "./le-area/index.js";
 import LeLogin from "./le-login/index.js";
 import LeHome from "./le-home/index.js";
@@ -93,6 +94,7 @@ const components = [
   LeAdSpace,
   LeAd,
   LeCp,
+  LeCommonPage,
 ];
 
 const install = function (Vue) {
@@ -210,4 +212,5 @@ export default {
   LeAdSpace,
   LeAd,
   LeCp,
+  LeCommonPage,
 };

package/le-common-page/index.js

@@ -0,0 +1,7 @@
+import LeCommonPage from "./src/main.vue";
+
+LeCommonPage.install = function (Vue) {
+  Vue.component(LeCommonPage.name, LeCommonPage);
+};
+
+export default LeCommonPage;

package/le-common-page/src/main.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="page-container">
+    <el-form :inline="true" class="demo-form-inline" :model="searchData">
+      <slot name="paramSlot"></slot>
+      <el-form-item>
+        <slot></slot>
+        <el-button type="primary" @click="onClickQuery()">查询</el-button>
+        <el-button type="primary" @click="addItem()" v-if="isDispAddBtn"
+          >新建</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <el-table
+      :data="tableData"
+      border
+      row-key="id"
+      :header-cell-style="{ 'text-align': 'center' }"
+      :cell-style="{ 'text-align': 'center' }"
+      stripe
+      style="width: 100%"
+    >
+      <el-table-column
+        v-for="column in tableColumns"
+        :key="column.prop"
+        :prop="column.prop"
+        :label="column.label"
+      >
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" align="center">
+        <template slot-scope="scope">
+          <div class="rowBtns">
+            <el-button type="primary" size="small" @click="editItem(scope.row)"
+              >编辑</el-button
+            >
+            <el-popconfirm
+              v-if="isDispDelBtn"
+              :title="`该操作不可逆，确定删除？`"
+              @confirm="del(scope.row.id)"
+            >
+              <template #reference>
+                <el-button type="danger" size="small" style="margin-left: 10px"
+                  >删除
+                </el-button>
+              </template>
+            </el-popconfirm>
+            <div class="rowBtnsExt">
+              <slot name="rowBtns"></slot>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="text-align: center; margin-top: 30px">
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :current-page="searchData.pageNo"
+        :total="searchData.total"
+        :page-size="searchData.pageSize"
+        @current-change="current_change"
+      >
+      </el-pagination>
+    </div>
+    <le-dialog-container
+      title="商品详情"
+      :width="popFormWidth"
+      :showDialog="showDialog"
+      @close="closeDialog"
+      :showFooter="true"
+      @saveData="saveData"
+    >
+      <el-form
+        :model="formPop"
+        :rules="rulePop"
+        ref="ruleForm"
+        label-width="100px"
+      >
+        <el-form-item
+          v-for="(item, index) in tableColumns"
+          :key="index"
+          :label="item.label"
+          :prop="item.prop"
+        >
+          <el-input v-model="formPop[item.prop]" />
+        </el-form-item>
+      </el-form>
+    </le-dialog-container>
+  </div>
+</template>
+<script>
+export default {
+  name: "le-common-page",
+  props: {
+    tableData: {
+      type: Array,
+      default: () => [],
+    },
+    tableColumns: {
+      type: Array,
+      default: () => [],
+    },
+    queryParams: {
+      type: Object,
+      default: () => {},
+    },
+    rulePop: {
+      type: Object,
+      default: () => {},
+    },
+    searchParam: {
+      type: Object,
+      default: () => {},
+    },
+    isDispAddBtn: {
+      type: Boolean,
+      default: true,
+    },
+    isDispDelBtn: {
+      type: Boolean,
+      default: false,
+    },
+    popFormWidth: {
+      type: String,
+      default: "80%",
+    },
+    popLabelWidth: {
+      type: String,
+      default: "100px",
+    },
+  },
+  watch: {
+    searchParam: {
+      handler(val) {
+        this.searchData = Object.assign({}, this.searchData, val);
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  data() {
+    return {
+      formPop: {},
+      searchData: {
+        pageNo: 1,
+        total: 1,
+        pageSize: 10,
+      },
+      showDialog: false,
+    };
+  },
+  computed: {},
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    onClickQuery() {
+      this.searchData.pageNo = 1;
+      this.getList();
+    },
+    getList() {
+      let params = this.searchData;
+      this.$emit("getList", params);
+    },
+    current_change(currentPage) {
+      this.searchData.pageNo = currentPage;
+      this.getList();
+    },
+    del(id) {
+      this.$emit("delRow", id, () => {
+        this.getList();
+      });
+    },
+    editItem(row) {
+      this.formPop = row;
+      this.showDialog = true;
+    },
+    addItem() {
+      this.formPop = {};
+      this.showDialog = true;
+    },
+    saveData() {
+      let params = JSON.stringify(this.formPop);
+      if (params == "{}") return;
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          this.$emit("saveForm", this.formPop, () => {
+            this.getList();
+          });
+        } else {
+          return false;
+        }
+      });
+    },
+    closeDialog() {
+      this.formPop = {};
+      this.showDialog = false;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.rowBtns {
+  display: flex;
+  display: -webkit-flex;
+  justify-content: center;
+}
+
+.rowBtnsExt {
+  margin-left: 8px;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leisure-core",
-  "version": "0.4.41",
+  "version": "0.4.43",
   "description": "leisure-core是leisure-ui-core的简称,是京心数据基于vue2.0开发的一套后台系统框架与js库,包含登录,首页框架等",
   "private": false,
   "author": "北方乐逍遥(zcx7878)",