simple-frame-unit 1.0.2

package/lib/popup/src/RoleChoose.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="app-container">
+    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams">
+      <el-form-item label="角色名称" prop="name">
+        <el-input v-model="queryParams.name" clearable placeholder="请输入角色名称" size="small" style="width: 240px"
+                  @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="roleList" highlight-current-row @current-change="handleCurrentChange">
+      <el-table-column label="角色编号" prop="id" width="120"/>
+      <el-table-column :show-overflow-tooltip="true" label="角色名称" prop="name" width="150"/>
+      <el-table-column :show-overflow-tooltip="true" label="角色标识" prop="code" width="150"/>
+      <el-table-column label="角色类型" prop="type" width="80">
+        <template slot-scope="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_ROLE_TYPE" :value="scope.row.type"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="显示顺序" prop="sort" width="100"/>
+      <el-table-column align="center" label="状态" width="100">
+        <template slot-scope="scope">
+          <el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" disabled/>
+        </template>
+      </el-table-column>
+
+    </el-table>
+
+    <pagination v-show="total>0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total"
+                @pagination="loadData"/>
+  </div>
+</template>
+
+<script>
+import {listRole,} from "../../api/system";
+export default {
+  name: "RoleChoose",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      roleList: [],
+      currentRow: {},
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        name: undefined,
+      },
+      // 表单校验
+      rules: {
+        name: [
+          {required: true, message: "角色名称不能为空", trigger: "blur"}
+        ]
+      },
+
+
+    };
+  },
+  watch: {},
+  created() {
+    this.loadData();
+  },
+  methods: {
+    getData() {
+      return {value: this.currentRow.id, label: this.currentRow.name}
+    },
+    handleCurrentChange(row) {
+      this.currentRow = row;
+    },
+    /** 查询角色列表 */
+    loadData() {
+      this.loading = true;
+      listRole(this.queryParams).then(
+          response => {
+            this.roleList = response.data.list;
+            this.total = response.data.total;
+            this.loading = false;
+          }
+      );
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.loadData();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+  }
+};
+</script>

package/lib/popup/src/TemplateChoose.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <EasyDataList :data-source-name="dataSourceName" :diy-colums="columns"
+                  :action-props="{showExportBtn:false,showAddBtn:false}"
+                  :table-props="{isOperate: false}"
+                  @handleCurrentChange="handleCurrentChange">
+
+    </EasyDataList>
+  </div>
+</template>
+<script lang="jsx">
+
+export default {
+  name: 'TemplateChooes',
+  data() {
+    return {
+      dataSourceName: 'easy_template_info',
+      currentData: {}, //选中的数据
+      columns: [
+        {
+          label: 'Id',
+          prop: 'id',
+        }, {
+          label: '模板名称',
+          prop: 'keyInfoObject.template_name',
+        },
+        {
+          label: '备注',
+          prop: 'keyInfoObject.template_remark',
+        },
+      ]
+    }
+  },
+  methods: {
+    getData() {
+      return {value: this.currentData.id, label: this.currentData.keyInfoObject.template_name};
+    },
+    handleCurrentChange(row) {
+      this.currentData = row
+    }
+  }
+}
+</script>

package/lib/popup/src/UserChoose.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索工作栏 -->
+    <el-row :gutter="20">
+      <!--部门数据-->
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="deptName" clearable placeholder="请输入部门名称" prefix-icon="el-icon-search" size="small"
+                    style="margin-bottom: 20px"/>
+        </div>
+        <div class="head-container">
+          <el-tree ref="tree" :data="deptOptions" :expand-on-click-node="false"
+                   :filter-node-method="filterNode"
+                   :props="defaultProps" default-expand-all highlight-current @node-click="handleNodeClick"/>
+        </div>
+      </el-col>
+      <!--用户数据-->
+      <el-col :span="20" :xs="24">
+        <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px"
+                 size="small">
+          <el-form-item label="用户名称" prop="username">
+            <el-input v-model="queryParams.username" clearable placeholder="请输入用户名称" style="width: 240px"
+                      @keyup.enter.native="handleQuery"/>
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" type="primary" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <el-table v-loading="loading" :data="userList" highlight-current-row @current-change="handleCurrentChange">
+          <el-table-column v-if="columns[0].visible" key="id" align="center" label="用户编号" prop="id"/>
+          <el-table-column v-if="columns[1].visible" key="username" :show-overflow-tooltip="true" align="center"
+                           label="用户名称"
+                           prop="username"/>
+          <el-table-column v-if="columns[2].visible" key="nickname" :show-overflow-tooltip="true" align="center"
+                           label="用户昵称"
+                           prop="nickname"/>
+          <el-table-column v-if="columns[3].visible" key="deptName" :show-overflow-tooltip="true" align="center"
+                           label="部门"
+                           prop="dept.name"/>
+        </el-table>
+
+        <pagination v-show="total>0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total"
+                    @pagination="loadData"/>
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+import {listUser, listSimpleDepts, listSimplePosts} from "../../api/system";
+
+export default {
+  name: "UserChoose",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      userList: null,
+      // 部门树选项
+      deptOptions: undefined,
+      // 部门名称
+      deptName: undefined,
+      // 岗位选项
+      postOptions: [],
+      // 表单参数
+      form: {},
+      defaultProps: {
+        children: "children",
+        label: "name"
+      },
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        username: undefined,
+        deptId: undefined,
+      },
+      // 列信息
+      columns: [
+        {key: 0, label: `用户编号`, visible: true},
+        {key: 1, label: `用户名称`, visible: true},
+        {key: 2, label: `用户昵称`, visible: true},
+        {key: 3, label: `部门`, visible: true},
+      ],
+      currentRow: {}
+    };
+  },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  created() {
+    this.loadData();
+    this.getTreeselect();
+  },
+  methods: {
+    /** 查询用户列表 */
+    loadData() {
+      this.loading = true;
+      listUser(this.queryParams).then(response => {
+          this.userList = response.data.list;
+          this.total = response.data.total;
+          this.loading = false;
+        }
+      );
+    },
+    getData() {
+      return {value: this.currentRow.id, label: this.currentRow.username}
+    },
+    handleCurrentChange(row) {
+      this.currentRow = row;
+    },
+    /** 查询部门下拉树结构 + 岗位下拉 */
+    getTreeselect() {
+      listSimpleDepts().then(response => {
+        // 处理 deptOptions 参数
+        this.deptOptions = [];
+        this.deptOptions.push(...this.handleTree(response.data, "id"));
+      });
+      listSimplePosts().then(response => {
+        // 处理 postOptions 参数
+        this.postOptions = [];
+        this.postOptions.push(...response.data);
+      });
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deptId = data.id;
+      this.loadData();
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.loadData();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+
+
+  }
+};
+</script>

package/lib/popup//347/273/204/344/273/266/345/274/200/345/217/221/350/247/204/350/214/203.md

@@ -0,0 +1,25 @@
+# 组件开发规范
+
+## 实现方法
+
+### loadData
+
+- 参数
+
+  无
+
+- 返回数据
+
+  无
+
+### getData
+
+- 参数
+
+  无
+
+- 返回数据
+
+  ```
+  {value: "",label: ""}
+  ```

package/lib/style/custom.scss

@@ -0,0 +1,126 @@
+.ed-drag--cursor_move {
+  cursor: move;
+}
+
+.es-form--action {
+  width: 100%;
+  padding-bottom: 20px;
+}
+
+.el-dropdown-link {
+  color: #409EFF;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.es-dialog--operate {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  div:last-child{
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-right: 20px;
+  }
+}
+
+.es-box-card {
+  .es-box-card--header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    div:last-child, .es-card-header-operate{
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+  }
+
+  .view-list-card.active {
+    background-color: rgb(225, 243, 216);
+  }
+}
+
+.es-box-card--top {
+  margin-top: 10px;
+}
+
+
+.es-row, .es-row--col{
+  height: 100%;
+  .es-box-card {
+    height: 100% ;
+
+    .el-card__body {
+     height: calc(100% - 45px);
+     overflow-y: auto;
+    }
+  }
+}
+
+//es-menu
+.es-menu {
+  border-right: none;
+  .es-menu-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &.is-active {
+      background: rgba(24, 144, 255, 0.1);
+    }
+
+    .es-menu-item--operate {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      line-height: 56px;
+      .el-button {
+        line-height: 56px;
+        padding: 0;
+        margin: 0;
+        margin-left: 2px;
+        margin-top: 1px;
+      }
+    }
+  }
+}
+
+
+// es-template
+.es-template {
+  padding-bottom: 20px;
+
+  .es-template--steps {
+
+    &__main {
+      margin-top: 10px;
+    }
+  }
+
+  .es-steps--isVertical {
+    display: flex;
+    min-height: 300px;
+
+    .el-steps--vertical {
+      flex: 1;
+      height: 100%;
+      margin-top: 20px;
+    }
+
+    .es-template--steps__main {
+      flex: 7;
+    }
+  }
+
+  .es-template__footer {
+    margin-top: 20px;
+  }
+}
+
+// EasyDataForm.vue
+.ed-form--box {
+  overflow: hidden;
+}

package/lib/style/deep.scss

@@ -0,0 +1,109 @@
+/**
+ * vue样式穿透 ::v-deep
+ * 修改element样式
+ */
+::v-deep {
+
+  // el-card 默认样式修改
+  .el-card {
+    .el-card__header {
+      font-size: 18px;
+      padding: 10px;
+    }
+  }
+
+  .el-card.is-never-shadow {
+    .el-card__header {
+      opacity: 0.5;
+    }
+  }
+
+  // el-drawer 默认样式修改
+  .es-modal {
+    .el-drawer__header {
+      position: relative;
+      padding: 16px 24px;
+      border-bottom: 1px solid #e8e8e8;
+      border-radius: 4px 4px 0 0;
+      color: rgba(0, 0, 0, .85);
+      font-weight: 500;
+      font-size: 18px;
+      margin-bottom: 0;
+    }
+
+    .el-drawer__body {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+
+      .es-drawer__content {
+        padding: 20px;
+        flex: 1;
+        overflow: auto;
+      }
+
+      .es-drawer__footer {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        border-top: 1px solid #e8e8e8;
+        padding: 10px 16px;
+        background: #fff;
+        border-radius: 0 0 2px 2px;
+        width: 100%;
+
+        .el-button {
+          width: 100px;
+        }
+
+        .el-button:last-child {
+          margin-left: 30px;
+        }
+      }
+    }
+  }
+
+  .easy-dialog {
+    .el-dialog__header {
+      position: relative;
+      padding: 16px 24px;
+      border-bottom: 1px solid #e8e8e8;
+      border-radius: 4px 4px 0 0;
+      color: rgba(0, 0, 0, .85);
+      font-weight: 500;
+      font-size: 18px;
+      margin-bottom: 0;
+    }
+
+    .el-dialog__body {
+      flex: 1;
+      padding: 15px
+    }
+
+    .el-dialog__footer {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      border-top: 1px solid #e8e8e8;
+      padding: 10px 16px;
+      background: #fff;
+      border-radius: 0 0 2px 2px;
+      width: 100%;
+
+      .el-button {
+        width: 100px;
+      }
+
+    }
+  }
+
+  .table-tag {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .el-tag {
+      margin: 0 2px;
+    }
+  }
+}

package/lib/style/index.scss

@@ -0,0 +1,4 @@
+@import "./deep.scss";
+@import "./custom.scss";
+
+

package/lib/utils/MapLoader.js

@@ -0,0 +1,48 @@
+export default class MapLoader {
+  constructor(id) {
+    this.initMap(id)
+  }
+
+  initMap(id) {
+    let aMapScript = document.createElement('script')
+    aMapScript.setAttribute('src', 'https://webapi.amap.com/maps?v=1.4.11&key=c0af2a8bee25c16d7a307124ddb43056&plugin=AMap.CitySearch')
+    document.head.appendChild(aMapScript)
+
+    aMapScript.onload = () => {
+      AMap.plugin(["AMap.Geolocation"], () => {
+        var geolocation = new AMap.Geolocation({
+          enableHighAccuracy: true, //  是否使用高精度定位，默认:true
+          timeout: 10000, //  超过10秒后停止定位，默认：无穷大
+          maximumAge: 0, // 定位结果缓存0毫秒，默认：0
+          convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
+          showButton: true, //  显示定位按钮，默认：true
+          buttonPosition: "LB", // 定位按钮停靠位置，默认：'LB'，左下角
+          buttonOffset: new AMap.Pixel(10, 20), //  定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
+          showMarker: true, //  定位成功后在定位到的位置显示点标记，默认：true
+          showCircle: true, //  定位成功后用圆圈表示定位精度范围，默认：true
+          panToLocation: true, //  定位成功后将定位到的位置作为地图中心点，默认：true
+          zoomToAccuracy: true, //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
+        });
+
+        console.log(AMap)
+        geolocation.getCurrentPosition();
+        AMap.event.addListener(geolocation, 'complete', onComplete)
+        AMap.event.addListener(geolocation, 'error', onError)
+
+        function onComplete(data) {
+          // data是具体的定位信息
+          console.log(data)
+          console.log('123123')
+        }
+
+        function onError(data) {
+          console.log(data)
+          // 定位出错
+          console.log('123123s')
+        }
+
+      });
+    }
+
+  }
+}

package/lib/utils/dateUtils.js

@@ -0,0 +1,58 @@
+/**
+ * 将毫秒，转换成时间字符串。例如说，xx 分钟
+ *
+ * @param ms 毫秒
+ * @returns {string} 字符串
+ */
+export function getDate(ms) {
+  const day = Math.floor(ms / (24 * 60 * 60 * 1000));
+  const hour = Math.floor((ms / (60 * 60 * 1000) - day * 24));
+  const minute = Math.floor(((ms / (60 * 1000)) - day * 24 * 60 - hour * 60));
+  const second = Math.floor((ms / 1000 - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60));
+  if (day > 0) {
+    return day + "天" + hour + "小时" + minute + "分钟";
+  }
+  if (hour > 0) {
+    return hour + "小时" + minute + "分钟";
+  }
+  if (minute > 0) {
+    return minute + "分钟";
+  }
+  if (second > 0) {
+    return second + "秒";
+  } else {
+    return 0 + "秒";
+  }
+}
+
+/**
+ * 格式化时间
+ * @param date
+ * @param fmt
+ * @returns {*}
+ */
+export function formatDate(date, fmt = 'yyyy-MM-dd hh:mm:ss') {
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
+  }
+  let o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds()
+  };
+
+  for (let k in o) {
+    if (new RegExp(`(${k})`).test(fmt)) {
+      let str = o[k] + '';
+      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
+    }
+  }
+  return fmt;
+}
+
+
+function padLeftZero(str) {
+  return ('00' + str).substr(str.length);
+}

package/lib/utils/index.js

@@ -0,0 +1,8 @@
+import * as utils from "./utils";
+import * as useBusiness from "./useBusiness";
+import * as dateUtils from "./dateUtils";
+export default {
+    ...utils,
+    ...useBusiness,
+    ...dateUtils
+}