@bytenew/bn-bus-ui 1.1.462 → 1.1.463

package/packages/BnOrderShare/index.vue

@@ -0,0 +1,378 @@
+<template>
+  <el-dialog v-model="show" width="780px" top="50px" title="分享" destroy-on-close>
+    <div class="orderShare" v-loading="loading">
+      <div class="orderShare-left">
+        <el-form label-position="left" label-width="70">
+          <el-form-item label="分享类型">
+            <el-radio-group v-model="shareType" @change="changeShareType" :disabled="shareType=='edit'">
+              <el-radio value="add">创建</el-radio>
+              <el-radio value="watch">查询</el-radio>
+              <el-radio value="edit" v-if="shareType=='edit'">编辑</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <div class="orderShare-tip">
+            <span class="bnUIcon bnUIcon-partner w-color-orange"></span>
+            <span v-if="postData.type == 1">
+			  若你没有可用的淘宝店铺可前往平台市场 <a class="w-color-blue"
+                                                href="https://fuwu.taobao.com/ser/detail.htm?service_code=FW_GOODS-1001101627&code=FW_GOODS-1001101627"
+                                                target="_blank">去订购</a>
+			</span>
+            <span v-if="postData.type == 3">
+			  若你没有可用的京东POP店铺可前往平台市场 <a class="w-color-blue"
+                                                   href="https://fw.jd.com/main/detail/FW_GOODS-325402?rdct=true"
+                                                   target="_blank">去订购</a>
+			</span>
+            <span v-if="postData.type != 1 && postData.type != 3">
+			  抖音（极速配置版）、京东自营生成的平台链接可以我们的班牛服务大厅统一管理
+			<a class="w-color-blue" href="https://work.bytenew.com/app.html#/applet/serviceHallNew/shortChainManage"
+         target="_blank">前往查看</a>
+			</span>
+          </div>
+          <el-form-item label="平台类型">
+            <el-segmented v-model="postData.type" :options="platforms" size="default" @change="changeType"/>
+          </el-form-item>
+          <el-form-item label="手淘" v-if="postData.type == 1">
+            <div class="w-flex-center">
+              <span class="bnUIcon bnUIcon-tb w-color-orange w-font24 w-margin-right5"></span>
+              <BnSelect v-model="postData.seller" :isPage="false" @change="chooseSeller" clearable
+                        :optionProps="{value:'sellerId',label:'sellerNick'}"
+                        path-url="/v2/tableShare/getTBMiniAppShareConfig" :isInitOptions="false"
+                        :post-func="getFunc" :labelInValue="false"></BnSelect>
+            </div>
+          </el-form-item>
+          <el-form-item label="抖音" v-if="postData.type == 2">
+            <div class="w-flex-center">
+              <span class="bnUIcon bnUIcon-dy w-color-black3 w-font24 w-margin-right5"></span>
+              <BnSelect v-model="postData.seller" :isPage="false" @change="chooseSeller" clearable
+                        :optionProps="{value:'sellerId',label:'sellerName'}"
+                        pathUrl="/v2/dy/hall/shopList?device=dyQc" :postData="{device:'dyQc'}" :isInitOptions="false"
+                        :post-func="postFunc" :labelInValue="false"></BnSelect>
+            </div>
+          </el-form-item>
+          <el-form-item label="京东POP" v-if="postData.type == 3">
+            <div class="w-flex-center">
+              <span class="bnUIcon bnUIcon-jd w-font24 w-margin-right5" style="color: red"></span>
+              <BnSelect v-model="postData.seller" :isPage="false" @change="chooseSeller" clearable
+                        :optionProps="{value:'sellerId',label:'sellerName'}"
+                        pathUrl="/v2/dy/hall/shopList?device=jd" :postData="{device:'jd'}" :isInitOptions="false"
+                        :post-func="postFunc" :labelInValue="false"></BnSelect>
+            </div>
+          </el-form-item>
+          <el-form-item label="京东自营" v-if="postData.type == 4">
+            <div class="w-flex-center">
+              <span class="bnUIcon bnUIcon-jd w-margin-right5 w-font24" style="color: red"></span>
+              <BnSelect v-model="postData.seller" :isPage="false" @change="chooseSeller" clearable
+                        :optionProps="{value:'sellerId',label:'sellerName'}"
+                        pathUrl="/v2/dy/hall/shopList?device=jdSelf" :postData="{device:'jdSelf'}" :isInitOptions="false"
+                        :post-func="postFunc" :labelInValue="false"></BnSelect>
+            </div>
+          </el-form-item>
+          <el-form-item v-if="this.url.endDate">
+            <el-col :span="24">
+              <el-countdown format="DD [天] HH:mm:ss [后失效]" :value="this.url.endDate">
+                <template #title>
+                  <div class="w-flex-center">
+                    短链到期时间：<span class="w-color-red">{{ formatDate(url.endDate) }}</span>
+                    <span class="w-color-blue w-margin-left5 w-cursor-pointer" @click="updateShortUrl">更新短链</span>
+                  </div>
+                </template>
+              </el-countdown>
+            </el-col>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="orderShare-right">
+        <div class="w-padding-bottom10">网页端</div>
+        <shareUrlInp :url="url.pc"></shareUrlInp>
+        <div class="w-padding-tb10">移动端</div>
+        <shareUrlInp :url="url.mb"></shareUrlInp>
+        <template v-if="postData.seller">
+          <div v-if="url.long">
+            <div class="w-padding-tb10">平台长连接</div>
+            <shareUrlInp :url="url.long"></shareUrlInp>
+          </div>
+          <div v-if="url.short">
+            <div class="w-padding-tb10">平台短链接</div>
+            <shareUrlInp :url="url.short"></shareUrlInp>
+          </div>
+        </template>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import shareUrlInp from "./shareUrlInp.vue";
+
+export default {
+  name: "BnOrderShare",
+  components: {shareUrlInp},
+  props: {
+    // 工单表ID
+    tableId: {
+      type: [String, Number],
+    },
+    // 应用ID
+    appId: {
+      type: [String, Number],
+    },
+    // 工单表Code
+    tableCode: {
+      type: String,
+    },
+    // 请求函数（用于生成平台链接）
+    postFunc: {
+      type: Function,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      show: false, // 弹窗显示与否
+      shareType: 'add',//分享类型
+      taskId: '',//编辑分享
+      // 分享配置
+      shareConfig: {},
+      // 获取短链
+      postData: {
+        type: 1,
+        seller: '',
+      },
+      platforms: [
+        {label: '手淘', value: 1, icon: 'bnUIcon-tb w-color-orange'},
+        {label: '抖音(极速)', value: 2, icon: 'bnUIcon-dy w-color-black3'},
+        {label: '京东POP', value: 3, icon: 'bnUIcon-jd w-color-red'},
+        {label: '京东自营', value: 4, icon: 'bnUIcon-jd w-color-red'},
+      ],
+      // 分享链接
+      url: {
+        // 网页端
+        pc: '',
+        // 移动端
+        mb: '',
+        // 平台长连接
+        long: '',
+        // 平台短链接
+        short: '',
+        // 过期时间
+        endDate: '',
+      },
+    };
+  },
+  computed: {
+    // BnSelect 需要 get 请求，将 postFunc 包装为固定 get 方式
+    getFunc() {
+      return (url, data) => this.postFunc(url, data, 'get');
+    },
+  },
+  methods: {
+    /**
+     * 打开弹框
+     * */
+    open(taskId) {
+      this.url = {
+        // 网页端
+        pc: '',
+        // 移动端
+        mb: '',
+        // 平台长连接
+        long: '',
+        // 平台短链接
+        short: '',
+        // 过期时间
+        endDate: '',
+      }
+      this.postData.seller = ''
+      if (taskId) {
+        this.shareType = 'edit'
+        this.taskId = taskId;
+      } else {
+        this.shareType = 'add'
+        this.taskId = '';
+      }
+      this.getShareConfig();
+      this.show = true;
+    },
+    /**
+     * 生成分享链接
+     * */
+    getShareUrl() {
+      //对h5链接进行手动加密
+      let projectId = this.tableId * 124;
+      let app = this.appId * 124;
+      let companyId = this.shareConfig.companyId * 124;
+      let shareId = this.shareConfig.id * 124;
+      this.url.pc = `https://${window.location.host}/app.html#/shareWorkTable/${this.shareType}/${app}_${projectId}_${shareId}_${companyId}`
+      this.url.mb = `https://${window.location.host}/appMobile.html#/shareWorkTable/${this.shareType}/${app}_${projectId}_${shareId}_${companyId}?tableCode=${this.tableCode}`
+      if (this.taskId) {
+        this.url.pc = this.url.pc + "_" + (this.taskId * 124)
+        this.url.mb = this.url.mb + "_" + (this.taskId * 124)
+      }
+    },
+    /**
+     * 生成分享链接
+     * */
+    getPlateUrl(update) {
+      this.loading = true;
+      let postData = {
+        appId: this.appId,
+        projectId: this.tableId,
+        shareType: this.shareType,
+        shareId: this.shareConfig.id,
+        companyId: this.shareConfig.companyId,
+        sellerId: this.postData.seller,
+        tableCode: this.tableCode,
+        // 更新
+        forceUpdate: update || false
+      }
+      if (this.taskId) {
+        postData.taskId = this.taskId;
+      }
+      let url = ''
+      if (this.postData.type == 1) {
+        url = '/v2/tableShare/createShortUrlBySellerId'
+        // 更新短链
+        if (update) {
+          url = '/v2/tableShare/enforceUpdateShortUrl'
+        }
+      } else if (this.postData.type == 2) {
+        url = '/v2/dy/hall/getTableLink'
+        postData.device = 'dyQc'
+        postData.projectName = ''
+      } else {
+        url = '/v2/jd/getLink'
+        postData.sid = this.postData.seller
+        postData.cid = this.shareConfig.companyId
+        postData.path = ''
+        if (this.postData.type == 4) {
+          postData.device = 'jdSelf'
+        }
+      }
+      this.postFunc(url, postData).then(res => {
+        this.loading = false;
+        if (!res.code) {
+          if (this.postData.type == 1) {
+            this.url.long = res.data.longUrl
+            try {
+              this.url.short = JSON.parse(res.data.shortUrl).miniapp_shorturl_create_response.result.model.short_url
+            } catch (e) {
+              console.log('解析短链失败', res.data.shortUrl)
+            }
+            this.url.endDate = new Date(res.data.expireDate)
+          } else if (this.postData.type == 2) {
+            this.url.short = res.data.link
+            this.url.endDate = new Date(res.data.expireDate)
+          } else {
+            this.url.long = res.data.longLink
+          }
+        }
+      })
+    },
+    /**
+     * 获取分享配置
+     * */
+    getShareConfig() {
+      this.loading = true;
+      this.postFunc('/v2/tableShare/getTableShareConfig', {
+        appId: this.appId,
+        projectId: this.tableId,
+      }).then(res => {
+        this.loading = false;
+        if (!res.code && res.data) {
+          this.shareConfig = res.data
+          this.getShareUrl();
+        }
+      });
+    },
+    /**
+     * 切换分享类型
+     * */
+    changeShareType() {
+      this.getShareUrl();
+      if (this.postData.seller) {
+        this.getPlateUrl();
+      }
+    },
+    /**
+     * 切换平台类型
+     * */
+    changeType() {
+      this.postData.seller = '';
+      this.url.long = '';
+      this.url.short = '';
+      this.url.endDate = '';
+    },
+    /**
+     * 切换店铺
+     * */
+    chooseSeller() {
+      if (!this.postData.seller) {
+        this.url.long = '';
+        this.url.short = '';
+        this.url.endDate = '';
+      } else {
+        this.getPlateUrl();
+      }
+    },
+    /**
+     * 格式化日期为 YYYY-MM-DD HH:mm:ss
+     * */
+    formatDate(date) {
+      if (!date) return '';
+      const d = new Date(date);
+      const pad = n => String(n).padStart(2, '0');
+      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+    },
+      /**
+     * 更新短链接
+     * */
+    updateShortUrl() {
+      if (this.postData.type == 1) {
+        this.$messageBox.confirm(
+            '更新手淘短链将会使旧链接无法使用，确定更新么?',
+            '更新提醒',
+            {
+              confirmButtonText: '是的',
+              cancelButtonText: '取消',
+              type: 'warning',
+            }
+        ).then(() => {
+          this.getPlateUrl(true);
+        })
+      } else {
+        this.getPlateUrl(true);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.orderShare {
+  display: flex;
+  overflow-y: auto;
+  height: 330px;
+
+  &-tip {
+    font-size: 13px;
+    padding: 8px;
+    background: #FAFAFA;
+    color: #666;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    margin-bottom: 20px;
+    min-height: 53px;
+  }
+
+  &-left {
+    width: 52%;
+    border-right: 1px solid #eee;
+    padding-right: 10px;
+  }
+
+  &-right {
+    width: 48%;
+    padding-left: 10px;
+
+  }
+}
+</style>

package/packages/BnOrderShare/shareUrlInp.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="shareUrlInp">
+	<div class="shareUrlInp-url">{{ url }}</div>
+	<div><el-text class="w-cursor-pointer" type="primary" @click="copy">复制</el-text></div>
+	<div><a class="w-cursor-pointer w-color-blue" :href="url" target="_blank">打开</a></div>
+	<div>
+	  <el-popover placement="bottom" width="200" @show="initQc">
+		<canvas ref="canvasRef"></canvas>
+		<template #reference> <span class="bnUIcon bnUIcon-qc w-font26"></span></template>
+	  </el-popover>
+	</div>
+  </div>
+</template>
+<script>
+  export default {
+	name: "shareUrlInp",
+	props: {
+	  url: String
+	},
+	methods:{
+	  copy(){
+		const textarea = document.createElement('textarea');
+		textarea.value = this.url;
+		document.body.appendChild(textarea);
+		textarea.select();
+		document.execCommand('copy');
+		document.body.removeChild(textarea);
+		this.$message.success('复制成功');
+	  },
+	  initQc(){
+		this.$qrcode.toCanvas(this.$refs.canvasRef, this.url, {
+		  width: 180, // 设置二维码大小
+		});
+	  }
+	}
+  }
+</script>
+
+<style scoped lang="scss">
+  .shareUrlInp {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border: 1px solid #b0b0b0;
+	padding: 3px 12px;
+	border-radius: 2px;
+
+	&-url {
+	  width: calc(100% - 100px);
+	  white-space: nowrap;
+	  overflow: hidden;
+	}
+  }
+</style>

package/packages/BnRadio/BnRadio.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="BnRadio" :class="{'disabled': disabled}" @click="handleClick">
+    <span class="BnRadio-icon bnUIcon" :class="{ 'bnUIcon-unChoose': !isCheck, 'bnUIcon-choose': isCheck }"/>
+    <slot>
+      <span class="BnRadio-label" v-if="title" :style="labelStyle" :title="title">{{ title }}</span>
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BnRadio",
+  props: {
+    modelValue: [Boolean, String, Number, Object],
+    trueData: [Boolean, String, Number, Object],
+    falseData: [Boolean, String, Number],
+    // option基础结构
+    optionProps: {
+      default() {
+        return {
+          value: 'id',
+          label: 'name'
+        };
+      }
+    },
+    isChecked: Function,
+    onClick: Function,
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 允许取消
+    allowCancel: {
+      type: Boolean,
+      default: true
+    },
+    label: String,
+    labelStyle: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    title() {
+      let label = this.label;
+      if (typeof this.trueData == 'object') {
+        label = this.trueData[this.optionProps.label]
+      }
+      return label;
+    },
+    isCheck() {
+      if (this.isChecked) {
+        const result = this.isChecked({
+          value: this.modelValue,
+          trueData: this.trueData,
+          falseData: this.falseData
+        });
+        return typeof result === "boolean" ? result : result > -1;
+      } else {
+        return this.check();
+      }
+    },
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val) {
+        this.$emit("update:modelValue", val);
+      }
+    }
+  },
+  methods: {
+    /**
+     * 组件默认判断
+     * */
+    check() {
+      if (typeof this.trueData == 'object') {
+        return this.modelValue[this.optionProps.value] == this.trueData[this.optionProps.value]
+      } else {
+        return this.modelValue == this.trueData;
+      }
+    },
+    /**
+     * 点击事件
+     * */
+    handleClick() {
+      if (this.disabled) {
+        this.emitClick();
+        return;
+      }
+      if (this.isCheck) {
+        // 选中后不允许取消，直接回
+        if (!this.allowCancel) {
+          return;
+        }
+        if (typeof this.trueData == 'object') {
+          this.value = {}
+        } else if (typeof this.trueData == 'boolean') {
+          this.value = false;
+        } else if (typeof this.trueData == 'string') {
+          this.value = '';
+        } else if (typeof this.trueData == 'number') {
+          this.value = '';
+        } else if (this.falseData) {
+          this.value = this.falseData;
+        }
+      } else {
+        this.value = this.trueData;
+      }
+      this.$emit("change", {
+        value: this.modelValue,
+        trueData: this.trueData,
+        falseData: this.falseData
+      });
+      this.emitClick();
+    },
+    /**
+     * 点击事件透出
+     * */
+    emitClick() {
+      if (this.onClick) {
+        this.onClick({
+          value: this.modelValue,
+          trueData: this.trueData,
+          falseData: this.falseData
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+@import "./../font/iconfont.css";
+
+.BnRadio {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  line-height: 22px;
+  cursor: pointer;
+}
+
+.BnRadio.disabled {
+  cursor: not-allowed;
+}
+
+.BnRadio.disabled > :nth-child(2) {
+  opacity: 0.2;
+}
+
+.BnRadio-icon {
+  color: #888;
+
+  &.bnUIcon-choose {
+    color: #1890ff;
+  }
+}
+
+.disabled .BnRadio-icon {
+  color: #ccc;
+
+  &.bnUIcon-choose {
+    color: #71b1f1;
+  }
+}
+
+.BnRadio-label {
+  box-sizing: content-box !important;
+  display: inline-block;
+  max-width: calc(100% - 22px);
+  padding: 0 8px;
+  font-size: 14px;
+  color: #444;
+  user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
+