commit message

manager/src/views/my-components/lili/circle-loading.vue

@@ -0,0 +1,18 @@
+<template>
+  <div style="display: inline-block;">
+    <Icon type="ios-loading" size="18" color="#2d8cf0" class="spin-icon-load"></Icon>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "circleLoading"
+};
+</script>
+
+<style lang="scss" scoped>
+.spin-icon-load {
+  animation: ani-demo-spin 1s linear infinite;
+}
+</style>
+

manager/src/views/my-components/lili/count-down-button.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <Button
+      :countTime="countTime"
+      :loading="loading"
+      :type="type"
+      :size="size"
+      :ghost="ghost"
+      :disabled="disabled||clicked"
+      :icon="icon"
+      :shape="shape"
+      :long="long"
+      @click="handleClick"
+    >{{buttonText}}</Button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "iconChoose",
+  props: {
+    text: {
+      type: String,
+      default: "提交"
+    },
+    autoCountDown: {
+      type: Boolean,
+      default: true
+    },
+    countTime: {
+      type: [Number, String],
+      default: 60
+    },
+    suffixText: {
+      type: String,
+      default: "后重试"
+    },
+    type: String,
+    size: String,
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    ghost: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    icon: String,
+    shape: String,
+    long: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      buttonText: this.text,
+      count: Number(this.countTime),
+      clicked: false
+    };
+  },
+  methods: {
+    init() {},
+    handleClick() {
+      if (this.autoCountDown) {
+        this.clicked = true;
+        this.countDown();
+      }
+      this.$emit("on-click", true);
+    },
+    startCountDown() {
+      this.clicked = true;
+      this.countDown();
+    },
+    countDown() {
+      let that = this;
+      if (this.count == 0) {
+        this.clicked = false;
+        this.count = this.countTime;
+        this.buttonText = this.text;
+        return;
+      } else {
+        this.buttonText = this.count + " 秒" + this.suffixText;
+        this.count--;
+      }
+      setTimeout(function() {
+        that.countDown();
+      }, 1000);
+    },
+    setText(value) {
+      if (value === this.buttonText) {
+        return;
+      }
+      this.buttonText = value;
+    },
+  },
+  watch: {
+    text(val) {
+      this.setText(val);
+    }
+  },
+  mounted() {
+    this.init();
+  }
+};
+</script>
+
+<style lang="scss">
+</style>
+

manager/src/views/my-components/lili/department-choose.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <Cascader
+      v-model="selectDep"
+      :data="department"
+      :load-data="loadData"
+      @on-change="handleChangeDep"
+      change-on-select
+      filterable
+      clearable
+      placeholder="请选择"
+    ></Cascader>
+  </div>
+</template>
+
+<script>
+import { initDepartment, loadDepartment } from "@/api/index";
+export default {
+  name: "departmentChoose",
+  props: {
+
+  },
+  data() {
+    return {
+      selectDep: [],
+      department: []
+    };
+  },
+  methods: {
+    initDepartmentData() {
+      initDepartment().then(res => {
+        if (res.success) {
+          res.result.forEach(function(e) {
+            if (e.isParent) {
+              e.value = e.id;
+              e.label = e.title;
+              e.loading = false;
+              e.children = [];
+            } else {
+              e.value = e.id;
+              e.label = e.title;
+            }
+            if (e.status == -1) {
+              e.label = "[已禁用] " + e.label;
+              e.disabled = true;
+            }
+          });
+          this.department = res.result;
+        }
+      });
+    },
+    loadData(item, callback) {
+      item.loading = true;
+      loadDepartment(item.value).then(res => {
+        item.loading = false;
+        if (res.success) {
+          res.result.forEach(function(e) {
+            if (e.isParent) {
+              e.value = e.id;
+              e.label = e.title;
+              e.loading = false;
+              e.children = [];
+            } else {
+              e.value = e.id;
+              e.label = e.title;
+            }
+            if (e.status == -1) {
+              e.label = "[已禁用] " + e.label;
+              e.disabled = true;
+            }
+          });
+          item.children = res.result;
+          callback();
+        }
+      });
+    },
+    handleChangeDep(value, selectedData) {
+      let departmentId = "";
+      // 获取最后一个值
+      if (value && value.length > 0) {
+        departmentId = value[value.length - 1];
+      }
+      this.$emit("on-change", departmentId);
+    },
+    clearSelect() {
+      this.selectDep = [];
+    }
+  },
+  created() {
+    this.initDepartmentData();
+  }
+};
+</script>
+
+<style lang="scss">
+</style>
+

manager/src/views/my-components/lili/department-tree-choose.vue

@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <div style="display:flex;">
+      <Input
+        v-model="departmentTitle"
+        readonly
+        style="margin-right:10px;"
+        :placeholder="placeholder"
+        :clearable="clearable"
+        @on-clear="clearSelect"
+      />
+      <Poptip transfer trigger="click" placement="right" title="选择部门" width="250">
+        <Button icon="md-list">选择部门</Button>
+        <div slot="content">
+          <Input
+            v-model="searchKey"
+            suffix="ios-search"
+            @on-change="searchDep"
+            placeholder="输入部门名搜索"
+            clearable
+          />
+          <div class="dep-tree-bar">
+            <Tree
+              :data="dataDep"
+              :load-data="loadData"
+              @on-select-change="selectTree"
+            ></Tree>
+            <Spin size="large" fix v-if="depLoading"></Spin>
+          </div>
+        </div>
+      </Poptip>
+    </div>
+  </div>
+</template>
+
+<script>
+import {initDepartment, loadDepartment, searchDepartment} from "@/api/index";
+
+export default {
+  name: "departmentTreeChoose",
+  props: {
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    placeholder: {
+      type: String,
+      default: "点击选择部门"
+    }
+  },
+  data() {
+    return {
+      depLoading: false,
+      departmentTitle: "",
+      searchKey: "",
+      dataDep: [],
+      selectDep: [],
+      departmentId: []
+    };
+  },
+  methods: {
+    initDepartmentData() {
+      initDepartment().then(res => {
+        if (res.success) {
+          res.result.forEach(function (e) {
+            if (e.isParent) {
+              e.loading = false;
+              e.children = [];
+            }
+            if (e.status == -1) {
+              e.title = "[已禁用] " + e.title;
+              e.disabled = true;
+            }
+          });
+          this.dataDep = res.result;
+        }
+      });
+    },
+    loadData(item, callback) {
+      loadDepartment(item.id).then(res => {
+        if (res.success) {
+          res.result.forEach(function (e) {
+            if (e.isParent) {
+              e.loading = false;
+              e.children = [];
+            }
+            if (e.status == -1) {
+              e.title = "[已禁用] " + e.title;
+              e.disabled = true;
+            }
+          });
+          callback(res.result);
+        }
+      });
+    },
+    searchDep() {
+      // 搜索部门
+      if (this.searchKey) {
+        this.depLoading = true;
+        searchDepartment({title: this.searchKey}).then(res => {
+          this.depLoading = false;
+          if (res.success) {
+            res.result.forEach(function (e) {
+              if (e.status == -1) {
+                e.title = "[已禁用] " + e.title;
+                e.disabled = true;
+              }
+            });
+            this.dataDep = res.result;
+          }
+        });
+      } else {
+        this.initDepartmentData();
+      }
+    },
+    selectTree(v) {
+      if (v.length === 0) {
+        this.$emit("on-change", null);
+        this.departmentId = "";
+        this.departmentTitle = "";
+        return
+      }
+      this.departmentId = v[0].id;
+      this.departmentTitle = v[0].title;
+      let department = {
+        departmentId: this.departmentId,
+        departmentTitle: this.departmentTitle
+      }
+      this.$emit("on-change", department);
+    },
+    clearSelect() {
+      this.departmentId = [];
+      this.departmentTitle = "";
+      this.initDepartmentData();
+      if (this.multiple) {
+        this.$emit("on-change", []);
+      } else {
+        this.$emit("on-change", "");
+      }
+      this.$emit("on-clear");
+    },
+    setData(ids, title) {
+      this.departmentTitle = title;
+      if (this.multiple) {
+        this.departmentId = ids;
+      } else {
+        this.departmentId = [];
+        this.departmentId.push(ids);
+      }
+      // this.$emit("on-change", this.departmentId);
+    }
+  },
+  created() {
+    this.initDepartmentData();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.dep-tree-bar {
+  position: relative;
+  min-height: 80px;
+  max-height: 500px;
+  overflow: auto;
+  margin-top: 5px;
+}
+
+.dep-tree-bar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.dep-tree-bar::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 0 2px #d1d1d1;
+  background: #e4e4e4;
+}
+
+</style>
+

manager/src/views/my-components/lili/editor.vue

@@ -0,0 +1,240 @@
+<template>
+  <div>
+    <div style="position:relative">
+      <div :id="id" style="text-align: left;width:850px"></div>
+      <div v-if="showExpand">
+        <div class="e-menu e-code" @click="editHTML">
+          <Icon type="md-code-working" size="22" />
+        </div>
+        <div class="e-menu e-preview" @click="fullscreenModal=true">
+          <Icon type="ios-eye" size="24" />
+        </div>
+        <div class="e-menu e-trash" @click="clear">
+          <Icon type="md-trash" size="18" />
+        </div>
+      </div>
+    </div>
+
+    <Modal
+      title="编辑html代码"
+      v-model="showHTMLModal"
+      :mask-closable="false"
+      :width="900"
+      :fullscreen="full"
+    >
+      <Input
+        v-if="!full"
+        v-model="dataEdit"
+        :rows="15"
+        type="textarea"
+        style="max-height:60vh;overflow:auto;"
+      />
+      <Input v-if="full" v-model="dataEdit" :rows="32" type="textarea" />
+      <div slot="footer">
+        <Button @click="full=!full" icon="md-expand">全屏开/关</Button>
+        <Button @click="editHTMLOk" type="primary" icon="md-checkmark-circle-outline">确定保存</Button>
+      </div>
+    </Modal>
+    <Modal title="预览" v-model="fullscreenModal" fullscreen>
+      <div v-html="data">{{data}}</div>
+      <div slot="footer">
+        <Button @click="fullscreenModal=false">关闭</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import { uploadFile } from "@/api/index";
+import E from "wangeditor";
+import xss from "xss";
+// 表情包配置 自定义表情可在该js文件中统一修改
+import { sina } from "@/libs/emoji";
+var editor = null;
+export default {
+  name: "editor",
+  props: {
+    id: {
+      type: String,
+      default: "editor"
+    },
+    value: String,
+    base64: {
+      type: Boolean,
+      default: false
+    },
+    showExpand: {
+      type: Boolean,
+      default: true
+    },
+    openXss: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      editor: null,
+      data: this.value, // 富文本数据
+      dataEdit: "", // 编辑数据
+      showHTMLModal: false, // 显示html
+      full: false, // html全屏开关
+      fullscreenModal: false // 显示全屏预览
+    };
+  },
+  methods: {
+    initEditor() {
+      let that = this;
+      // 详见wangeditor3官网文档 https://www.kancloud.cn/wangfupeng/wangeditor3/332599
+      editor = new E(`#${this.id}`);
+      // 编辑内容绑定数据
+      editor.config.onchange = html => {
+        if (this.openXss) {
+          this.data = xss(html);
+        } else {
+          this.data = html;
+        }
+        this.$emit("input", this.data);
+        this.$emit("on-change", this.data);
+      };
+      editor.config.showFullScreen = false;
+      // z-index
+      editor.config.zIndex = 100;
+      if (this.base64) {
+        // 使用 base64 保存图片
+        editor.config.uploadImgShowBase64 = true;
+      } else {
+        // 配置上传图片服务器端地址
+        editor.config.uploadImgServer = uploadFile;
+        // lili如要header中传入token鉴权
+        editor.config.uploadImgHeaders = {
+          accessToken: that.getStore("accessToken")
+        };
+        editor.config.uploadFileName = "file";
+        editor.config.uploadImgHooks = {
+          before: function(xhr, editor, files) {
+            // 图片上传之前触发
+          },
+          success: function(xhr, editor, result) {
+            // 图片上传并返回结果，图片插入成功之后触发
+          },
+          fail: function(xhr, editor, result) {
+            // 图片上传并返回结果，但图片插入错误时触发
+            that.$Message.error("上传图片失败");
+          },
+          error: function(xhr, editor) {
+            // 图片上传出错时触发
+            that.$Message.error("上传图片出错");
+          },
+          timeout: function(xhr, editor) {
+            // 图片上传超时时触发
+            that.$Message.error("上传图片超时");
+          },
+          // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
+          customInsert: function(insertImg, result, editor) {
+            if (result.success == true) {
+              let url = result.result;
+              insertImg(url);
+              that.$Message.success("上传图片成功");
+            } else {
+              that.$Message.error(result.message);
+            }
+          }
+        };
+      }
+      editor.config.customAlert = function(info) {
+        // info 是需要提示的内容
+        // that.$Message.info(info);
+      };
+      // 字体
+      editor.config.fontNames = ["微软雅黑", "宋体", "黑体", "Arial"];
+      // 表情面板可以有多个 tab ，因此要配置成一个数组。数组每个元素代表一个 tab 的配置
+      editor.config.emotions = [
+        {
+          // tab 的标题
+          title: "新浪",
+          // type -> 'emoji' / 'image'
+          type: "image",
+          // content -> 数组
+          content: sina
+        }
+      ];
+      editor.create();
+      if (this.value) {
+        if (this.openXss) {
+          editor.txt.html(xss(this.value));
+        } else {
+          editor.txt.html(this.value);
+        }
+      }
+    },
+    editHTML() {
+      this.dataEdit = this.data;
+      this.showHTMLModal = true;
+    },
+    editHTMLOk() {
+      editor.txt.html(this.dataEdit);
+      this.$emit("input", this.data);
+      this.$emit("on-change", this.data);
+      this.showHTMLModal = false;
+    },
+    clear() {
+      this.$Modal.confirm({
+        title: "确认清空",
+        content: "确认要清空编辑器内容？清空后不能撤回",
+        onOk: () => {
+          this.data = "";
+          editor.txt.html(this.data);
+          this.$emit("input", this.data);
+          this.$emit("on-change", this.data);
+        }
+      });
+    },
+    setData(value) {
+      if (!editor) {
+        this.initEditor();
+      }
+      if (value && value != this.data) {
+        this.data = value;
+        editor.txt.html(this.data);
+        this.$emit("input", this.data);
+        this.$emit("on-change", this.data);
+      }
+    }
+  },
+  watch: {
+    value(val) {
+      this.setData(val);
+    }
+  },
+  mounted() {
+    this.initEditor();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.e-menu {
+
+  z-index: 101;
+  position: absolute;
+  cursor: pointer;
+  color: #999;
+  :hover {
+    color: #333;
+  }
+}
+.e-code {
+  top: 6px;
+  left: 818px;
+}
+.e-preview {
+  top: 46px;
+  left: 174px;
+}
+.e-trash {
+  top: 46px;
+  left: 215px;
+}
+</style>
+

manager/src/views/my-components/lili/icon-choose.vue

@@ -0,0 +1,221 @@
+<template>
+  <div>
+    <div style="display:flex">
+      <Input
+        v-model="currentValue"
+        @on-change="handleChange"
+        :placeholder="placeholder"
+        :size="size"
+        :disabled="disabled"
+        :readonly="readonly"
+        :maxlength="maxlength"
+        :icon="currentValue"
+      />
+      <Button
+        @click="iconModalVisible=true"
+        :size="size"
+        :disabled="disabled"
+        :icon="icon"
+        style="margin-left:10px"
+      >选择图标</Button>
+    </div>
+
+    <Modal
+      title="选择图标"
+      v-model="iconModalVisible"
+      :width="950"
+      :styles="{top: '30px'}"
+      footer-hide
+      :z-index="1060"
+    >
+      <div class="icon-search">
+        <input
+          type="text"
+          v-model="key"
+          :placeholder="tip"
+          @input="handleInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+        >
+      </div>
+      <div class="icon-block icon-bar">
+        <div class="icon-wrap" v-for="(item, i) in iconData" :key="i" @click="hanleChoose(item)">
+          <div class="icons-item">
+            <Icon :type="item" style="font-size: 32px;"/>
+            <p>{{item}}</p>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import { icons } from "@/libs/icon";
+export default {
+  name: "iconChoose",
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+    size: String,
+    placeholder: {
+      type: String,
+      default: "输入图标名或选择图标"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    maxlength: Number,
+    icon: {
+      type: String,
+      default: "md-ionic"
+    }
+  },
+  data() {
+    return {
+      iconModalVisible: false,
+      currentValue: this.value,
+      iconData: [],
+      key: "",
+      tip: "输入英文关键词搜索，比如 success"
+    };
+  },
+  methods: {
+    init() {
+      let re = [];
+      icons.forEach(e => {
+        e.icons.forEach(item => {
+          re.push(item);
+        });
+      });
+      this.iconData = re;
+    },
+    handleInput() {
+      if (this.key) {
+        // 搜索
+        let re = [];
+        icons.forEach(e => {
+          e.tags.forEach(item => {
+            if (item.indexOf(this.key) >= 0) {
+              e.icons.forEach(r => {
+                re.push(r);
+              });
+            }
+          });
+        });
+        this.iconData = re;
+      } else {
+        this.init();
+      }
+    },
+    handleFocus() {
+      if (!this.key) {
+        this.tip = "";
+      }
+    },
+    handleBlur() {
+      if (!this.key) {
+        this.tip = "输入英文关键词搜索，比如 success";
+      }
+    },
+    handleChange(v) {
+      this.$emit("input", this.currentValue);
+      this.$emit("on-change", this.currentValue);
+    },
+    setCurrentValue(value) {
+      if (value === this.currentValue) {
+        return;
+      }
+      this.currentValue = value;
+    },
+    hanleChoose(v) {
+      this.currentValue = v;
+      this.$emit("input", this.currentValue);
+      this.$emit("on-change", this.currentValue);
+      this.iconModalVisible = false;
+    }
+  },
+  watch: {
+    value(val) {
+      this.setCurrentValue(val);
+    }
+  },
+  created() {
+    this.init();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.icon-search {
+  position: relative;
+  margin: 20px auto 30px;
+  text-align: center;
+  input {
+    width: 500px;
+    box-sizing: border-box;
+    border: 0;
+    border-radius: 4px;
+    background: #f5f5f5;
+    text-align: center;
+    font-size: 14px;
+    outline: none;
+    margin: 0 auto;
+    padding: 8px 0;
+  }
+}
+.icon-block {
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 500px;
+  overflow: auto;
+}
+.icon-bar {
+  overflow: auto;
+  overflow-x: hidden;
+}
+.icon-bar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.icon-bar::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background: #c3c3c3;
+}
+
+.icon-bar::-webkit-scrollbar-track {
+  background: #fff;
+}
+.icon-wrap {
+  :hover {
+    color: #1890ff;
+    transition: color 0.3s;
+  }
+}
+.icons-item {
+  margin: 6px 6px 6px 0;
+  width: 145px;
+  text-align: center;
+  list-style: none;
+  cursor: pointer;
+  height: 100px;
+  color: #5c6b77;
+  transition: all 0.2s ease;
+  position: relative;
+  padding-top: 10px;
+  p {
+    padding-top: 15px;
+    margin: 5px;
+    font-size: 14px;
+  }
+}
+</style>
+

manager/src/views/my-components/lili/member-choose.vue

@@ -0,0 +1,346 @@
+<template>
+  <div class="member-choose">
+    <Button @click="userModalVisible=true" :icon="icon">{{text}}</Button>
+    <span @click="clearSelectData" class="clear">清空已选</span>
+    <Collapse simple class="collapse">
+      <Panel name="1">
+        已选择
+        <span class="select-count">{{selectUsers.length}}</span> 人
+        <p slot="content">
+          <Tag
+            v-for="(item, i) in selectUsers"
+            :key="i"
+            :name="item.id"
+            color="default"
+            closable
+            @on-close="handleCancelUser"
+          >{{item.username}}
+          </Tag>
+        </p>
+      </Panel>
+    </Collapse>
+    <Drawer title="选择用户" closable v-model="userModalVisible" width="800" draggable>
+      <Form ref="searchUserForm" :model="searchUserForm" inline :label-width="55">
+        <Form-item label="用户名" prop="username">
+          <Input
+            type="text"
+            v-model="searchUserForm.username"
+            clearable
+            placeholder="请输入用户名"
+            style="width: 200px"
+          />
+        </Form-item>
+        <Form-item style="margin-left:-35px;" class="br">
+          <Button @click="handleSearchUser" type="primary" icon="ios-search">搜索</Button>
+          <Button @click="handleResetUser">重置</Button>
+        </Form-item>
+      </Form>
+      <Table
+        :loading="userLoading"
+        border
+        :columns="userColumns"
+        :data="userData"
+        :height="height"
+        ref="userTable"
+      ></Table>
+      <Row type="flex" justify="end" style="margin: 10px 0;">
+        <Page
+          :current="searchUserForm.pageNumber"
+          :total="totalUser"
+          :page-size="searchUserForm.pageSize"
+          @on-change="changeUserPage"
+          @on-page-size-change="changeUserPageSize"
+          :page-size-opts="[10,20,50]"
+          size="small"
+          show-total
+          show-elevator
+          show-sizer
+        ></Page>
+      </Row>
+      <div class="my-drawer-footer">
+        已选择
+        <span class="select-count">{{selectUsers.length}}</span> 人
+        <Button @click="clearSelectData" style="margin-left:10px">清空已选</Button>
+        <Button @click="userModalVisible=false" type="primary" style="margin-left:10px">关闭</Button>
+      </div>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+  import {getMember} from "@/api/member";
+
+  export default {
+    name: "userChoose",
+    props: {
+      text: {
+        type: String,
+        default: "选择会员"
+      },
+      icon: {
+        type: String,
+        default: "md-person-add"
+      }
+    },
+    data() {
+      return {
+        height: 500,
+        userLoading: true,
+        userModalVisible: false,
+        selectUsers: [],
+        searchUserForm: {
+          username: "",
+          pageNumber: 1, // 当前页数
+          pageSize: 10, // 页面大小
+          sort: "createTime", // 默认排序字段
+          order: "desc" // 默认排序方式
+        },
+        userColumns: [
+          {
+            type: "index",
+            width: 60,
+            align: "center"
+          },
+          {
+            title: "用户名",
+            key: "username",
+            minWidth: 140,
+            sortable: true
+          },
+          {
+            title: "头像",
+            key: "face",
+            width: 80,
+            align: "center",
+            render: (h, params) => {
+              return h("Avatar", {
+                props: {
+                  src: params.row.face
+                }
+              });
+            }
+          },
+          {
+            title: "手机",
+            key: "mobile",
+            width: 125,
+            sortable: true
+          },
+          {
+            title: "状态",
+            key: "status",
+            align: "center",
+            width: 120,
+            render: (h, params) => {
+              if (params.row.delFlag == 0) {
+                return h("div", [
+                  h("Badge", {
+                    props: {
+                      status: "success",
+                      text: "正常启用"
+                    }
+                  })
+                ]);
+              } else if (params.row.delFlag == -1) {
+                return h("div", [
+                  h("Badge", {
+                    props: {
+                      status: "error",
+                      text: "禁用"
+                    }
+                  })
+                ]);
+              }
+            }
+          },
+          {
+            title: "创建时间",
+            key: "createTime",
+            sortable: true,
+            sortType: "desc",
+            width: 170
+          },
+          {
+            title: "操作",
+            key: "action",
+            width: 130,
+            align: "center",
+            fixed: "right",
+            render: (h, params) => {
+              let select;
+              this.selectUsers.forEach(item => {
+                if (item.id === params.row.id) {
+                  select = params.row
+                }
+              });
+
+              if (select) {
+                return h("div", [
+                  h(
+                  "Button",
+                  {
+                    props: {
+                      type: "info",
+                      size: "small"
+                    },
+                    on: {
+                      click: () => {
+                        this.chooseCancel(params.row);
+                      }
+                    }
+                  },
+                  "取消选择"
+                  )
+                ]);
+              } else {
+                return h("div", [
+                  h(
+                  "Button",
+                  {
+                    props: {
+                      type: "info",
+                      size: "small"
+                    },
+                    on: {
+                      click: () => {
+                        this.chooseUser(params.row);
+                      }
+                    }
+                  },
+                  "选择"
+                  )
+                ]);
+              }
+            }
+          }
+        ],
+        userData: [],
+        totalUser: 0
+      };
+    },
+    methods: {
+      changeUserPage(v) {
+        this.searchUserForm.pageNumber = v;
+        this.getUserDataList();
+      },
+      changeUserPageSize(v) {
+        this.searchUserForm.pageSize = v;
+        this.getUserDataList();
+      },
+      getUserDataList() {
+        this.userLoading = true;
+        getMember(this.searchUserForm).then(res => {
+          this.userLoading = false;
+          if (res.success) {
+            this.userData = res.result.records;
+            this.totalUser = res.result.total;
+          }
+        });
+      },
+      handleSearchUser() {
+        this.searchUserForm.pageNumber = 1;
+        this.searchUserForm.pageSize = 10;
+        this.getUserDataList();
+      },
+      handleResetUser() {
+        this.$refs.searchUserForm.resetFields();
+        this.searchUserForm.pageNumber = 1;
+        this.searchUserForm.pageSize = 9;
+        this.$refs.dep.clearSelect();
+        this.searchUserForm.departmentId = "";
+        // 重新加载数据
+        this.getUserDataList();
+      },
+      setData(v) {
+        this.selectUsers = v;
+        this.$emit("on-change", this.selectUsers);
+      },
+      chooseCancel(v){
+        let _index;
+        this.selectUsers.forEach((e,index) => {
+          if (v.id == e.id) {
+            _index = index;
+          }
+        });
+
+        if(_index||_index==0){
+          this.selectUsers.splice(_index,1);
+          this.$emit("on-change", this.selectUsers);
+        }
+      },
+      chooseUser(v) {
+        // 去重
+        let that = this;
+        let flag = true;
+        this.selectUsers.forEach(e => {
+          if (v.id == e.id) {
+            flag = false;
+          }
+        });
+        if (flag) {
+          let u = {
+            id: v.id,
+            username: v.username
+          };
+          this.selectUsers.push(u);
+          this.$emit("on-change", this.selectUsers);
+        }
+      },
+      clearSelectData() {
+        this.selectUsers = [];
+        this.$emit("on-change", this.selectUsers);
+      },
+      handleCancelUser(e, id) {
+        // 删除所选用户
+        let newArray = [];
+        this.selectUsers.forEach(e => {
+          if (id != e.id) {
+            newArray.push(e);
+          }
+        });
+        this.selectUsers = newArray;
+        this.$emit("on-change", this.selectUsers);
+        this.$Message.success("删除所选用户成功");
+      }
+    },
+    created() {
+      // 计算高度
+      this.height = Number(document.documentElement.clientHeight - 230);
+      this.getUserDataList();
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .member-choose {
+    .clear {
+      font-size: 12px;
+      margin-left: 15px;
+      color: #40a9ff;
+      cursor: pointer;
+    }
+
+    .collapse {
+      font-size: 12px;
+      margin-top: 15px;
+      width: 500px;
+    }
+
+    .select-count {
+      font-weight: 600;
+      color: #40a9ff;
+    }
+  }
+
+  .my-drawer-footer {
+    z-index: 10;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    background: #fff;
+  }
+</style>

manager/src/views/my-components/lili/quill.vue

@@ -0,0 +1,284 @@
+<template>
+  <div>
+    <div id="toolbar">
+      <button class="ql-bold" title="粗体"></button>
+      <button class="ql-italic" title="斜体"></button>
+      <button class="ql-underline" title="下划线"></button>
+      <button class="ql-strike" title="删除线"></button>
+      <select class="ql-size" title="字体大小">
+        <option value="small"></option>
+        <option selected></option>
+        <option value="large"></option>
+        <option value="huge"></option>
+      </select>
+      <select class="ql-header" title="标题大小">
+        <option value="1"></option>
+        <option value="2"></option>
+        <option value="3"></option>
+        <option value="4"></option>
+        <option value="5"></option>
+        <option value="6"></option>
+        <option selected></option>
+      </select>
+      <select class="ql-font" title="字体"></select>
+      <select class="ql-align" title="对齐方式"></select>
+      <select class="ql-color" title="字体颜色"></select>
+      <select class="ql-background" title="背景颜色"></select>
+      <button class="ql-blockquote" title="引用"></button>
+      <button class="ql-code-block" title="代码块"></button>
+      <button class="ql-list" value="ordered" title="数字列表"></button>
+      <button class="ql-list" value="bullet" title="点列表"></button>
+      <button class="ql-script" value="sub" title="右下标"></button>
+      <button class="ql-script" value="super" title="右上标"></button>
+      <button class="ql-indent" value="-1" title="向左缩进"></button>
+      <button class="ql-indent" value="+1" title="向右缩进"></button>
+      <button class="ql-clean" title="清空样式"></button>
+
+      <button class="ql-link" title="链接"></button>
+      <button class="ql-image" title="插入图片" v-if="base64"></button>
+      <div class="q-menu" title="插入图片" v-if="!base64">
+        <Upload
+          :action="uploadFileUrl"
+          :headers="accessToken"
+          :on-success="handleSuccess"
+          :on-error="handleError"
+          :format="['jpg','jpeg','png','gif','bmp']"
+          accept=".jpg, .jpeg, .png, .gif, .bmp"
+          :max-size="5120"
+          :on-format-error="handleFormatError"
+          :on-exceeded-size="handleMaxSize"
+          :before-upload="beforeUpload"
+          :show-upload-list="false"
+          ref="qup"
+        >
+          <Icon type="md-images" size="20" />
+        </Upload>
+      </div>
+      <button class="ql-video" title="插入视频链接"></button>
+      <div class="q-menu" title="编辑HTML代码" @click="editHTML" v-if="expandHtml">
+        <Icon type="md-code-working" size="22" />
+      </div>
+      <div class="q-menu" title="预览" @click="fullscreenModal=true" v-if="expandPreview">
+        <Icon type="ios-eye" size="24" />
+      </div>
+      <div class="q-menu q-trash" title="清空" @click="clear" v-if="expandClear">
+        <Icon type="md-trash" size="18" style="display: block;" />
+      </div>
+    </div>
+
+    <div :id="id" :style="{minHeight: minHeight}"></div>
+
+    <Modal
+      title="编辑html代码"
+      v-model="showHTMLModal"
+      :mask-closable="false"
+      :width="900"
+      :fullscreen="full"
+    >
+      <Input
+        v-if="!full"
+        v-model="dataEdit"
+        :rows="15"
+        type="textarea"
+        style="max-height:60vh;overflow:auto;"
+      />
+      <Input v-if="full" v-model="dataEdit" :rows="32" type="textarea" />
+      <div slot="footer">
+        <Button @click="full=!full" icon="md-expand">全屏开/关</Button>
+        <Button @click="editHTMLOk" type="primary" icon="md-checkmark-circle-outline">确定保存</Button>
+      </div>
+    </Modal>
+    <Modal title="预览" v-model="fullscreenModal" fullscreen>
+      <div v-html="data">{{data}}</div>
+      <div slot="footer">
+        <Button @click="fullscreenModal=false">关闭</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import { uploadFile } from "@/api/index";
+import Quill from "quill";
+import "quill/dist/quill.snow.css";
+import xss from "xss";
+var editor = null;
+export default {
+  name: "editor",
+  props: {
+    id: {
+      type: String,
+      default: "quill"
+    },
+    value: String,
+    base64: {
+      type: Boolean,
+      default: false
+    },
+    minHeight: {
+      type: String,
+      default: "300px"
+    },
+    expandHtml: {
+      type: Boolean,
+      default: true
+    },
+    expandPreview: {
+      type: Boolean,
+      default: true
+    },
+    expandClear: {
+      type: Boolean,
+      default: true
+    },
+    openXss: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      accessToken: {},
+      uploadFileUrl: uploadFile,
+      editor: null,
+      options: {
+        theme: "snow",
+        modules: {
+          toolbar: "#toolbar"
+        },
+        placeholder: "在这输入内容 ..."
+      },
+      data: this.value, // 富文本数据
+      dataEdit: "", // 编辑数据
+      showHTMLModal: false, // 显示html
+      full: false, // html全屏开关
+      fullscreenModal: false // 显示全屏预览
+    };
+  },
+  methods: {
+    initEditor() {
+      this.accessToken = {
+        accessToken: this.getStore("accessToken")
+      };
+      editor = new Quill(`#${this.id}`, this.options);
+      let that = this;
+      if (this.value) {
+        editor.pasteHTML(this.value);
+      }
+      editor.on("text-change", function(delta, oldDelta, source) {
+        let html = editor.container.firstChild.innerHTML;
+        if (that.openXss) {
+          that.data = xss(html);
+        } else {
+          that.data = html;
+        }
+        that.$emit("input", that.data);
+        that.$emit("on-change", that.data);
+      });
+    },
+    handleFormatError(file) {
+      this.$Notice.warning({
+        title: "不支持的文件格式",
+        desc:
+          "所选文件‘ " +
+          file.name +
+          " ’格式不正确, 请选择 .jpg .jpeg .png .gif .bmp格式文件"
+      });
+    },
+    handleMaxSize(file) {
+      this.$Notice.warning({
+        title: "文件大小过大",
+        desc: "所选文件‘ " + file.name + " ’大小过大, 不得超过 5M."
+      });
+    },
+    beforeUpload() {
+      return true;
+    },
+    handleSuccess(res, file) {
+      if (res.success) {
+        let url = res.result;
+        // 获取光标位置
+        let range = editor.getSelection(true);
+        // 总元素
+        let delta = editor.getContents().length;
+        let index;
+        if (range) {
+          index = range.index;
+        } else {
+          index = delta;
+        }
+        // 插入元素
+        editor.insertEmbed(index, "image", url);
+        editor.setSelection(index + 1, 0);
+      } else {
+        this.$Message.error(res.message);
+      }
+    },
+    handleError(error, file, fileList) {
+      this.$Message.error(error.toString());
+    },
+    editHTML() {
+      this.dataEdit = this.data;
+      this.showHTMLModal = true;
+    },
+    editHTMLOk() {
+      editor.pasteHTML(this.dataEdit);
+      this.$emit("input", this.data);
+      this.$emit("on-change", this.data);
+      this.showHTMLModal = false;
+    },
+    clear() {
+      this.$Modal.confirm({
+        title: "确认清空",
+        content: "确认要清空编辑器内容？清空后不能撤回",
+        onOk: () => {
+          this.data = "";
+          editor.pasteHTML(this.data);
+          this.$emit("input", this.data);
+          this.$emit("on-change", this.data);
+        }
+      });
+    },
+    setData(value) {
+      if (!editor) {
+        this.initEditor();
+      }
+      if (value && value != this.data) {
+        this.data = value;
+        let index = editor.selection.savedRange.index;
+        editor.pasteHTML(this.data);
+        editor.setSelection(index, 0);
+        this.$emit("input", this.data);
+        this.$emit("on-change", this.data);
+      }
+    }
+  },
+  watch: {
+    value(val) {
+      this.setData(val);
+    }
+  },
+  mounted() {
+    this.initEditor();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.q-menu {
+  margin: 0 3px;
+  display: inline-block;
+  cursor: pointer;
+  color: #444;
+  :hover {
+    color: #06c;
+  }
+}
+.q-trash {
+  margin-bottom: 3px;
+}
+.ql-tooltip {
+  left: 30% !important;
+}
+</style>
+

manager/src/views/my-components/lili/rect-loading.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="spinner">
+    <div class="rect1"></div>
+    <div class="rect2"></div>
+    <div class="rect3"></div>
+    <div class="rect4"></div>
+    <div class="rect5"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "rectLoading"
+};
+</script>
+
+<style lang="scss" scoped>
+.spinner {
+  margin-top: 20vh;
+  margin-bottom: 30vh;
+  height: 60px;
+  text-align: center;
+  font-size: 10px;
+  span {
+    display: block;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.45);
+    margin-top: 1vh;
+  }
+  div {
+    margin-right: 4px;
+    background-color: #4e9ff5;
+    height: 100%;
+    width: 6px;
+    display: inline-block;
+    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
+    animation: stretchdelay 1.2s infinite ease-in-out;
+  }
+  .rect2 {
+    -webkit-animation-delay: -1.1s;
+    animation-delay: -1.1s;
+  }
+  .rect3 {
+    -webkit-animation-delay: -1s;
+    animation-delay: -1s;
+  }
+  .rect4 {
+    -webkit-animation-delay: -0.9s;
+    animation-delay: -0.9s;
+  }
+  .rect5 {
+    -webkit-animation-delay: -0.8s;
+    animation-delay: -0.8s;
+  }
+}
+
+@-webkit-keyframes stretchdelay {
+  0%,
+  40%,
+  100% {
+    -webkit-transform: scaleY(0.4);
+  }
+  20% {
+    -webkit-transform: scaleY(1);
+  }
+}
+
+@keyframes stretchdelay {
+  0%,
+  40%,
+  100% {
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }
+  20% {
+    transform: scaleY(1);
+    -webkit-transform: scaleY(1);
+  }
+}
+</style>
+

manager/src/views/my-components/lili/set-password.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="set-password">
+    <Poptip transfer trigger="focus" placement="right" width="250">
+      <Input
+        type="password"
+        password
+        style="width:350px;"
+        :maxlength="maxlength"
+        v-model="currentValue"
+        @on-change="handleChange"
+        :size="size"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+      />
+      <div :class="tipStyle" slot="content">
+        <div class="words">强度 : {{strength}}</div>
+        <Progress
+          :percent="strengthValue"
+          :status="progressStatus"
+          hide-info
+          style="margin: 13px 0;"
+        />
+        <br />请至少输入 6 个字符。请不要使
+        <br />用容易被猜到的密码。
+      </div>
+    </Poptip>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "setPassword",
+  props: {
+    value: String,
+    size: String,
+    placeholder: {
+      type: String,
+      default: "请输入密码，长度为6-20个字符"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    maxlength: {
+      type: Number,
+      default: 20
+    }
+  },
+  data() {
+    return {
+      currentValue: this.value,
+      tipStyle: "password-tip-none",
+      strengthValue: 0,
+      progressStatus: "normal",
+      strength: "无",
+      grade: 0
+    };
+  },
+  methods: {
+    checkStrengthValue(v) {
+      // 评级制判断密码强度 最高5
+      let grade = 0;
+      if (/\d/.test(v)) {
+        grade++; //数字
+      }
+      if (/[a-z]/.test(v)) {
+        grade++; //小写
+      }
+      if (/[A-Z]/.test(v)) {
+        grade++; //大写
+      }
+      if (/\W/.test(v)) {
+        grade++; //特殊字符
+      }
+      if (v.length >= 10) {
+        grade++;
+      }
+      this.grade = grade;
+      return grade;
+    },
+    strengthChange() {
+      if (!this.currentValue) {
+        this.tipStyle = "password-tip-none";
+        this.strength = "无";
+        this.strengthValue = 0;
+        return;
+      }
+      let grade = this.checkStrengthValue(this.currentValue);
+      if (grade <= 1) {
+        this.progressStatus = "wrong";
+        this.tipStyle = "password-tip-weak";
+        this.strength = "弱";
+        this.strengthValue = 33;
+      } else if (grade >= 2 && grade <= 4) {
+        this.progressStatus = "normal";
+        this.tipStyle = "password-tip-middle";
+        this.strength = "中";
+        this.strengthValue = 66;
+      } else {
+        this.progressStatus = "success";
+        this.tipStyle = "password-tip-strong";
+        this.strength = "强";
+        this.strengthValue = 100;
+      }
+    },
+    handleChange(v) {
+      this.strengthChange();
+      this.$emit("input", this.currentValue);
+      this.$emit("on-change", this.currentValue, this.grade, this.strength);
+    },
+    setCurrentValue(value) {
+      if (value === this.currentValue) {
+        return;
+      }
+      this.currentValue = value;
+      this.strengthChange();
+      this.$emit("on-change", this.currentValue, this.grade, this.strength);
+    }
+  },
+  watch: {
+    value(val) {
+      this.setCurrentValue(val);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.set-password .ivu-poptip,
+.set-password .ivu-poptip-rel {
+  display: block;
+}
+.password-tip-none {
+  padding: 1vh 0;
+}
+
+.password-tip-weak {
+  padding: 1vh 0;
+
+  .words {
+    color: #ed3f14;
+  }
+}
+
+.password-tip-middle {
+  padding: 1vh 0;
+
+  .words {
+    color: #2d8cf0;
+  }
+}
+
+.password-tip-strong {
+  padding: 1vh 0;
+
+  .words {
+    color: #52c41a;
+  }
+}
+</style>
+

manager/src/views/my-components/lili/sku-choose.vue

@@ -0,0 +1,358 @@
+<template>
+  <div class="sku-choose">
+    <Button @click="showDrawer=true" :icon="icon">{{text}}</Button>
+    <span @click="clearSelectData" class="clear">清空已选</span>
+    <Collapse simple class="collapse">
+      <Panel name="1">
+        已选择
+        <span class="select-count">{{selectObj.length}}</span> 件
+        <p slot="content">
+          <Tag
+            v-for="(item, i) in selectObj"
+            :key="i"
+            :name="item.id"
+            color="default"
+            closable
+            @on-close="handleCancelObj"
+          >{{createName(item)}}
+          </Tag>
+        </p>
+      </Panel>
+    </Collapse>
+    <Drawer title="选择SKU" closable v-model="showDrawer" :width="width" draggable>
+      <Form ref="searchForm" :model="searchForm" inline :label-width="55">
+        <Form-item label="名称" prop="goodsName">
+          <Input
+            type="text"
+            v-model="searchForm.goodsName"
+            clearable
+            placeholder="输入商品名称"
+            style="width: 200px"
+          />
+        </Form-item>
+        <Form-item style="margin-left:-35px;" class="br">
+          <Button @click="handleSearchData" type="primary" icon="ios-search">搜索</Button>
+          <Button @click="handleResetObj">重置</Button>
+        </Form-item>
+      </Form>
+      <Table
+        :loading="showLoading"
+        border
+        :columns="tableColumns"
+        :data="tableData"
+        :height="height"
+        ref="tableData"
+      ></Table>
+      <Row type="flex" justify="end" style="margin: 10px 0;">
+        <Page
+          :current="searchForm.pageNumber"
+          :total="tableTotal"
+          :page-size="searchForm.pageSize"
+          @on-change="changeDataPage"
+          @on-page-size-change="changeDataPageSize"
+          :page-size-opts="[10,20,50]"
+          size="small"
+          show-total
+          show-elevator
+          show-sizer
+        ></Page>
+      </Row>
+      <div class="my-drawer-footer">
+        已选择
+        <span class="select-count">{{selectObj.length}}</span> 件
+        <Button @click="clearSelectData" style="margin-left:10px">清空已选</Button>
+        <Button @click="showDrawer=false" type="primary" style="margin-left:10px">关闭</Button>
+      </div>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+  import {getSkuPage} from "@/api/goods";
+
+  export default {
+    name: "userChoose",
+    props: {
+      text: {
+        type: String,
+        default: "选择SKU"
+      },
+      icon: {
+        type: String,
+        default: "md-basket"
+      },
+      initData: {
+        type: Array,
+        default: []
+      },
+      createName: {
+        type: Function,
+        default: function (item) {
+          return item.goodsName
+        }
+      }
+    },
+    mounted(){
+      this.selectObj = this.initData
+      console.log(JSON.stringify(this.initData))
+    },
+    data() {
+      return {
+        //默认值后续计算
+        height: 500,
+        width: 500,
+        //加载状态
+        showLoading: true,
+        //展示抽屉
+        showDrawer: false,
+        selectObj: [],
+        searchForm: {
+          goodsName: "",
+          pageNumber: 1, // 当前页数
+          pageSize: 10, // 页面大小
+          sort: "createTime", // 默认排序字段
+          order: "desc" // 默认排序方式
+        },
+        tableColumns: [
+          {
+            type: "index",
+            width: 60,
+            align: "center"
+          },
+          {
+            title: "商品名称",
+            key: "goodsName",
+            minWidth: 140
+          },
+          {
+            title: "规格",
+            key: "specName",
+            minWidth: 140,
+          },
+          {
+            title: "图片",
+            key: "thumbnail",
+            width: 80,
+            align: "center",
+            render: (h, params) => {
+              return h("Avatar", {
+                props: {
+                  src: params.row.face
+                }
+              });
+            }
+          },
+          {
+            title: "状态",
+            key: "status",
+            align: "center",
+            width: 120,
+            render: (h, params) => {
+              if (params.row.delFlag == 0) {
+                return h("div", [
+                  h("Badge", {
+                    props: {
+                      status: "success",
+                      text: "正常"
+                    }
+                  })
+                ]);
+              } else if (params.row.delFlag == -1) {
+                return h("div", [
+                  h("Badge", {
+                    props: {
+                      status: "error",
+                      text: "禁用"
+                    }
+                  })
+                ]);
+              }
+            }
+          },
+          {
+            title: "创建时间",
+            key: "createTime",
+            sortable: true,
+            sortType: "desc",
+            width: 170
+          },
+          {
+            title: "操作",
+            key: "action",
+            width: 130,
+            align: "center",
+            fixed: "right",
+            render: (h, params) => {
+              let select;
+              this.selectObj.forEach(item => {
+                if (item.id === params.row.id) {
+                  select = params.row
+                }
+              });
+
+              if (select) {
+                return h("div", [
+                  h(
+                  "Button",
+                  {
+                    props: {
+                      type: "info",
+                      size: "small"
+                    },
+                    on: {
+                      click: () => {
+                        this.chooseCancel(params.row);
+                      }
+                    }
+                  },
+                  "取消选择"
+                  )
+                ]);
+              } else {
+                return h("div", [
+                  h(
+                  "Button",
+                  {
+                    props: {
+                      type: "info",
+                      size: "small"
+                    },
+                    on: {
+                      click: () => {
+                        this.chooseObj(params.row);
+                      }
+                    }
+                  },
+                  "选择"
+                  )
+                ]);
+              }
+            }
+          }
+        ],
+        tableData: [],
+        tableTotal: 0
+      };
+    },
+    methods: {
+      changeDataPage(v) {
+        this.searchForm.pageNumber = v;
+        this.searchData();
+      },
+      changeDataPageSize(v) {
+        this.searchForm.pageSize = v;
+        this.searchData();
+      },
+      searchData() {
+        this.showLoading = true;
+        getSkuPage(this.searchForm).then(res => {
+          this.showLoading = false;
+          if (res.success) {
+            this.tableData = res.result.records;
+            this.tableTotal = res.result.total;
+          }
+        });
+
+      },
+      handleSearchData() {
+        this.searchForm.pageNumber = 1;
+        this.searchForm.pageSize = 10;
+        this.searchData();
+      },
+      handleResetObj() {
+        this.$refs.searchForm.resetFields();
+        this.searchForm.pageNumber = 1;
+        this.searchForm.pageSize = 9;
+        this.searchForm.departmentId = "";
+        // 重新加载数据
+        this.searchData();
+      },
+      setData(v) {
+        this.selectObj = v;
+        this.$emit("on-change", this.selectObj);
+      },
+      chooseCancel(v) {
+        let _index;
+        this.selectObj.forEach((e, index) => {
+          if (v.id == e.id) {
+            _index = index;
+          }
+        });
+
+        if (_index || _index == 0) {
+          this.selectObj.splice(_index, 1);
+          this.$emit("on-change", this.selectObj);
+        }
+      },
+      chooseObj(v) {
+        // 去重
+        let that = this;
+        let flag = true;
+        this.selectObj.forEach(e => {
+          if (v.id == e.id) {
+            flag = false;
+          }
+        });
+        if (flag) {
+          this.selectObj.push(v);
+          this.$emit("on-change", this.selectObj);
+        }
+      },
+      clearSelectData() {
+        this.selectObj = [];
+        this.$emit("on-change", this.selectObj);
+      },
+      handleCancelObj(e, id) {
+        // 删除所选用户
+        let newArray = [];
+        this.selectObj.forEach(e => {
+          if (id != e.id) {
+            newArray.push(e);
+          }
+        });
+        this.selectObj = newArray;
+        this.$emit("on-change", this.selectObj);
+      }
+    },
+    created() {
+      // 计算高度
+      this.height = Number(document.documentElement.clientHeight - 230);
+      this.width = Number(document.documentElement.clientWidth/2)>900?900:Number(document.documentElement.clientWidth/2)
+      this.searchData();
+
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .sku-choose {
+    .clear {
+      font-size: 12px;
+      margin-left: 15px;
+      color: #40a9ff;
+      cursor: pointer;
+    }
+
+    .collapse {
+      font-size: 12px;
+      margin-top: 15px;
+    }
+
+    .select-count {
+      font-weight: 600;
+      color: #40a9ff;
+    }
+  }
+
+  .my-drawer-footer {
+    z-index: 10;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    background: #fff;
+  }
+</style>

manager/src/views/my-components/lili/upload-pic-input.vue

@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <div style="display:flex;">
+      <Input
+        v-model="currentValue"
+        @on-change="handleChange"
+        v-show="showInput"
+        :placeholder="placeholder"
+        :size="size"
+        :disabled="disabled"
+        :readonly="readonly"
+        :maxlength="maxlength"
+      >
+        <Button slot="append" icon="md-eye"></Button>
+      </Input>
+      <Poptip transfer trigger="hover" title="图片预览" placement="right" width="350">
+        <Icon type="md-eye" class="see-icon" />
+        <div slot="content">
+          <img :src="currentValue" alt="该资源不存在" style="width: 100%;margin: 0 auto;display: block;" />
+          <a @click="viewImage=true" style="margin-top:5px;text-align:right;display:block">查看大图</a>
+        </div>
+      </Poptip>
+      <Upload
+        :action="uploadFileUrl"
+        :headers="accessToken"
+        :on-success="handleSuccess"
+        :on-error="handleError"
+        :format="['jpg','jpeg','png','gif','bmp']"
+        accept=".jpg, .jpeg, .png, .gif, .bmp"
+        :max-size="maxSize*1024"
+        :on-format-error="handleFormatError"
+        :on-exceeded-size="handleMaxSize"
+        :before-upload="beforeUpload"
+        :show-upload-list="false"
+        ref="up"
+        class="upload"
+      >
+        <Button :loading="loading" :size="size" :disabled="disabled" :icon="icon">上传图片</Button>
+      </Upload>
+    </div>
+
+    <Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable>
+      <img :src="currentValue" alt="该资源不存在" style="width: 100%;margin: 0 auto;display: block;" />
+      <div slot="footer">
+        <Button @click="viewImage=false">关闭</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import { uploadFile } from "@/api/index";
+export default {
+  name: "uploadPicInput",
+  props: {
+    value: String,
+    size: String,
+    placeholder: {
+      type: String,
+      default: "图片链接"
+    },
+    showInput: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    maxSize: {
+      type: Number,
+      default: 5
+    },
+    maxlength: Number,
+    icon: {
+      type: String,
+      default: "ios-cloud-upload-outline"
+    }
+  },
+  data() {
+    return {
+      accessToken: {},
+      currentValue: this.value,
+      loading: false,
+      viewImage: false,
+      uploadFileUrl: uploadFile
+    };
+  },
+  methods: {
+    init() {
+      this.accessToken = {
+        accessToken: this.getStore("accessToken")
+      };
+    },
+    handleFormatError(file) {
+      this.loading = false;
+      this.$Notice.warning({
+        title: "不支持的文件格式",
+        desc:
+          "所选文件‘ " +
+          file.name +
+          " ’格式不正确, 请选择 .jpg .jpeg .png .gif .bmp格式文件"
+      });
+    },
+    handleMaxSize(file) {
+      this.loading = false;
+      this.$Notice.warning({
+        title: "文件大小过大",
+        desc: "所选文件‘ " + file.name + " ’大小过大, 不得超过 " + this.maxSize + "M."
+      });
+    },
+    beforeUpload() {
+      this.loading = true;
+      return true;
+    },
+    handleSuccess(res, file) {
+      this.loading = false;
+      if (res.success) {
+        this.currentValue = res.result;
+        this.$emit("input", this.currentValue);
+        this.$emit("on-change", this.currentValue);
+      } else {
+        this.$Message.error(res.message);
+      }
+    },
+    handleError(error, file, fileList) {
+      this.loading = false;
+      this.$Message.error(error.toString());
+    },
+    handleChange(v) {
+      this.$emit("input", this.currentValue);
+      this.$emit("on-change", this.currentValue);
+      this.$attrs.rollback && this.$attrs.rollback()
+    },
+    setCurrentValue(value) {
+      if (value === this.currentValue) {
+        return;
+      }
+      this.currentValue = value;
+      this.$emit("on-change", this.currentValue);
+    }
+  },
+  watch: {
+    value(val) {
+      this.setCurrentValue(val);
+    }
+  },
+  created() {
+    this.init();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.see-icon {
+  font-size: 16px;
+  margin-left: -32px;
+  margin-top: 3px;
+  padding: 7px;
+  cursor: pointer;
+}
+
+.upload {
+  display: inline-block;
+  margin-left: 10px;
+}
+</style>
+

manager/src/views/my-components/lili/upload-pic-thumb.vue

@@ -0,0 +1,288 @@
+<template>
+  <div>
+    <vuedraggable
+      :list="uploadList"
+      :disabled="!draggable||!multiple"
+      :animation="200"
+      class="list-group"
+      ghost-class="thumb-ghost"
+      @end="onEnd"
+    >
+      <div class="upload-list" v-for="(item, index) in uploadList" :key="index">
+        <div v-if="item.status == 'finished'">
+          <img :src="item.url" />
+          <div class="upload-list-cover">
+            <Icon type="ios-eye-outline" @click="handleView(item.url)"></Icon>
+            <Icon type="ios-trash-outline" @click="handleRemove(item)"></Icon>
+          </div>
+        </div>
+        <div v-else>
+          <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
+        </div>
+      </div>
+    </vuedraggable>
+    <Upload
+      ref="upload"
+      :multiple="multiple"
+      :show-upload-list="false"
+      :on-success="handleSuccess"
+      :on-error="handleError"
+      :format="['jpg','jpeg','png','gif']"
+      :max-size="maxSize*1024"
+      :on-format-error="handleFormatError"
+      :on-exceeded-size="handleMaxSize"
+      :before-upload="handleBeforeUpload"
+      type="drag"
+      :action="uploadFileUrl"
+      :headers="accessToken"
+      style="display: inline-block;width:58px;"
+    >
+      <div style="width: 58px;height:58px;line-height: 58px;">
+        <Icon type="md-camera" size="20"></Icon>
+      </div>
+    </Upload>
+
+    <Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable>
+      <img :src="imgUrl" alt="无效的图片链接" style="width: 100%;margin: 0 auto;display: block;" />
+      <div slot="footer">
+        <Button @click="viewImage=false">关闭</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import { uploadFile } from "@/api/index";
+import vuedraggable from "vuedraggable";
+export default {
+  name: "uploadPicThumb",
+  components: {
+    vuedraggable
+  },
+  props: {
+    value: {
+      type: Object
+    },
+    draggable: {
+      type: Boolean,
+      default: true
+    },
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    maxSize: {
+      type: Number,
+      default: 5
+    },
+    limit: {
+      type: Number,
+      default: 10
+    }
+  },
+  data() {
+    return {
+      accessToken: {},
+      uploadFileUrl: uploadFile,
+      uploadList: [],
+      viewImage: false,
+      imgUrl: ""
+    };
+  },
+  methods: {
+    onEnd() {
+      this.returnValue();
+    },
+    init() {
+      this.setData(this.value, true);
+      this.accessToken = {
+        accessToken: this.getStore("accessToken")
+      };
+    },
+    handleView(imgUrl) {
+      this.imgUrl = imgUrl;
+      this.viewImage = true;
+    },
+    handleRemove(file) {
+      this.uploadList = this.uploadList.filter(i => i.url !== file.url);
+      this.returnValue();
+    },
+    handleSuccess(res, file) {
+      if (res.success) {
+
+
+        file.url = res.result;
+        // 单张图片处理
+        if (!this.multiple && this.uploadList.length > 0) {
+          // 删除第一张
+          this.uploadList.splice(0, 1);
+        }
+        this.uploadList.push(file);
+        // 返回组件值
+        this.returnValue();
+      } else {
+        this.$Message.error(res.message);
+      }
+    },
+    handleError(error, file, fileList) {
+      this.$Message.error(error.toString());
+    },
+    handleFormatError(file) {
+      this.$Notice.warning({
+        title: "不支持的文件格式",
+        desc:
+          "所选文件‘ " +
+          file.name +
+          " ’格式不正确, 请选择 .jpg .jpeg .png .gif图片格式文件"
+      });
+    },
+    handleMaxSize(file) {
+      this.$Notice.warning({
+        title: "文件大小过大",
+        desc:
+          "所选文件‘ " +
+          file.name +
+          " ’大小过大, 不得超过 " +
+          this.maxSize +
+          "M."
+      });
+    },
+    handleBeforeUpload() {
+      if (this.multiple && this.uploadList.length >= this.limit) {
+        this.$Message.warning("最多只能上传" + this.limit + "张图片");
+        return false;
+      }
+      return true;
+    },
+    returnValue() {
+      if (!this.uploadList || this.uploadList.length < 1) {
+        if (!this.multiple) {
+          this.$emit("input", "");
+          this.$emit("on-change", "");
+        } else {
+          this.$emit("input", []);
+          this.$emit("on-change", []);
+        }
+        return;
+      }
+      if (!this.multiple) {
+        // 单张
+        let v = this.uploadList[0].url;
+        this.$emit("input", v);
+        this.$emit("on-change", v);
+      } else {
+        let v = [];
+        this.uploadList.forEach(e => {
+          v.push(e.url);
+        });
+        this.$emit("input", v);
+        this.$emit("on-change", v);
+      }
+    },
+    setData(v, init) {
+      if (typeof v == "string") {
+        // 单张
+        if (this.multiple) {
+          this.$Message.warning("多张上传仅支持数组数据类型");
+          return;
+        }
+        if (!v) {
+          return;
+        }
+        this.uploadList = [];
+        let item = {
+          url: v,
+          status: "finished"
+        };
+        this.uploadList.push(item);
+        this.$emit("uploadchange", v);
+        this.$emit("on-change", v);
+      } else if (typeof v == "object") {
+        // 多张
+        if (!this.multiple) {
+          this.$Message.warning("单张上传仅支持字符串数据类型");
+          return;
+        }
+        this.uploadList = [];
+        if (v.length > this.limit) {
+          for (let i = 0; i < this.limit; i++) {
+            let item = {
+              url: v[i],
+              status: "finished"
+            };
+            this.uploadList.push(item);
+          }
+          this.$emit("on-change", v.slice(0, this.limit));
+          if (init) {
+            this.$emit("input", v.slice(0, this.limit));
+          }
+          this.$Message.warning("最多只能上传" + this.limit + "张图片");
+        } else {
+          v.forEach(e => {
+            let item = {
+              status: "finished",
+              ...e
+            };
+            this.uploadList.push(item);
+          });
+          this.$emit("on-change", v);
+        }
+      }
+    }
+  },
+  watch: {
+    value(val) {
+      this.setData(val);
+    }
+  },
+  mounted() {
+    this.init();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.upload-list {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  text-align: center;
+  line-height: 60px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+  position: relative;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  margin-right: 5px;
+}
+.upload-list img {
+  width: 100%;
+  height: -webkit-fill-available;
+}
+.upload-list-cover {
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+}
+.upload-list:hover .upload-list-cover {
+  display: block;
+}
+.upload-list-cover i {
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+  margin: 0 2px;
+}
+.list-group {
+  display: inline-block;
+}
+.thumb-ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+</style>

manager/src/views/my-components/lili/user-choose.vue

@@ -0,0 +1,352 @@
+<template>
+  <div class="user-choose">
+    <Button @click="userModalVisible=true" :icon="icon">{{text}}</Button>
+    <span @click="clearSelectData" class="clear">清空已选</span>
+    <Collapse simple class="collapse">
+      <Panel name="1">
+        已选择
+        <span class="select-count">{{selectUsers.length}}</span> 人
+        <p slot="content">
+          <Tag
+            v-for="(item, i) in selectUsers"
+            :key="i"
+            :name="item.id"
+            color="default"
+            closable
+            @on-close="handleCancelUser"
+          >{{item.username}}</Tag>
+        </p>
+      </Panel>
+    </Collapse>
+    <Drawer title="选择用户" closable v-model="userModalVisible" width="800" draggable>
+      <Form ref="searchUserForm" :model="searchUserForm" inline :label-width="55">
+        <Form-item label="用户名" prop="username">
+          <Input
+            type="text"
+            v-model="searchUserForm.username"
+            clearable
+            placeholder="请输入用户名"
+            style="width: 200px"
+          />
+        </Form-item>
+        <Form-item label="部门" prop="department">
+          <department-choose @on-change="handleSelectDep" style="width: 200px" ref="dep"></department-choose>
+        </Form-item>
+        <Form-item style="margin-left:-35px;" class="br">
+          <Button @click="handleSearchUser" type="primary" icon="ios-search">搜索</Button>
+          <Button @click="handleResetUser">重置</Button>
+        </Form-item>
+      </Form>
+      <Table
+        :loading="userLoading"
+        border
+        :columns="userColumns"
+        :data="userData"
+        :height="height"
+        ref="userTable"
+      ></Table>
+      <Row type="flex" justify="end" style="margin: 10px 0;">
+        <Page
+          :current="searchUserForm.pageNumber"
+          :total="totalUser"
+          :page-size="searchUserForm.pageSize"
+          @on-change="changeUserPage"
+          @on-page-size-change="changeUserPageSize"
+          :page-size-opts="[10,20,50]"
+          size="small"
+          show-total
+          show-elevator
+          show-sizer
+        ></Page>
+      </Row>
+      <div class="my-drawer-footer">
+        已选择
+        <span class="select-count">{{selectUsers.length}}</span> 人
+        <Button @click="clearSelectData" style="margin-left:10px">清空已选</Button>
+        <Button @click="userModalVisible=false" type="primary" style="margin-left:10px">关闭</Button>
+      </div>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import { getUserListData } from "@/api/index";
+import departmentChoose from "./department-choose";
+export default {
+  name: "userChoose",
+  components: {
+    departmentChoose
+  },
+  props: {
+    text: {
+      type: String,
+      default: "选择用户"
+    },
+    icon: {
+      type: String,
+      default: "md-person-add"
+    }
+  },
+  data() {
+    return {
+      //高度 下方已重新计算
+      height: 500,
+      //加载
+      userLoading: true,
+      //显示选择器
+      userModalVisible: false,
+      //选择的对象
+      selectUsers: [],
+      //搜索参数
+      searchUserForm: {
+        username: "",
+        type: "",
+        status: "",
+        pageNumber: 1, // 当前页数
+        pageSize: 10, // 页面大小
+        sort: "createTime", // 默认排序字段
+        order: "desc" // 默认排序方式
+      },
+      userColumns: [
+        {
+          type: "index",
+          width: 60,
+          align: "center"
+        },
+        {
+          title: "用户名",
+          key: "username",
+          minWidth: 140,
+          sortable: true
+        },
+        {
+          title: "头像",
+          key: "avatar",
+          width: 80,
+          align: "center",
+          render: (h, params) => {
+            return h("Avatar", {
+              props: {
+                src: params.row.avatar
+              }
+            });
+          }
+        },
+        {
+          title: "所属部门",
+          key: "departmentTitle",
+          width: 120
+        },
+        {
+          title: "手机",
+          key: "mobile",
+          width: 125,
+          sortable: true
+        },
+        {
+          title: "邮箱",
+          key: "email",
+          width: 180,
+          sortable: true
+        },
+        {
+          title: "性别",
+          key: "sex",
+          width: 70,
+          align: "center"
+        },
+        {
+          title: "用户类型",
+          key: "type",
+          align: "center",
+          width: 100,
+          render: (h, params) => {
+            let re = "";
+            if (params.row.type == 1) {
+              re = "管理员";
+            } else if (params.row.type == 0) {
+              re = "普通用户";
+            }
+            return h("div", re);
+          }
+        },
+        {
+          title: "状态",
+          key: "status",
+          align: "center",
+          width: 120,
+          render: (h, params) => {
+            if (params.row.status == 0) {
+              return h("div", [
+                h("Badge", {
+                  props: {
+                    status: "success",
+                    text: "正常启用"
+                  }
+                })
+              ]);
+            } else if (params.row.status == -1) {
+              return h("div", [
+                h("Badge", {
+                  props: {
+                    status: "error",
+                    text: "禁用"
+                  }
+                })
+              ]);
+            }
+          }
+        },
+        {
+          title: "创建时间",
+          key: "createTime",
+          sortable: true,
+          sortType: "desc",
+          width: 170
+        },
+        {
+          title: "操作",
+          key: "action",
+          width: 130,
+          align: "center",
+          fixed: "right",
+          render: (h, params) => {
+            return h("div", [
+              h(
+                "Button",
+                {
+                  props: {
+                    type: "info",
+                    size: "small"
+                  },
+                  on: {
+                    click: () => {
+                      this.chooseUser(params.row);
+                    }
+                  }
+                },
+                "添加该用户"
+              )
+            ]);
+          }
+        }
+      ],
+      userData: [],
+      totalUser: 0
+    };
+  },
+  methods: {
+    handleSelectDep(v) {
+      this.searchUserForm.departmentId = v;
+    },
+    changeUserPage(v) {
+      this.searchUserForm.pageNumber = v;
+      this.getUserDataList();
+    },
+    changeUserPageSize(v) {
+      this.searchUserForm.pageSize = v;
+      this.getUserDataList();
+    },
+    getUserDataList() {
+      this.userLoading = true;
+      getUserListData(this.searchUserForm).then(res => {
+        this.userLoading = false;
+        if (res.success) {
+          this.userData = res.result.records;
+          this.totalUser = res.result.total;
+        }
+      });
+    },
+    handleSearchUser() {
+      this.searchUserForm.pageNumber = 1;
+      this.searchUserForm.pageSize = 9;
+      this.getUserDataList();
+    },
+    handleResetUser() {
+      this.$refs.searchUserForm.resetFields();
+      this.searchUserForm.pageNumber = 1;
+      this.searchUserForm.pageSize = 9;
+      this.$refs.dep.clearSelect();
+      this.searchUserForm.departmentId = "";
+      // 重新加载数据
+      this.getUserDataList();
+    },
+    setData(v) {
+      this.selectUsers = v;
+      this.$emit("on-change", this.selectUsers);
+    },
+    chooseUser(v) {
+      // 去重
+      let that = this;
+      let flag = true;
+      this.selectUsers.forEach(e => {
+        if (v.id == e.id) {
+          that.$Message.warning("已经添加过啦，请勿重复选择");
+          flag = false;
+        }
+      });
+      if (flag) {
+        let u = {
+          id: v.id,
+          username: v.username
+        };
+        this.selectUsers.push(u);
+        this.$emit("on-change", this.selectUsers);
+        this.$Message.success(`添加用户 ${v.username} 成功`);
+      }
+    },
+    clearSelectData() {
+      this.selectUsers = [];
+      this.$emit("on-change", this.selectUsers);
+    },
+    handleCancelUser(e, id) {
+      // 删除所选用户
+      let newArray = [];
+      this.selectUsers.forEach(e => {
+        if (id != e.id) {
+          newArray.push(e);
+        }
+      });
+      this.selectUsers = newArray;
+      this.$emit("on-change", this.selectUsers);
+      this.$Message.success("删除所选用户成功");
+    }
+  },
+  created() {
+    // 计算高度
+    this.height = Number(document.documentElement.clientHeight - 230);
+    this.getUserDataList();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.user-choose {
+  .clear {
+    font-size: 12px;
+    margin-left: 15px;
+    color: #40a9ff;
+    cursor: pointer;
+  }
+  .collapse {
+    font-size: 12px;
+    margin-top: 15px;
+    width: 500px;
+  }
+  .select-count {
+    font-weight: 600;
+    color: #40a9ff;
+  }
+}
+.my-drawer-footer {
+  z-index: 10;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 16px;
+  text-align: right;
+  background: #fff;
+}
+</style>