@bytenew/bn-bus-ui 1.1.461 → 1.1.463

package/packages/BnEmptyTip/BnEmptyTip.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="BnEmptyTip">
+    <div class="BnEmptyTip-box">
+      <div class="BnEmptyTip-img" :style="boxStyle"></div>
+      <div class="BnEmptyTip-text">{{ displayTip }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+const typeMap = {
+  no:{
+    url:'https://banniu-work.oss-cn-zhangjiakou.aliyuncs.com/125_110527787_41d59fbd8671cfd9a5d2449ccdbfa03f.png',
+    tip:'呀~没有内容呢~',
+    width:1,
+    height:0.8
+  },
+  search:{
+    url:'https://banniu-work.oss-cn-zhangjiakou.aliyuncs.com/125_10030158_457fba620e4e4c5ced6aab5691f3b933.png',
+    tip:'呀~没有搜索到呢~',
+    width:0.8,
+    height:0.8
+  },
+  folder:{
+    url:'https://banniu-work.oss-cn-zhangjiakou.aliyuncs.com/125_10030158_3d1230b752dd77eded103a5161dd4fd7.png',
+    tip:'呀~文件夹为空呢~',
+    width:0.8,
+    height:0.8
+  },
+  default:{
+    url:'https://banniu-work.oss-cn-zhangjiakou.aliyuncs.com/125_10030158_24c3b65ec3eaedbf32ef990df0bff0f2.png',
+    tip:'呀~没有内容呢~',
+    width:0.8,
+    height:0.8
+  },
+}
+
+export default {
+  name: "BnEmptyTip",
+  props: {
+    url: {
+      type: String,
+      default: ''
+    },
+    tip: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'no',
+    },
+    size: {
+      type: Number,
+      default: 200
+    },
+  },
+  computed: {
+    displayTip() {
+      return this.tip || typeMap[this.type]?.tip || typeMap.no.tip
+    },
+    imgUrl() {
+      if (this.url) return this.url
+      return typeMap[this.type]?.url || typeMap.no.url
+    },
+    boxStyle() {
+      return {
+        backgroundImage: `url(${this.imgUrl})`,
+        width: `${Math.round(this.size * (typeMap[this.type]?.width || 1))}px`,
+        height: `${Math.round(this.size * (typeMap[this.type]?.height || 0.8))}px`,
+      }
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.BnEmptyTip {
+  position: relative;
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  .BnEmptyTip-box {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    background-position: center top;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+  .BnEmptyTip-img {
+    background-size: contain;
+    background-position: center 35%;
+    background-repeat: no-repeat;
+  }
+  .BnEmptyTip-text {
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    font-size: 14px;
+    color: #CCCCCC;
+  }
+}
+</style>

package/packages/BnExportOrder/BnExportOrder.vue

@@ -0,0 +1,241 @@
+<template>
+  <el-dialog v-model="show" width="780px" top="50px" title="导出" destroy-on-close>
+    <div class="exportOrder" v-loading="loading">
+      <div class="w-tip w-margin-bottom10">
+        <div>
+          <span class="w-tip-num">1.</span>单次最多导出 <span class="w-color-red">{{ maxImportNum }}</span> 条数据，超出的数据将不导出；导出格式为
+          <span class="w-color-orange">.Excel</span> 文件
+        </div>
+      </div>
+      <div class="w-flex-wrap">
+        <div class="w-flex-center w-margin-bottom10" v-if="hasMultiRow || hasSubRow">
+          <BnCheck v-model="postParams.ext.splitSubformToMultiRow" trueData="1" falseData="0" label="多选联动以及子表单组件导出时拆分成多行数据"/>
+        </div>
+        <div class="w-flex-center w-margin-bottom10" v-if="hasSubRow">
+          <BnCheck v-model="postParams.ext.splitSubformToSingleCol" trueData="1" falseData="0" label="子表单组件导出时合并成单列数据"/>
+        </div>
+        <div class="w-flex-center w-margin-bottom10">
+          <BnCheck v-model="postParams.ext.exportImgData" trueData="1" falseData="0" label="导出预览图"/>
+          <div class="w-color-orange">（不勾选则导出附件链接）</div>
+        </div>
+        <div class="w-flex-center w-margin-bottom10" v-if="hasAddress">
+          <BnCheck v-model="postParams.ext.addressSplit" trueData="1" falseData="0" label="拆分收获地址、收寄信息"/>
+        </div>
+      </div>
+      <div class="exportOrder-tip" v-if="postData.all">已全选
+        <span class="w-color-blue w-font16 w-font-weight">{{postData.allLength}}</span> 条数据，请选择导出字段</div>
+      <div class="exportOrder-tip" v-else-if="postData.ids.length>0">已选择
+        <span class="w-color-blue w-font16 w-font-weight">{{ postData.ids.length }}</span>条数据，请选择导出字段</div>
+      <div class="w-flex-between w-flex-bottom w-margin-top10">
+        <div class="">
+          <el-input v-model="searchText" placeholder="搜索字段"/>
+        </div>
+        <div class="">
+          <span>{{ postParams.columns.length }}</span>/{{ watchComponents.length }}
+          <span class="w-color-blue w-cursor-pointer w-margin-left5" @click="checkAll(searchText)"> 全选</span>
+          <span v-if="postParams.columns.length>0" class="w-color-blue w-cursor-pointer w-margin-left5"
+                @click="postParams.columns=[]"> 取消选中</span>
+        </div>
+      </div>
+      <div class="exportOrder-columns">
+        <el-row :gutter="20">
+          <template v-for="item in watchComponents">
+            <el-col :span="8" class="w-padding-tb5" v-if="!searchText || item.name.indexOf(searchText)>-1">
+              <BnCheck style="width: 100%" v-model="postParams.columns" :trueData="item.columnCode" :label="item.name"/>
+            </el-col>
+          </template>
+        </el-row>
+      </div>
+      <validator-code ref="validatorCode" :postFunc="postFunc" v-if="appId"
+                      :post-data="{appId:appId,projectId:tableId}"></validator-code>
+    </div>
+    <div class="exportOrder-footer">
+      <el-button @click="show = false" :loading="loading">取 消</el-button>
+      <el-button type="primary" @click="sureExport" :loading="loading">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import validatorCode from "./validatorCode.vue"
+import {searchValueToJson} from "../../utils/index.js";
+
+export default {
+  name: "BnExportOrder",
+  components: {validatorCode},
+  props: {
+    postFunc: Function,
+    // 用户级别的唯一值,用于缓存某些操作
+    userId: {},
+    // 入参
+    postData: {
+      type: Object,
+      default() {
+        return {
+          all: false,//是否全选
+          allLength: 0,//全部工单长度
+          conditions: [],//高级筛选条件
+          ids: [],//选中的任务id
+          sorts: [],//排序字段
+          tableCode: ''//表code
+        }
+      }
+    },
+    pathUrl: {
+      type: String,
+      default: '/biztable/io/import'
+    },
+  },
+  data() {
+    return {
+      // 是否打开导出弹框
+      show: false,
+      loading: false,
+      // 可见组件列表
+      watchComponents: [],
+      // 用于获取验证码
+      appId: '',
+      tableId: '',
+      hasMultiRow:false,//是否存在多选联动组件
+      hasSubRow:false,//是否存在子表单组件
+      hasAddress:false,//是否存在地址组件
+      maxImportNum:30000,//最大导出数量
+      // 导出参数
+      postParams: {
+        columns: [],//选中的组件
+        ext: {
+          "splitSubformToMultiRow": "0",//子表单、子订单组件、多选联动，导出时拆分成多行数据
+          "splitSubformToSingleCol": "0",//子表单、子订单组件，导出时合并成单列数据
+          "exportImgData": "0",//导出缩略图
+          "addressSplit": "0",//地址组件拆分
+        }
+      },
+      searchText: '',
+    }
+  },
+  methods: {
+    /**
+     * 打开导出弹框
+     * */
+    async open() {
+      this.loading = true;
+      this.getVersion();
+      this.show = true;
+      this.hasMultiRow = false;
+      this.hasSubRow = false;
+      this.hasAddress = false;
+      this.watchComponents = []
+      let tableData = await this.postFunc(`/biztable/definition/table?tableCode=${this.postData.tableCode}&columns=1`, null, 'get')
+      if (!tableData.code) {
+        tableData.data.columns.forEach(i=>{
+          if(i.extraInfo.listShow == 1){
+            this.watchComponents.push(i)
+            if(i.behaviorType == 20){
+              this.hasMultiRow = true
+            }else if(i.behaviorType == 13){
+              this.hasSubRow = true
+            }else if(i.behaviorType == 14 || i.behaviorType == 15){
+              this.hasAddress = true
+            }
+          }
+        })
+        this.appId = tableData.data.appId
+        this.tableId = tableData.data.tableId
+        let res = await this.postFunc(`/v2/client/cache/get/${this.userId}${this.postData.tableCode}_export`, null, 'get')
+        this.loading = false;
+        if (!res.code && res.data) {
+          let cache = JSON.parse(res.data)
+          if (cache.columns) {
+            this.postParams = cache
+          } else {
+            this.postParams.columns = cache
+          }
+        } else {
+          this.postParams.columns = this.watchComponents.map(i => i.columnCode)
+        }
+        this.$refs.validatorCode.getCode();
+      }
+    },
+    /**
+     * 全选
+     * */
+    checkAll(search) {
+      this.watchComponents.forEach(item => {
+        if ((!search || item.name.indexOf(search) > -1) && !this.postParams.columns.includes(item.columnCode)) {
+          this.postParams.columns.push(item.columnCode)
+        }
+      })
+    },
+    /**
+     * 确认导出
+     * */
+    sureExport() {
+      if (!this.$refs.validatorCode.codeNum) {
+        this.$message.warning('请输入验证码再导出')
+        return;
+      }
+      if (this.postParams.columns.length == 0) {
+        this.$message.warning('请选择需要导出的组件，至少一个')
+        return;
+      }
+      this.postFunc(`/v2/client/cache/save`, {
+        key: `${this.userId}${this.postData.tableCode}_export`,
+        value: this.postParams
+      })
+      this.loading = true;
+      let data = {
+        ...this.postParams,
+        ...this.postData,
+        checkCode: this.$refs.validatorCode.codeNum,
+        columns:this.postParams.columns.join(',')
+      }
+      if (this.postData?.conditions?.length) {
+        data.conditions = searchValueToJson(this.postData.conditions)
+      }
+      this.postFunc(`/biztable/io/export`, data).then(res => {
+        this.loading = false;
+        if (!res.code) {
+          this.$message.success(res.msg)
+          this.$emit("exportOver", data, res)
+          this.show = false
+        }
+      })
+    },
+    /**
+     * 获取版本查看导入最多支持多少条
+     * */
+    getVersion() {
+      this.postFunc('v2/logins/checkSession', {}).then(res => {
+        if (!res.code) {
+          this.maxImportNum = res.data.capacity.exportImportMax
+        }
+      })
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.exportOrder {
+  min-height: 100px;
+
+  &-tip {
+    line-height: 32px;
+    height: 32px;
+
+  }
+
+  &-columns {
+    position: relative;
+    margin: 10px 0;
+    padding: 10px;
+    border: 1px solid #eee;
+    max-height: 360px;
+    overflow-y: auto;
+  }
+
+  &-footer {
+    text-align: right;
+  }
+}
+</style>

package/packages/BnExportOrder/validatorCode.vue

@@ -0,0 +1,94 @@
+<!--
+  统一的图形验证码验证器，验证成功会返回一个值标识校验通过
+-->
+<template>
+  <div class="validator">
+    <div class="validator-code clearFix">
+      <div class="w-float-left validator-code-input">
+        <el-input v-model="codeNum" size="large" placeholder="请输入验证码"/>
+      </div>
+      <div class="w-float-left validator-code-img w-cursor-pointer" v-loading="loading">
+        <el-image :src="codeImgUrl" title="刷新验证码" style="width: 100%;height: 100%;" @click="getCode">
+          <div slot="placeholder" class="image-slot">
+            加载中<span class="dot">...</span>
+          </div>
+        </el-image>
+      </div>
+      <div class="w-float-left validator-code-reload w-cursor-pointer" @click="getCode">看不清换一个</div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "validatorCode",
+  props: {
+    postData: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    postFunc: Function,
+  },
+  data() {
+    return {
+      codeImgUrl: '',
+      codeNum: '',
+      loading: false
+    }
+  },
+  methods: {
+    getCode() {
+      this.codeNum = '';
+      this.loading = true;
+      this.postFunc('/v2/taskio/getValidateCode', this.postData).then(res => {
+        this.loading = false;
+        if (!res.code) {
+          this.codeImgUrl = "data:image/jpeg;base64," + res.data;
+        } else {
+          this.codeImgUrl = '';
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.validator {
+  position: relative;
+  width: 100%;
+
+  &-code {
+    padding: 10px 0;
+
+    &-input {
+      width: 160px;
+      padding-right: 15px;
+    }
+
+    &-reload {
+      height: 32px;
+      line-height: 32px;
+      color: #595959;
+      margin-left: 8px;
+    }
+
+    &-img {
+      position: relative;
+      width: 100px;
+      height: 32px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+
+    }
+
+
+  }
+}
+</style>