congmao-cli 1.0.0

package/src/template/Vue2/src/pages/form/base/index.vue

@@ -0,0 +1,254 @@
+<template>
+  <t-card :bordered="false">
+    <t-form
+      ref="form"
+      :data="formData"
+      :rules="FORM_RULES"
+      label-align="top"
+      :label-width="100"
+      @reset="onReset"
+      @submit="onSubmit"
+    >
+      <div class="form-basic-container">
+        <div class="form-basic-item">
+          <div class="form-basic-container-title">合同信息</div>
+          <!-- 表单内容 -->
+
+          <!-- 合同名称,合同类型 -->
+          <t-row class="row-gap" :gutter="[16, 24]">
+            <t-col :span="6">
+              <t-form-item label="合同名称" name="name">
+                <t-input v-model="formData.name" :style="{ width: '322px' }" placeholder="请输入内容" />
+              </t-form-item>
+            </t-col>
+            <t-col :span="6">
+              <t-form-item label="合同类型" name="type">
+                <t-select
+                  v-model="formData.type"
+                  :style="{ width: '322px' }"
+                  placeholder="请选择类型"
+                  class="demo-select-base"
+                  clearable
+                >
+                  <t-option v-for="(item, index) in typeOptions" :key="index" :value="item.value" :label="item.label">
+                    {{ item.label }}
+                  </t-option>
+                </t-select>
+              </t-form-item>
+            </t-col>
+
+            <!-- 合同收付类型 -->
+            <t-col :span="8">
+              <t-form-item label="合同收付类型" name="payment">
+                <t-radio-group v-model="formData.payment">
+                  <t-radio value="1"> 收款 </t-radio>
+                  <t-radio value="2"> 付款 </t-radio>
+                </t-radio-group>
+                <span class="space-item" />
+                <t-input placeholder="请输入金额" :style="{ width: '160px' }" />
+              </t-form-item>
+            </t-col>
+
+            <t-col :span="6">
+              <t-form-item label="甲方" name="partyA">
+                <t-select
+                  v-model="formData.partyA"
+                  :style="{ width: '322px' }"
+                  class="demo-select-base"
+                  placeholder="请选择类型"
+                  clearable
+                >
+                  <t-option v-for="(item, index) in partyAOptions" :key="index" :value="item.value" :label="item.label">
+                    {{ item.label }}
+                  </t-option>
+                </t-select>
+              </t-form-item>
+            </t-col>
+            <t-col :span="6">
+              <t-form-item label="乙方" name="partyB">
+                <t-select
+                  v-model="formData.partyB"
+                  :style="{ width: '322px' }"
+                  placeholder="请选择类型"
+                  class="demo-select-base"
+                  clearable
+                >
+                  <t-option v-for="(item, index) in partyBOptions" :key="index" :value="item.value" :label="item.label">
+                    {{ item.label }}
+                  </t-option>
+                </t-select>
+              </t-form-item>
+            </t-col>
+            <t-col :span="6">
+              <t-form-item label="合同签订日期" name="signDate">
+                <t-date-picker
+                  v-model="formData.signDate"
+                  :style="{ width: '322px' }"
+                  theme="primary"
+                  mode="date"
+                  separator="/"
+                />
+              </t-form-item>
+            </t-col>
+            <t-col :span="6">
+              <t-form-item label="合同生效日期" name="startDate">
+                <t-date-picker
+                  v-model="formData.startDate"
+                  :style="{ width: '322px' }"
+                  theme="primary"
+                  mode="date"
+                  separator="/"
+                />
+              </t-form-item>
+            </t-col>
+            <t-col :span="6">
+              <t-form-item label="合同结束日期" name="endDate">
+                <t-date-picker
+                  v-model="formData.endDate"
+                  :style="{ width: '322px' }"
+                  theme="primary"
+                  mode="date"
+                  separator="/"
+                />
+              </t-form-item>
+            </t-col>
+            <t-col :span="6">
+              <t-form-item label="" name="files">
+                <t-upload
+                  v-model="formData.files"
+                  action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
+                  tips="请上传pdf文件，大小在60M以内"
+                  :size-limit="{ size: 60, unit: 'MB' }"
+                  :format-response="formatResponse"
+                  :before-upload="beforeUpload"
+                  @fail="handleFail"
+                >
+                  <t-button class="form-submit-upload-btn" variant="outline"> 上传合同文件 </t-button>
+                </t-upload>
+              </t-form-item>
+            </t-col>
+          </t-row>
+
+          <div class="form-basic-container-title form-title-gap">其它信息</div>
+
+          <t-form-item label="备注" name="comment">
+            <t-textarea v-model="formData.comment" :height="124" placeholder="请输入备注" />
+          </t-form-item>
+          <t-form-item label="公证人">
+            <t-avatar-group>
+              <t-avatar>D</t-avatar>
+              <t-avatar>S</t-avatar>
+              <t-avatar>+</t-avatar>
+            </t-avatar-group>
+          </t-form-item>
+        </div>
+      </div>
+
+      <div class="form-submit-container">
+        <div class="form-submit-sub">
+          <div class="form-submit-left">
+            <t-button theme="primary" class="form-submit-confirm" type="submit"> 提交 </t-button>
+            <t-button type="reset" class="form-submit-cancel" theme="default" variant="base"> 取消 </t-button>
+          </div>
+        </div>
+      </div>
+    </t-form>
+  </t-card>
+</template>
+<script>
+import { prefix } from '@/config/global';
+
+const INITIAL_DATA = {
+  name: '',
+  type: '',
+  partyA: '',
+  partyB: '',
+  signDate: '',
+  startDate: '',
+  endDate: '',
+  payment: '1',
+  amount: 0,
+  comment: '',
+  files: [],
+};
+const FORM_RULES = {
+  name: [{ required: true, message: '请输入合同名称', type: 'error' }],
+  type: [{ required: true, message: '请选择合同类型', type: 'error' }],
+  payment: [{ required: true, message: '请选择合同收付类型', type: 'error' }],
+  amount: [{ required: true, message: '请输入合同金额', type: 'error' }],
+  partyA: [{ required: true, message: '请选择甲方', type: 'error' }],
+  partyB: [{ required: true, message: '请选择乙方', type: 'error' }],
+  signDate: [{ required: true, message: '请选择日期', type: 'error' }],
+  startDate: [{ required: true, message: '请选择日期', type: 'error' }],
+  endDate: [{ required: true, message: '请选择日期', type: 'error' }],
+};
+
+export default {
+  name: 'FormBase',
+  data() {
+    return {
+      prefix,
+      stepSuccess: true,
+      formData: { ...INITIAL_DATA },
+      FORM_RULES,
+      typeOptions: [
+        { label: '类型A', value: '1' },
+        { label: '类型B', value: '2' },
+        { label: '类型C', value: '3' },
+      ],
+      partyAOptions: [
+        { label: '公司A', value: '1' },
+        { label: '公司B', value: '2' },
+        { label: '公司C', value: '3' },
+      ],
+      partyBOptions: [
+        { label: '公司A', value: '1' },
+        { label: '公司B', value: '2' },
+        { label: '公司C', value: '3' },
+      ],
+      textareaValue: '',
+      rules: {
+        name: [{ required: true, message: '请输入合同名称', type: 'error' }],
+        type: [{ required: true, message: '请选择合同类型', type: 'error' }],
+        payment: [{ required: true, message: '请选择合同收付类型', type: 'error' }],
+        amount: [{ required: true, message: '请输入合同金额', type: 'error' }],
+        partyA: [{ required: true, message: '请选择甲方', type: 'error' }],
+        partyB: [{ required: true, message: '请选择乙方', type: 'error' }],
+        signDate: [{ required: true, message: '请选择日期', type: 'error' }],
+        startDate: [{ required: true, message: '请选择日期', type: 'error' }],
+        endDate: [{ required: true, message: '请选择日期', type: 'error' }],
+      },
+    };
+  },
+  methods: {
+    handleFail({ file }) {
+      this.$message.error(`文件 ${file.name} 上传失败`);
+    },
+    beforeUpload(file) {
+      if (!/\.(pdf)$/.test(file.name)) {
+        this.$message.warning('请上传pdf文件');
+        return false;
+      }
+      return true;
+    },
+    // 用于格式化接口响应值，error 会被用于上传失败的提示文字；url 表示文件/图片地址
+    formatResponse(res) {
+      return { ...res, error: '上传失败，请重试', url: res.url };
+    },
+    changeStatus() {
+      this.stepSuccess = !this.stepSuccess;
+    },
+    onReset() {
+      this.$message.warning('取消新建');
+    },
+    onSubmit({ validateResult }) {
+      if (validateResult === true) {
+        this.$message.success('新建成功');
+      }
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+@import './index';
+</style>

package/src/template/Vue2/src/pages/form/step/index.less

@@ -0,0 +1,37 @@
+@import '@/style/variables';
+
+.form-step-container {
+  background-color: var(--td-bg-color-container);
+
+  .t-card {
+    padding: 8px;
+  }
+}
+
+.rule-tips {
+  margin: 8px 24px 0;
+}
+
+.step-container {
+  padding: 8px 24px 0;
+}
+
+.step-form {
+  padding: 24px;
+}
+
+.step-form-4 {
+  padding: 66px 0 90px 0;
+  text-align: center;
+  > .t-icon {
+    margin-bottom: 16px;
+  }
+  > .text {
+    font-size: 20px;
+    font-weight: 500;
+    margin-bottom: 8px;
+  }
+  > .button-group {
+    margin-top: 32px;
+  }
+}

package/src/template/Vue2/src/pages/form/step/index.vue

@@ -0,0 +1,259 @@
+<template>
+  <t-card :bordered="false">
+    <div class="form-step-container">
+      <!-- 简单步骤条 -->
+      <t-card :bordered="false">
+        <t-steps :defaultCurrent="1" :current="activeForm" status="process">
+          <t-step-item title="申请提交" content="已于12月21日提交"></t-step-item>
+          <t-step-item title="电子发票" content="预计1～3个工作日"></t-step-item>
+          <t-step-item title="发票已邮寄" content="电子发票开出后7个工作日内联系"></t-step-item>
+          <t-step-item title="完成" content=""></t-step-item>
+        </t-steps>
+      </t-card>
+
+      <!-- 分步表单1 -->
+      <div v-show="activeForm === 0" class="rule-tips">
+        <t-alert theme="info" title="发票开具规则：" :close="true">
+          <div slot="message">
+            <p class="span-txt">
+              1、申请开票后，电子发票在1～3个工作日内开具；增值税专用发票（纸质）如资质审核通过，将在电子发票开具后10个工作日内为您寄出；
+            </p>
+            <p class="span-txt">2、开票金额为您实际支付金额；</p>
+            <p class="span-txt">3、如有疑问请直接联系：13300001111。</p>
+          </div>
+        </t-alert>
+      </div>
+      <t-form
+        v-show="activeForm === 0"
+        class="step-form"
+        :data="formData1"
+        :rules="rules"
+        labelAlign="right"
+        @submit="onSubmit1"
+      >
+        <t-form-item label="合同名称" name="name">
+          <t-select :style="{ width: '390px' }" v-model="formData1.name" class="demo-select-base" clearable>
+            <t-option v-for="(item, index) in nameOptions" :value="item.value" :label="item.label" :key="index">
+              {{ item.label }}
+            </t-option>
+          </t-select>
+        </t-form-item>
+        <t-form-item label="发票类型" name="type">
+          <t-select :style="{ width: '390px' }" v-model="formData1.type" class="demo-select-base" clearable>
+            <t-option v-for="(item, index) in typeOptions" :value="item.value" :label="item.label" :key="index">
+              {{ item.label }}
+            </t-option>
+          </t-select>
+        </t-form-item>
+        <t-form-item class="amount-label" label="开票金额"> {{ amount }} 元 </t-form-item>
+        <t-form-item>
+          <t-button theme="primary" type="submit">提交申请</t-button>
+        </t-form-item>
+      </t-form>
+
+      <!-- 分步表单2 -->
+      <t-form
+        v-show="activeForm === 1"
+        class="step-form"
+        :data="formData2"
+        :rules="rules"
+        labelAlign="right"
+        @reset="onReset2"
+        @submit="onSubmit2"
+      >
+        <t-form-item label="发票抬头" name="title">
+          <t-input :style="{ width: '480px' }" v-model="formData2.title" placeholder="请输入发票抬头"></t-input>
+        </t-form-item>
+        <t-form-item label="纳税人识别号" name="taxNum">
+          <t-input :style="{ width: '480px' }" v-model="formData2.taxNum" placeholder="请输入纳税人识别号"></t-input>
+        </t-form-item>
+        <t-form-item label="单位地址" name="address">
+          <t-input :style="{ width: '480px' }" v-model="formData2.address" placeholder="请输入单位地址"></t-input>
+        </t-form-item>
+        <t-form-item label="开户行" name="bank">
+          <t-input :style="{ width: '480px' }" v-model="formData2.bank" placeholder="请输入开户行"></t-input>
+        </t-form-item>
+        <t-form-item label="银行账号" name="bankAccount">
+          <t-input :style="{ width: '480px' }" v-model="formData2.bankAccount" placeholder="请输入银行账号"></t-input>
+        </t-form-item>
+        <t-form-item label="通知邮箱" name="email">
+          <t-input :style="{ width: '480px' }" v-model="formData2.email" placeholder="请输入通知邮箱"></t-input>
+        </t-form-item>
+        <t-form-item label="通知手机" name="tel">
+          <t-input :style="{ width: '480px' }" v-model="formData2.tel" placeholder="请输入通知手机"></t-input>
+        </t-form-item>
+        <t-form-item>
+          <t-button type="reset" theme="default" variant="base">上一步</t-button>
+          <t-button theme="primary" type="submit">下一步</t-button>
+        </t-form-item>
+      </t-form>
+
+      <!-- 分步表单3 -->
+      <t-form
+        v-show="activeForm === 2"
+        class="step-form"
+        :data="formData3"
+        :rules="rules"
+        labelAlign="left"
+        @reset="onReset3"
+        @submit="onSubmit3"
+      >
+        <t-form-item label="收货人" name="consignee">
+          <t-input :style="{ width: '480px' }" v-model="formData3.consignee" placeholder="请输入收货人"></t-input>
+        </t-form-item>
+        <t-form-item label="手机号码" name="mobileNum">
+          <t-input :style="{ width: '480px' }" v-model="formData3.mobileNum" placeholder="请输入手机号码"></t-input>
+        </t-form-item>
+        <t-form-item label="收货地址" name="deliveryAddress">
+          <t-select
+            :style="{ width: '480px' }"
+            placeholder="请选择收货地址"
+            v-model="formData3.deliveryAddress"
+            class="demo-select-base"
+            clearable
+          >
+            <t-option v-for="(item, index) in addressOptions" :value="item.value" :label="item.label" :key="index">
+              {{ item.label }}
+            </t-option>
+          </t-select>
+        </t-form-item>
+        <t-form-item label="详细地址" name="fullAddress">
+          <t-textarea
+            :style="{ width: '480px' }"
+            v-model="formData3.fullAddress"
+            placeholder="请输入详细地址"
+          ></t-textarea>
+        </t-form-item>
+        <t-form-item>
+          <t-button type="reset" theme="default" variant="base">上一步</t-button>
+          <t-button theme="primary" type="submit">下一步</t-button>
+        </t-form-item>
+      </t-form>
+
+      <!-- 分步表单4 -->
+      <div class="step-form-4" v-show="activeForm === 6">
+        <check-circle-filled-icon style="color: green" size="52px" />
+        <p class="text">完成开票申请</p>
+        <p class="tips">预计1～3个工作日会将电子发票发至邮箱，发票邮寄请耐心等待</p>
+        <div class="button-group">
+          <t-button @click="onReset4" theme="primary">再次申请</t-button>
+          <t-button @click="onSubmit4" variant="base" theme="default">查看进度</t-button>
+        </div>
+      </div>
+    </div>
+  </t-card>
+</template>
+<script>
+import { CheckCircleFilledIcon } from 'tdesign-icons-vue';
+import { prefix } from '@/config/global';
+
+const INITIAL_DATA1 = {
+  name: '',
+  type: '',
+};
+const INITIAL_DATA2 = {
+  title: '',
+  taxNum: '',
+  address: '',
+  bank: '',
+  bankAccount: '',
+  email: '',
+  tel: '',
+};
+const INITIAL_DATA3 = {
+  consignee: '',
+  mobileNum: '',
+  deliveryAddress: '',
+  fullAddress: '',
+};
+
+export default {
+  name: 'FormStep',
+  components: {
+    CheckCircleFilledIcon,
+  },
+  data() {
+    return {
+      prefix,
+      formData1: { ...INITIAL_DATA1 },
+      formData2: { ...INITIAL_DATA2 },
+      formData3: { ...INITIAL_DATA3 },
+      nameOptions: [
+        { label: '合同A', value: '1' },
+        { label: '合同B', value: '2' },
+        { label: '合同C', value: '3' },
+      ],
+      typeOptions: [
+        { label: '类型A', value: '1' },
+        { label: '类型B', value: '2' },
+        { label: '类型C', value: '3' },
+      ],
+      addressOptions: [
+        { label: '广东省深圳市南山区', value: '1' },
+        { label: '北京市海淀区', value: '2' },
+        { label: '上海市徐汇区', value: '3' },
+        { label: '四川省成都市高新区', value: '4' },
+        { label: '广东省广州市天河区', value: '5' },
+        { label: '陕西省西安市高新区', value: '6' },
+      ],
+      rules: {
+        name: [{ required: true, message: '请选择合同名称', type: 'error' }],
+        type: [{ required: true, message: '请选择发票类型', type: 'error' }],
+        title: [{ required: true, message: '请输入发票抬头', type: 'error' }],
+        taxNum: [{ required: true, message: '请输入纳税人识别号', type: 'error' }],
+        consignee: [{ required: true, message: '请输入收货人', type: 'error' }],
+        mobileNum: [{ required: true, message: '请输入手机号码', type: 'error' }],
+        deliveryAddress: [{ required: true, message: '请选择收货地址', type: 'error' }],
+        fullAddress: [{ required: true, message: '请输入详细地址', type: 'error' }],
+      },
+      activeForm: 0,
+    };
+  },
+  computed: {
+    amount() {
+      if (this.formData1.name === '1') {
+        return '565421';
+      }
+      if (this.formData1.name === '2') {
+        return '278821';
+      }
+      if (this.formData1.name === '3') {
+        return '109824';
+      }
+      return '--';
+    },
+  },
+  methods: {
+    onSubmit1({ validateResult }) {
+      if (validateResult === true) {
+        this.activeForm = 1;
+      }
+    },
+    onSubmit2({ validateResult }) {
+      if (validateResult === true) {
+        this.activeForm = 2;
+      }
+    },
+    onReset2() {
+      this.activeForm = 0;
+    },
+    onSubmit3({ validateResult }) {
+      if (validateResult === true) {
+        this.activeForm = 6;
+      }
+    },
+    onReset3() {
+      this.activeForm = 1;
+    },
+    onSubmit4() {
+      this.$router.replace({ path: '/detail/advanced' });
+    },
+    onReset4() {
+      this.activeForm = 0;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+@import './index';
+</style>

package/src/template/Vue2/src/pages/frame/doc/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div :class="`${prefix}-iframe-page`" :style="getWrapStyle">
+    <t-loading :loading="loading" size="large" :style="getWrapStyle">
+      <iframe ref="frameRef" :src="frameSrc" :class="`${prefix}-iframe-page__main`" @load="hideLoading"></iframe>
+    </t-loading>
+  </div>
+</template>
+<script lang="ts">
+import { prefix } from '@/config/global';
+import STYLE_CONFIG from '@/config/style';
+
+const computedStyle = getComputedStyle(document.documentElement);
+const sizeXxxl = computedStyle.getPropertyValue('--td-comp-size-xxxl');
+const paddingTBXxl = computedStyle.getPropertyValue('--td-comp-paddingTB-xxl');
+
+export default {
+  name: 'DetailAdvanced',
+  data() {
+    return {
+      prefix,
+      loading: true,
+      frameSrc: 'https://tdesign.tencent.com/starter/docs/vue/get-started',
+      settingStore: { ...STYLE_CONFIG },
+      getWrapStyle: `height: ${window.innerHeight}px`,
+    };
+  },
+  mounted() {
+    window.addEventListener('resize', this.calcHeight, false);
+    this.$nextTick(() => {
+      this.calcHeight();
+    });
+  },
+  methods: {
+    hideLoading() {
+      this.loading = false;
+      this.calcHeight();
+    },
+
+    getOuterHeight(dom: Element) {
+      let height = dom.clientHeight;
+      const computedStyle = window.getComputedStyle(dom);
+      height += parseInt(computedStyle.marginTop, 10);
+      height += parseInt(computedStyle.marginBottom, 10);
+      height += parseInt(computedStyle.borderTopWidth, 10);
+      height += parseInt(computedStyle.borderBottomWidth, 10);
+      return height;
+    },
+
+    calcHeight() {
+      const iframe = this.$refs.frameRef;
+      if (!iframe) {
+        return;
+      }
+      let clientHeight = 0;
+      const { showFooter, isUseTabsRouter, showBreadcrumb } = this.settingStore;
+      const headerHeight = parseFloat(sizeXxxl);
+      const navDom = document.querySelector('.t-tabs__nav');
+      const navHeight = isUseTabsRouter ? this.getOuterHeight(navDom) : 0;
+      const breadcrumbDom = document.querySelector('.t-breadcrumb');
+      const breadcrumbHeight = showBreadcrumb ? this.getOuterHeight(breadcrumbDom) : 0;
+      const contentPadding = parseFloat(paddingTBXxl) * 2;
+      const footerDom = document.querySelector('.t-layout__footer');
+      const footerHeight = showFooter ? this.getOuterHeight(footerDom) : 0;
+      const top = headerHeight + navHeight + breadcrumbHeight + contentPadding + footerHeight + 2;
+      window.innerHeight -= top;
+      clientHeight = document.documentElement.clientHeight - top;
+      iframe.style.height = `${clientHeight}px`;
+      this.getWrapStyle = `height: ${window.innerHeight}px`;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+@import '@/style/variables';
+
+.@{starter-prefix}-iframe-page {
+  &__main {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: #fff;
+    border: 0;
+    box-sizing: border-box;
+  }
+}
+</style>