@toolspack/ttd-common 0.2.1 → 0.2.2

package/src/styles/element-variables.scss

@@ -0,0 +1,220 @@
+/* 改变主题色变量 */
+$--color-primary: #336FFF;
+$--color-text-primary: #222222 !default;
+$--color-text-regular: #606266 !default;
+$--color-text-secondary: #909399 !default;
+// $--color-text-placeholder: #C9C9C9 !default;
+$--color-text-placeholder: #cccccc !default;
+$--input-focus-border: #3388FF;
+$--border-color-base: #ccc !default;
+
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+$--input-color: $--color-text-primary !default;
+$--input-border-color: $--border-color-base !default;
+
+
+.el-form-item__label {
+  color: #666666;
+}
+
+/* 产品创设， 为了使label和title的间距 减小 */
+.el-form--label-top .el-form-item__label {
+  padding: 0 0 3px 0;
+}
+
+.el-form--inline .el-form-item {
+  margin-right: 16px;
+}
+
+.el-radio__input.is-checked+.el-radio__label {
+  color: inherit
+}
+
+
+/*  为了使MessageBox 的按钮 变大 (element-ui 使用small) */
+.el-message-box {
+  .el-message-box__btns {
+    .el-button {
+      padding: 12px 23px
+    }
+  }
+}
+
+.el-checkbox__input.is-disabled.is-checked {
+  .el-checkbox__inner::after {
+    border-color: #336FFF;
+  }
+}
+
+.el-checkbox.no-label {
+  .el-checkbox__label {
+    display: none;
+  }
+}
+
+.el-radio {
+  .el-radio__inner {
+    width: 20px;
+    height: 20px;
+
+    &:after {
+      width: 10px;
+      height: 10px
+    }
+  }
+
+  .el-radio__input.is-checked:not(.is-disabled) {
+    .el-radio__inner {
+      background: #fff;
+    }
+
+    .el-radio__inner:after {
+      background: #336FFF;
+    }
+  }
+}
+
+/*  修改按钮组的圆角 */
+.el-radio-group {
+
+  // .el-radio-button:first-child {
+  //   .el-radio-button__inner {
+  //     border-radius: 22px 0 0 22px
+  //   }
+  // }
+
+  // .el-radio-button:last-child {
+  //   .el-radio-button__inner {
+  //     border-radius: 0 22px 22px 0
+  //   }
+  // }
+}
+
+.el-dialog {
+  /*  为了不让继承 容器元素的值 （page-bottom）  */
+  text-align: left;
+  line-height: initial;
+  border-radius: 10px;
+
+  .el-dialog__header {
+    padding: 30px 30px 10px 30px
+  }
+
+  .el-dialog__body {
+    padding: 10px 30px 20px 30px
+  }
+
+  .el-dialog__footer {
+    border-radius: 0 0 10px 10px;
+  }
+}
+
+.el-message-box {
+  height: 300px;
+  width: 400px;
+  position: relative;
+  color: #222;
+
+  .el-message-box__content {
+    font-size: 16px;
+    color: #222;
+    position: absolute;
+    top: 40%;
+    transform: translate(0, -40%);
+    left: 0;
+    right: 0;
+  }
+
+  .el-message-box__btns {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 15px 30px;
+    background: #F5F5F5;
+  }
+}
+
+.messageMaxWith {
+  max-width: 300px;
+
+  .el-message__content {
+    line-height: 1.5em;
+  }
+}
+
+.el-upload--picture-card,
+.el-upload-list--picture-card .el-upload-list__item {
+  width: 120px;
+  height: 120px;
+  text-align: center;
+}
+
+.el-upload--picture-card {
+  line-height: 120px;
+
+  .el-icon-plus {
+    font-size: 36px;
+  }
+}
+
+.avatar-uploade {
+  overflow: hidden;
+
+  .avatar-uploade-img {
+    width: 120px;
+    height: 120px;
+  }
+}
+
+
+.plyr--audio .plyr__control.plyr__tab-focus, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true] {
+  background: $--color-primary !important;
+}
+.plyr--full-ui input[type=range] {
+  color: $--color-primary !important;
+}
+
+.el-alert--primary.is-light {
+  color: $--color-primary !important;
+  background-color: rgba(51, 111, 255, 0.1);
+}
+
+.alert-reset {
+  .el-alert__icon{
+    width: 16px;
+    font-size: 20px;
+    align-self: flex-start;
+  }
+  .el-alert__title {
+    font-size: 16px;
+    font-weight: 600;
+  }
+  .el-alert__description {
+    font-size: 14px;
+    line-height: 22px;
+    word-break: break-word;
+  }
+}
+
+.alert-reset.el-alert--error {
+  .el-alert__description {
+    color: #9E9494;
+  }
+}
+
+// 自定义el-tab样式
+.custom-tab .el-tabs__item {
+  padding: 14px 0 0 0;
+  width: 184px;
+  height: 56px;
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+}
+.custom-tab .el-tabs__header {
+  margin: 0 0 24px;
+}

package/src/styles/input.less

@@ -0,0 +1,59 @@
+/* input 和 button 的样式控制 */
+
+
+.gray-btn {
+  color: #222222;
+  border-color: #cccccc;
+
+  &:hover {
+    color: #38f;
+    border-color: #38f;
+    background-color: #fff;
+  }
+
+  &:active {
+    color: #fff;
+    background-color: #38f;
+    border-color: #38f;
+  }
+
+  &:disabled {
+    color: #ccc;
+    background-color: #F5F5F5;
+    border: 1px solid #E0E0E0;
+  }
+}
+
+.el-button--danger {
+  border-color: #FF3838;
+  background: #ffffff;
+  color: #FF3838;
+
+  &:hover {
+    color: #FF0511;
+  }
+}
+
+
+.el-input__inner {
+  border-radius: 2px;
+  padding: 0 10px;
+
+}
+
+.el-input__inner::-ms-reveal {
+  display: none;
+}
+
+
+.el-form-item.is-success .el-input__inner,
+.el-form-item.is-success .el-input__inner:focus,
+.el-form-item.is-success .el-textarea__inner,
+.el-form-item.is-success .el-textarea__inner:focus {
+  border-color: #E0E0E0
+}
+
+.el-input.is-disabled .el-input__inner {
+  border: 1px solid #E0E0E0;
+  color: #CCCCCC;
+}

package/src/views/About.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <div>这是一个基础模板</div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {}
+  },
+  created() {},
+  methods: {},
+}
+</script>

package/src/views/MakeLabel.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="main-wrapper flex">
+    <div class="flex-item">
+      <div class="page-title">
+        <span class="back-btn" @click="$router.go(-1)">
+          <i class="return"></i>
+        </span>
+        <span>标签配置</span>
+      </div>
+      <div class="page-content">
+        <div class="content-main">
+          <div class="border-line">
+            <div class="body-con">
+              <div class="contract-con">
+                <div class="title-con" style="position: relative">
+                  <div style="text-align: center">
+                    <switch-page @page="page = $event" :numPages="numPages"></switch-page>
+                  </div>
+                </div>
+                <div class="pdf-box">
+                  <pdf-view
+                    :pdfurl="fileUrl.url"
+                    :showPages="false"
+                    :border="true"
+                    :scale="1.5"
+                    :page="page"
+                    @size="onSize"
+                    @numPages="numPages = $event"
+                  >
+                    <ttd-label-make
+                      :labelViewData="labelContent"
+                      :labelCurrent="itemObj"
+                      :page="page"
+                      @getLabelData="getLabelData"
+                      :labelView="labelView"
+                    >
+                      <el-form-item class="remark-wrapper" label="是否换222行" prop="isMultiline">
+                        <el-select v-model="formData.isMultiline">
+                          <el-option label="单行" :value="0"></el-option>
+                          <el-option label="多行" :value="1"></el-option>
+                        </el-select>
+                      </el-form-item>
+                      <el-form-item class="remark-wrapper" label="是否换33行" prop="isMultiline">
+                        <el-select v-model="formData.isMultiline">
+                          <el-option label="单行" :value="0"></el-option>
+                          <el-option label="多行" :value="1"></el-option>
+                        </el-select>
+                      </el-form-item>
+                    </ttd-label-make>
+                  </pdf-view>
+                </div>
+              </div>
+              <div class="label-done">
+                <ttd-label-operate
+                  :showSelectLabel="false"
+                  isConsign
+                  :operateConfig="operateConfig"
+                  :labelData="labelData"
+                  @getSignItem="getSignItem"
+                  @setLabelView="labelView=$event"
+                >
+                  <search-label @emit-label="getSignItem" />
+                </ttd-label-operate>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="page-bottom">
+      <el-button @click="onCancel" style="width: 120px;">返 回</el-button>
+      <el-button @click="onSubmit" type="primary" style="width: 120px;">提 交</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { labelsManager, labelsInvestor } from './labels';
+
+export default {
+  data() {
+    return {
+      typeId: this.$route.query.id,
+      modelInfo: {},
+      fileUrl: {},
+      itemObj: null,
+      currentView: '',
+      page: 1,
+      numPages: 0,
+      textLabelList: [],
+      inputNameList: [],
+      labelData: [], // 将要提交的所有标签数据
+      labelView: 0,
+      labelContent: [],
+
+      sureBack: false,
+      operateConfig: [],
+      viewport: null,
+      formData: {},
+    };
+  },
+  created() {
+    this.getModelDetail()
+  },
+  methods: {
+    async onCancel() {
+      await this.$confirm('您确定不保留本次配置结果？', '提示')
+      this.$router.go(-1);
+    },
+    getLabelData(labelData) {
+      this.labelData = labelData;
+      this.itemObj = null
+    },
+
+    getSignItem(type) {
+      console.log('getSignItem=', type)
+      this.itemObj = type;
+    },
+    onSize(viewport, page) {
+      this.viewport = viewport
+      console.log('viewport', viewport)
+      console.log('page', page)
+    },
+
+    getModelDetail() {
+      this.fileUrl.url = 'https://wsp.totodi.com/visit/totodi-other/20210617-c71f4fc934ba4fb68d053e6960021c75-otocol.pdf?expireDataTime=1637835905131';
+      this.operateConfig = [labelsManager, labelsInvestor]
+    },
+
+    onSubmit() {
+      if (this.hasLabel()) {
+        const labelDetails = [];
+        const signDetails = [];
+        this.labelData.forEach((element) => {
+          const { xAxis, yAxis } = element
+          // const xLocation = Math.round(xAxis / 1.5)
+          // ttd-label-make 里计算的左边已经加了 标签高度
+          // const yLocation = Math.round((this.viewport.height - yAxis) / 1.5)
+          if (element.shape === 2 || element.shape === 4) {
+            signDetails.push(
+              {
+                ...element,
+                signLocationType: 3, // 签章定位方式：1：关键字定位 3:坐标 5:骑缝章
+                locationPage: element.pageIndex, // 页码（签章定位方式。）
+                xLocation: xAxis, // x坐标
+                yLocation: yAxis, // y坐标
+                stampType: element.sealTag || element.stampType,
+              },
+            )
+          } else {
+            // 合并标签的 是妥妥递做的，合章（待证书）是cfca做的，
+            // cfca 是以左下角为原点
+            labelDetails.push(
+              {
+                ...element,
+                aliasName: element.labelAlias, // 标记域描述(对应文本标签的标签)
+                labelType: 1, // 标记类型。1:text
+                isMust: '1', // 0非必填，1必填
+                labelContent: null, // 扩展内容。labelType为1,5可不填写
+                isMultiline: 0, // 是否换行  1--是 0--否
+              },
+            )
+          }
+        });
+        console.log(JSON.stringify(labelDetails), JSON.stringify(signDetails))
+      } else {
+        this.$alert(
+          '根据模板配置的签约方，尚有未完成配置的印章或签名标签，请完成配置后提交',
+          '提示',
+        );
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import "./MakelLabel.less";
+</style>

package/src/views/MakelLabel.less

@@ -0,0 +1,162 @@
+.index {
+  overflow: hidden;
+  padding-bottom: 20px;
+}
+
+.input-list {
+  float: left;
+  margin-left: 40px;
+}
+
+.input-list>div {
+  margin-bottom: 40px;
+}
+
+.title {
+  height: 50px;
+  line-height: 50px;
+  border-bottom: 1px solid #ccc;
+}
+
+.title h4 {
+  float: left;
+}
+
+.title i {
+  float: right;
+}
+
+.border-line {
+  margin-top: 16px;
+}
+
+.body-con {
+  overflow: hidden;
+  min-width: 1260px;
+  display: table-row;
+}
+
+.title-con {
+  padding: 0 20px;
+  font-size: 14px;
+  text-align: left;
+  line-height: 50px;
+  border-bottom: 1px solid #ccc;
+  display: table-cell;
+  vertical-align: top;
+}
+
+.contract-con {
+  min-width: 800px;
+  font-size: 16px;
+  text-align: center;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+  margin-right: 20px;
+}
+
+.label-done {
+  margin-left: 16px;
+  display: table-cell;
+  vertical-align: top;
+}
+
+.label-list {
+  margin: 10px auto;
+  padding: 10px 0;
+  text-align: center;
+  width: 300px;
+  border: 1px solid #ccc;
+}
+
+.label-list .label-item {
+  margin-bottom: 20px;
+}
+
+.label-list .label-item .btn {
+  width: 240px;
+}
+
+.input-width {
+  width: 200px;
+}
+
+.label-write {
+  padding: 20px 0px;
+  border-top: 1px dashed #ccc;
+}
+
+.foot-submit {
+  text-align: center;
+}
+
+.gongzhang {
+  margin: auto;
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.gongzhang img {
+  width: 100%;
+  height: 100%;
+}
+
+.label-name {
+  margin-top: 10px;
+  color: #20a0ff;
+  font-size: 14px;
+}
+
+.pdf-box {
+  position: relative;
+  display: inline-block;
+}
+
+.pdf-box .tag {
+  position: absolute;
+  z-index: 999;
+  top: 0;
+  display: none;
+}
+
+.allSign {
+  margin-bottom: 20px;
+}
+
+.view-btn {
+  width: 40px;
+  height: 20px;
+  background: none;
+  font-size: 12px !important;
+  border: 1px solid #3d82f7;
+  text-align: center;
+  line-height: 20px;
+  font-size: 14px;
+  border-radius: 2px;
+  padding: 0;
+  color: #3d82f7;
+  float: right;
+  cursor: pointer;
+  outline: none;
+}
+
+/*.pdf-box:hover .tag {*/
+/*display: block !important;*/
+/*}*/
+
+.close {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  background: coral;
+  color: #fff;
+  transform: rotateZ(45deg);
+  text-align: center;
+  line-height: 20px;
+  cursor: pointer;
+}

package/src/views/labels.js

@@ -0,0 +1,48 @@
+// 标签类型 http://192.168.88.120:200/index.php?s=/25&page_id=721
+export const labelsManager = {
+  typeName: '募集机构印章标签',
+  typeSeal: [
+    {
+      name: '募集机构章签章',
+      type: 29,
+      shape: 2,
+      stampType: 1,
+    },
+    {
+      name: '募集机构法人章签章',
+      type: 31,
+      stampType: 2,
+      shape: 2,
+    },
+    {
+      name: '募集机构业务或合同章',
+      type: 33,
+      stampType: 3,
+      shape: 2,
+    },
+    {
+      name: '募集机文本',
+      type: 1,
+      stampType: 3,
+      shape: 1,
+    },
+  ],
+}
+
+export const labelsInvestor = {
+  typeName: '投资者印章标签',
+  typeSeal: [{
+    name: '投资机构签章',
+    labelAlias: 'customerSign',
+    stampType: 'ORG_SEAL',
+    type: 7,
+    shape: 2,
+  }, {
+    name: '机构投资者法人章',
+    labelAlias: 'customerSign',
+    stampType: 'ORG_LEGAL_SEAL',
+    shape: 4,
+    type: 37,
+  }],
+}
+export default labelsManager