leisure-core 0.4.84 → 0.4.86

package/index.js

@@ -4,7 +4,6 @@ import {
   formatMoney,
   formatCurrency,
 } from "leisure-js/common/dformat";
-import LeCommonPage from "./le-common-page/index.js";
 import LeLogin from "./le-login/index.js";
 import LeHome from "./le-home/index.js";
 import LeButton from "./le-button/index.js";
@@ -37,6 +36,11 @@ import LeFormItem from "./le-form-item/index";
 import LeInputNumber from "./le-input-number/index.js";
 import LeSelectOption from "./le-select-option/index.js";
 import LeVideo from "./le-video/index.js";
+import LeList from "./le-list/index.js";
+import LeListForm from "./le-list-form/index.js";
+import LeDatePicker from "./le-date-picker/index.js";
+import LeUrl from "./le-url/index.js";
+import LeSpan from "./le-span/index.js";
 
 const components = [
   LeArea,
@@ -64,7 +68,6 @@ const components = [
   LeHelp,
   LeHelpDetail,
   LeSelectUser,
-  LeCommonPage,
   LeSelect,
   LeSelectSearch,
   LeInput,
@@ -73,6 +76,11 @@ const components = [
   LeFormItem,
   LeSelectOption,
   LeVideo,
+  LeListForm,
+  LeList,
+  LeDatePicker,
+  LeSpan,
+  LeUrl,
 ];
 
 const install = function (Vue) {
@@ -168,7 +176,6 @@ export default {
   LeHelp,
   LeHelpDetail,
   LeSelectUser,
-  LeCommonPage,
   LeSelect,
   LeSelectSearch,
   LeInput,
@@ -177,4 +184,9 @@ export default {
   LeFormItem,
   LeSelectOption,
   LeVideo,
+  LeListForm,
+  LeList,
+  LeDatePicker,
+  LeUrl,
+  LeSpan,
 };

package/le-date-picker/index.js

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

package/le-date-picker/src/main.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-date-picker
+    v-model="internalValue"
+    v-bind="$attrs"
+    v-on="$listeners"
+    :class="['customClass', $attrs.class]"
+    :style="$attrs.style"
+    :type="type"
+  ></el-date-picker>
+</template>
+
+<script>
+export default {
+  name: "le-date-picker",
+  props: {
+    value: {
+      type: [Number, Date, String], // 可以接收时间戳、Date 对象或日期字符串
+      default: null,
+    },
+    type: {
+      type: String,
+      default: "date",
+    },
+    translateDate: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      internalValue: this.convertValueToInternal(this.value), // 初始化内部值
+    };
+  },
+  watch: {
+    // value(newVal) {
+    //   this.internalValue = this.convertValueToInternal(newVal);
+    // },
+    // internalValue(newVal) {
+    //   const outputValue = this.convertValueToOutput(newVal);
+    //   this.$emit("input", outputValue);
+    // },
+  },
+  methods: {
+    convertValueToInternal(value) {
+      if (this.translateDate && typeof value === "number") {
+        return new Date(value * 1000);
+      } else if (value instanceof Date) {
+        return value;
+      } else if (typeof value === "string" && !isNaN(Date.parse(value))) {
+        return new Date(value);
+      } else {
+        return null;
+      }
+    },
+    convertValueToOutput(value) {
+      if (this.translateDate && value instanceof Date) {
+        return Math.floor(value.getTime() / 1000);
+      } else {
+        return value;
+      }
+    },
+  },
+  mounted() {
+    // 如果需要在组件挂载后执行某些操作，可以在这里添加代码。
+  },
+};
+</script>

package/le-dialog-container/src/main.vue

@@ -1,13 +1,23 @@
 <template>
-  <el-dialog :width="width" :title="title" :visible.sync="dialogShow" :close-on-click-modal="closeMode" append-to-body
-    @close="closeDialog" v-el-drag-dialog>
+  <el-dialog
+    :width="width"
+    :title="title"
+    :visible.sync="dialogShow"
+    :close-on-click-modal="closeMode"
+    append-to-body
+    @close="closeDialog"
+    v-el-drag-dialog
+  >
     <slot v-if="dialogShow" />
     <div slot="footer" v-if="showFooter" class="dialog-footer">
       <template>
-        <el-button type="info" v-if="showCloseBtn" @click="closeDialog">关闭</el-button>
-        <el-button type="primary" v-if="showSaveBtn" @click="saveData">{{
+        <slot name="le-footer"></slot>
+        <le-button type="primary" v-if="showSaveBtn" @click="saveData">{{
           saveBtnText
-          }}</el-button>
+        }}</le-button>
+        <le-button type="info" v-if="showCloseBtn" @click="closeDialog"
+          >关闭</le-button
+        >
       </template>
     </div>
   </el-dialog>

package/le-libs/js/event.js

@@ -0,0 +1,3 @@
+import Vue from "vue";
+
+export const EventBus = new Vue();

package/le-list/index.js

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

package/{le-common-page → le-list}/src/main.vue

@@ -31,64 +31,30 @@
         :width="column.width"
       >
         <template #default="scope">
-          <span v-if="column.type && column.type === 'url'">
-            <a :href="scope.row[column.prop]" target="_blank">{{
-              scope.row[column.prop]
-            }}</a>
-          </span>
-          <span v-else-if="column.type && column.type === 'bool'">
-            {{ scope.row[column.prop] == 1 ? "是" : "否" }}
-          </span>
-          <span v-else>
-            <template v-if="column.formatter">
-              {{
-                column.formatter(
-                  scope.rows,
-                  scope.column,
-                  scope.row[column.prop]
-                )
-              }}
-            </template>
-            <template v-else>
-              {{ scope.row[column.prop] }}
-            </template>
-          </span>
+          <!-- <span v-html="renderColumnContent(column, scope)"></span> -->
+          <component
+            :is="renderColumnContent(column)"
+            v-bind="getComponentProps(column, scope)"
+          ></component>
         </template>
       </el-table-column>
       <el-table-column
         fixed="right"
         label="操作"
-        :width="opWidht"
+        :width="btnCellWidht"
         align="center"
       >
         <template slot-scope="scope">
           <div class="rowBtns">
-            <el-button
-              v-if="disBtn === 'edit'"
-              type="primary"
-              size="small"
-              @click="editItem(scope.row)"
+            <le-button @click="editItem(scope.row)" v-if="disBtn === 'edit'">
+              编辑</le-button
             >
-              编辑
-            </el-button>
-            <el-button
-              v-if="disBtn === 'detail'"
-              type="primary"
-              size="small"
-              @click="detail(scope.row)"
-              >详情
-            </el-button>
-            <el-popconfirm
-              v-if="isDispDelBtn"
-              :title="`该操作不可逆，确定删除？`"
-              @confirm="del(scope.row.id)"
+            <le-button @click="detail(scope.row)" v-if="disBtn === 'detail'">
+              详情</le-button
+            >
+            <le-button-msg @click="del(scope.row.id)" v-if="isDispDelBtn"
+              >删除</le-button-msg
             >
-              <template #reference>
-                <el-button type="danger" size="small" style="margin-left: 10px"
-                  >删除
-                </el-button>
-              </template>
-            </el-popconfirm>
             <div class="rowBtnsExt">
               <slot name="rowBtns" :scope="scope"></slot>
             </div>
@@ -108,44 +74,26 @@
       </el-pagination>
     </div>
     <le-dialog-container
-      :title="popFormTitle"
-      :width="popFormWidth"
+      :title="dialogTitle"
+      :width="dialogWidth"
       :showDialog="showDialog"
     >
-      <le-common-page-sub
-        :rulePop="rules"
-        :popFormLabelWidth="popFormLabelWidth"
-        :formColumns="formColumns"
-        :field-options="fieldOptions"
-        :formData="rowItem"
-        :isEditMode="isEditMode"
-        @closeDialog="closeDialog"
-        @saveData="saveData"
-        v-if="showDialog && isUserInnerSub"
-      >
-      </le-common-page-sub>
-      <slot name="sub" v-if="showDialog && !isUserInnerSub"></slot>
+      <slot name="sub" v-if="showDialog" :rowItem="rowItem"></slot>
     </le-dialog-container>
   </div>
 </template>
 <script>
-import { Number } from "core-js";
 import leMixins from "../../le-libs/mixins/main";
-import LeCommonPageSub from "./sub.vue";
-import LeButton from "../../le-button/index";
+import { EventBus } from "../../le-libs/js/event.js";
 export default {
-  name: "le-common-page",
+  name: "le-list",
   mixins: [leMixins],
-  components: {
-    LeCommonPageSub,
-    LeButton,
-  },
   props: {
     tableData: {
       type: Array,
       default: () => [],
     },
-    opWidht: {
+    btnCellWidht: {
       type: String,
       default: "130px",
     },
@@ -157,18 +105,10 @@ export default {
       type: Array,
       default: () => [],
     },
-    isUserInnerSub: {
-      type: Boolean,
-      default: true,
-    },
     formColumns: {
       type: Array,
       default: () => [],
     },
-    queryParams: {
-      type: Object,
-      default: () => {},
-    },
     rules: {
       type: Object,
       default: () => {},
@@ -185,22 +125,14 @@ export default {
       type: Boolean,
       default: false,
     },
-    popFormWidth: {
+    dialogWidth: {
       type: String,
       default: "60%",
     },
-    popFormLabelWidth: {
-      type: String,
-      default: "100px",
-    },
-    popFormTitle: {
+    dialogTitle: {
       type: String,
       default: "标题",
     },
-    popLabelWidth: {
-      type: String,
-      default: "100px",
-    },
     fieldOptions: {
       type: Object,
       default: () => {},
@@ -233,19 +165,55 @@ export default {
         pageSize: 10,
       },
       showDialog: false,
-      isEditMode: true,
+      handleStatus: 0, //处理状态 0:详情 1:新增 2:编辑
+      componentMap: {
+        url: {
+          component: "le-url",
+          prop: "value",
+        },
+        text: {
+          component: "le-span",
+          prop: "value",
+        },
+        image: {
+          component: "le-image",
+          prop: "src",
+          style: { width: "40px", height: "40px" },
+        },
+      },
     };
   },
   computed: {},
+  created() {
+    EventBus.$on("closeDialog", () => {
+      this.closeDialog();
+    });
+  },
+  destroyed() {
+    EventBus.$off("closeDialog");
+  },
   mounted() {
+    EventBus;
     this.getList();
   },
   methods: {
-    initFormItem() {
-      this.rowItem = this.formColumns.reduce((acc, item) => {
-        acc[item.prop] = item.default;
-        return acc;
-      }, {});
+    renderColumnContent(column) {
+      return this.componentMap[column.type]?.component || "le-span";
+    },
+    getComponentProps(column, scope) {
+      let value = scope.row[column.prop];
+      if (column.formatter) {
+        value = column.formatter(scope.rows, scope.column, value);
+      }
+      let ctype = this.componentMap[column.type];
+      value = this.format(ctype, value);
+      let prop = ctype?.prop || "value";
+      let param = {};
+      param[prop] = value || "";
+      if (ctype?.style) {
+        param.style = ctype.style;
+      }
+      return param;
     },
     onClickQuery() {
       this.searchData.pageNo = 1;
@@ -265,43 +233,34 @@ export default {
       });
     },
     editItem(row) {
-      this.isEditMode = true;
-      if (this.$listeners["handleData"]) {
-        this.$emit("handleData", row, (res) => {
-          this.rowItem = res;
-        });
-      } else {
-        this.rowItem = row;
-      }
+      this.handleStatus = 2;
+      this.$emit("handleStatus", this.handleStatus);
+      this.rowItem = row;
       this.showDialog = true;
     },
     detail(row) {
-      this.isEditMode = false;
-      if (this.$listeners["handleData"]) {
-        this.$emit("handleData", row, (res) => {
-          this.rowItem = res;
-          this.showDialog = true;
-        });
-      } else {
-        this.rowItem = row;
-        this.showDialog = true;
-      }
+      this.handleStatus = 0;
+      this.rowItem = row;
+      this.$emit("handleStatus", this.handleStatus);
+      this.showDialog = true;
     },
     addItem() {
-      this.isEditMode = true;
-      this.initFormItem();
+      this.handleStatus = 1;
+      this.$emit("handleStatus", this.handleStatus);
       this.showDialog = true;
-      this.$emit("newAddData")
-    },
-    saveData(params) {
-      this.$emit("saveForm", params, () => {
-        this.getList();
-        this.closeDialog();
-      });
+      this.rowItem = {};
     },
     closeDialog() {
       this.showDialog = false;
     },
+    format(type, value) {
+      const renderers = {
+        bool: () => (value == 1 ? "是" : "否"),
+        date: () => this.parseTime(value),
+        currency: () => `$${parseFloat(value).toFixed(2)}`,
+      };
+      return renderers[type]?.() || value;
+    },
   },
 };
 </script>

package/le-list-form/index.js

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

package/le-list-form/src/main.vue

@@ -0,0 +1,157 @@
+<template>
+  <el-form
+    :model="formPop"
+    :rules="rules"
+    ref="ruleForm"
+    :label-width="labelWidth"
+  >
+    <el-form-item
+      v-for="(item, index) in formColumns"
+      :key="index"
+      :label="item.label"
+      :prop="item.prop"
+    >
+      <div class="comContainerClass">
+        <component
+          :is="componentType(item.type)"
+          v-bind="mergeProps(getComponentProps(item.type), item.attr || {})"
+          v-model="formPop[item.prop]"
+          v-on="item.event"
+        >
+          <template v-if="item.type === 'radio'">
+            <el-radio
+              v-for="(option, index) in item.options"
+              :label="option.id"
+              :key="index + '_radio'"
+              >{{ option.label }}</el-radio
+            >
+          </template>
+          <template v-else-if="item.type === 'select'">
+            <le-select-option
+              :options="fieldOptions[item.prop]"
+              :label="item.kv.label"
+              :value="item.kv.key"
+              :keyNum="item.keyNum"
+            />
+          </template>
+        </component>
+      </div>
+    </el-form-item>
+    <el-form-item v-rfooter>
+      <le-button
+        type="primary"
+        @click="saveData"
+        v-if="handleStatus == 1 || handleStatus == 2"
+        >保存</le-button
+      >
+      <le-button type="info" @click="close()">关闭</le-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import { EventBus } from "../../le-libs/js/event.js";
+export default {
+  name: "le-list-form",
+  props: {
+    formColumns: {
+      type: Array,
+      default: () => [],
+    },
+    formData: {
+      type: Object,
+      default: () => {},
+    },
+    rules: {
+      type: Object,
+      default: () => {},
+    },
+    labelWidth: {
+      type: String,
+      default: "100px",
+    },
+    fieldOptions: {
+      type: Object,
+      default: () => {},
+    },
+    handleStatus: {
+      type: Number,
+      default: 0, //0:详情 1:新增 2:编辑
+    },
+  },
+  watch: {
+    formData: {
+      handler(val) {
+        this.formPop = val;
+      },
+      deep: true,
+      immediate: true,
+    },
+    fieldOptions: {
+      handler(val) {
+        this.options = val;
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  data() {
+    return {
+      componentMap: {
+        input: {
+          component: "le-input",
+          props: { placeholder: "请输入" },
+        },
+        number: {
+          component: "le-input-number",
+          props: { min: 1, max: 999999999 },
+        },
+        radio: { component: "el-radio-group", props: {} },
+        date: {
+          component: "le-date-picker",
+          props: {
+            format: "yyyy-MM-dd",
+            "value-format": "timestamp",
+            translateDate: true,
+          },
+        },
+        select: { component: "le-select", props: {} },
+      },
+      formPop: {},
+      options: {}, //{field1:[{value:1,label:'选项1'},{value:2,label:'选项2'}]}
+    };
+  },
+  computed: {},
+  mounted() {},
+  methods: {
+    componentType(type) {
+      return this.componentMap[type]?.component || "le-input";
+    },
+
+    getComponentProps(type) {
+      return this.componentMap[type]?.props || {};
+    },
+    mergeProps(defaultProps, customProps) {
+      return { ...defaultProps, ...customProps };
+    },
+    close() {
+      EventBus.$emit("closeDialog");
+      this.$emit("closeDialog");
+    },
+    saveData() {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          this.$emit("saveData", this.formPop, () => {});
+        } else {
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.comContainerClass {
+  display: flex;
+  display: -webkit-flex;
+}
+</style>

package/le-media/src/main.vue

@@ -33,7 +33,6 @@
               style="width: 200px; height: 200px"
               v-if="item.types == 1"
               :src="item.url"
-              alt=""
             />
             <le-video :src="item.url" v-else controls></le-video>
             <div class="name">

package/le-span/index.js

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

package/le-span/src/main.vue

@@ -0,0 +1,29 @@
+<template>
+  <span :class="['text-class', customClass]" :style="customStyle">{{
+    value
+  }}</span>
+</template>
+<script>
+export default {
+  name: "le-span",
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+    customClass: {
+      type: [String, Array, Object],
+      default: "",
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.text-class {
+}
+</style>

package/le-url/index.js

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

package/le-url/src/main.vue

@@ -0,0 +1,27 @@
+<template>
+  <a :href="value" target="_blank" rel="noopener noreferrer">
+    {{ value }}
+  </a>
+</template>
+<script>
+export default {
+  name: "le-url",
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leisure-core",
-  "version": "0.4.84",
+  "version": "0.4.86",
   "description": "leisure-core是京心数据基于vue2.x开发的一套后台管理系统桌面端组件库，封装了大量实用的UI控件模板,非常方便开发者快速搭建前端应用",
   "private": false,
   "author": "北方乐逍遥(zcx7878)",

package/le-common-page/index.js

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

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

@@ -1,152 +0,0 @@
-<template>
-  <el-form
-    :model="formPop"
-    :rules="rulePop"
-    ref="ruleForm"
-    :label-width="popFormLabelWidth"
-  >
-    <el-form-item
-      v-for="(item, index) in formColumns"
-      :key="index"
-      :label="item.label"
-      :prop="item.prop"
-    >
-      <div class="comContainerClass">
-        <le-input
-          v-if="!item.type || item.type === 'input'"
-          v-model="formPop[item.prop]"
-          v-bind="item.attr || {}"
-          v-on="item.event"
-        />
-        <le-input-number
-          v-else-if="item.type === 'number'"
-          v-model="formPop[item.prop]"
-          v-bind="item.attr || {}"
-          :min="item.min || 0"
-          :max="item.max || 9999999999"
-          label="item.label||''"
-          v-on="item.event"
-        />
-        <el-radio-group
-          v-else-if="item.type === 'radio'"
-          v-model="formPop[item.prop]"
-          v-on="item.event"
-        >
-          <el-radio
-            v-for="(option, index) in item.options"
-            :label="option.id"
-            :key="index + '_radio'"
-            >{{ option.label }}</el-radio
-          >
-        </el-radio-group>
-        <el-date-picker
-          v-else-if="item.type === 'date'"
-          v-model="formPop[item.prop]"
-          v-bind="item.attr || {}"
-          value-format="timestamp"
-          type="date"
-          placeholder="选择日期"
-        />
-        <le-select
-          v-else-if="item.type === 'select'"
-          v-model="formPop[item.prop]"
-          v-bind="item.attr || {}"
-          v-on="item.event"
-          placeholder="请选择"
-        >
-          <le-select-option
-            :options="fieldOptions[item.prop]"
-            :label="item.kv.label"
-            :value="item.kv.key"
-            :keyNum="item.keyNum"
-          />
-        </le-select>
-      </div>
-    </el-form-item>
-    <el-form-item v-rfooter>
-      <le-button type="primary" @click="saveData" v-if="isEditMode"
-        >保存</le-button
-      >
-      <le-button type="info" @click="close()">关闭</le-button>
-    </el-form-item>
-  </el-form>
-</template>
-<script>
-// import LeSelect from "../../le-select/index";
-// import LeInput from "../../le-input/index";
-// import LeButton from "../../le-button/index";
-export default {
-  name: "le-common-page-sub",
-  // components: { LeSelect, LeInput, LeButton },
-  props: {
-    formColumns: {
-      type: Array,
-      default: () => [],
-    },
-    formData: {
-      type: Object,
-      default: () => {},
-    },
-    rulePop: {
-      type: Object,
-      default: () => {},
-    },
-    popFormLabelWidth: {
-      type: String,
-      default: "100px",
-    },
-    fieldOptions: {
-      type: Object,
-      default: () => {},
-    },
-    isEditMode: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  watch: {
-    formData: {
-      handler(val) {
-        this.formPop = val;
-      },
-      deep: true,
-      immediate: true,
-    },
-    fieldOptions: {
-      handler(val) {
-        this.options = val;
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
-  data() {
-    return {
-      formPop: {},
-      options: {}, //{field1:[{value:1,label:'选项1'},{value:2,label:'选项2'}]}
-    };
-  },
-  computed: {},
-  mounted() {},
-  methods: {
-    close() {
-      this.$emit("closeDialog");
-    },
-    saveData() {
-      this.$refs["ruleForm"].validate((valid) => {
-        if (valid) {
-          this.$emit("saveData", this.formPop, () => {});
-        } else {
-          return false;
-        }
-      });
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.comContainerClass {
-  display: flex;
-  display: -webkit-flex;
-}
-</style>