congmao-cli 1.0.0

package/src/template/Vue2/src/pages/frame/tdesign/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/vue-next/getting-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>

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

@@ -0,0 +1,267 @@
+<template>
+  <div>
+    <t-card class="list-card-container" :bordered="false">
+      <t-row justify="space-between">
+        <div class="left-operation-container">
+          <t-button @click="handleSetupContract"> 新建合同 </t-button>
+          <t-button variant="base" theme="default" :disabled="!selectedRowKeys.length"> 导出合同 </t-button>
+          <p v-if="!!selectedRowKeys.length" class="selected-count">已选{{ selectedRowKeys.length }}项</p>
+        </div>
+        <t-input v-model="searchValue" class="search-input" placeholder="请输入你需要搜索的内容" clearable>
+          <template #suffix-icon>
+            <search-icon size="20px" />
+          </template>
+        </t-input>
+      </t-row>
+
+      <div class="table-container">
+        <t-table
+          :columns="columns"
+          :data="data"
+          :rowKey="rowKey"
+          :verticalAlign="verticalAlign"
+          :hover="hover"
+          :pagination="pagination"
+          :selected-row-keys="selectedRowKeys"
+          :loading="dataLoading"
+          @page-change="rehandlePageChange"
+          @change="rehandleChange"
+          @select-change="rehandleSelectChange"
+          :headerAffixedTop="true"
+          :headerAffixProps="{ offsetTop: offsetTop, container: getContainer }"
+        >
+          <template #status="{ row }">
+            <t-tag v-if="row.status === CONTRACT_STATUS.FAIL" theme="danger" variant="light">审核失败</t-tag>
+            <t-tag v-if="row.status === CONTRACT_STATUS.AUDIT_PENDING" theme="warning" variant="light">待审核</t-tag>
+            <t-tag v-if="row.status === CONTRACT_STATUS.EXEC_PENDING" theme="warning" variant="light">待履行</t-tag>
+            <t-tag v-if="row.status === CONTRACT_STATUS.EXECUTING" theme="success" variant="light">履行中</t-tag>
+            <t-tag v-if="row.status === CONTRACT_STATUS.FINISH" theme="success" variant="light">已完成</t-tag>
+          </template>
+          <template #contractType="{ row }">
+            <p v-if="row.contractType === CONTRACT_TYPES.MAIN">审核失败</p>
+            <p v-if="row.contractType === CONTRACT_TYPES.SUB">待审核</p>
+            <p v-if="row.contractType === CONTRACT_TYPES.SUPPLEMENT">待履行</p>
+          </template>
+          <template #paymentType="{ row }">
+            <p v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.PAYMENT" class="payment-col">
+              付款
+              <trend class="dashboard-item-trend" type="up" />
+            </p>
+            <p v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.RECIPT" class="payment-col">
+              收款
+              <trend class="dashboard-item-trend" type="down" />
+            </p>
+          </template>
+
+          <template #op="slotProps">
+            <a class="t-button-link" @click="handleClickDetail()">详情</a>
+            <a class="t-button-link" @click="handleClickDelete(slotProps)">删除</a>
+          </template>
+        </t-table>
+      </div>
+    </t-card>
+    <t-dialog
+      header="确认删除当前所选合同？"
+      :body="confirmBody"
+      :visible.sync="confirmVisible"
+      @confirm="onConfirmDelete"
+      :onCancel="onCancel"
+    >
+    </t-dialog>
+  </div>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+import { SearchIcon } from 'tdesign-icons-vue';
+import Trend from '@/components/trend/index.vue';
+import { prefix } from '@/config/global';
+
+import { CONTRACT_STATUS, CONTRACT_STATUS_OPTIONS, CONTRACT_TYPES, CONTRACT_PAYMENT_TYPES } from '@/constants';
+
+export default Vue.extend({
+  name: 'ListBase',
+  components: {
+    SearchIcon,
+    Trend,
+  },
+  data() {
+    return {
+      CONTRACT_STATUS,
+      CONTRACT_STATUS_OPTIONS,
+      CONTRACT_TYPES,
+      CONTRACT_PAYMENT_TYPES,
+      prefix,
+      dataLoading: false,
+      data: [],
+      selectedRowKeys: [1, 2],
+      value: 'first',
+      columns: [
+        { colKey: 'row-select', type: 'multiple', width: 64, fixed: 'left' },
+        {
+          title: '合同名称',
+          align: 'left',
+          width: 250,
+          ellipsis: true,
+          colKey: 'name',
+          fixed: 'left',
+        },
+        { title: '合同状态', colKey: 'status', width: 200, cell: { col: 'status' } },
+        {
+          title: '合同编号',
+          width: 200,
+          ellipsis: true,
+          colKey: 'no',
+        },
+        {
+          title: '合同类型',
+          width: 200,
+          ellipsis: true,
+          colKey: 'contractType',
+        },
+        {
+          title: '合同收付类型',
+          width: 200,
+          ellipsis: true,
+          colKey: 'paymentType',
+        },
+        {
+          title: '合同金额 (元)',
+          width: 200,
+          ellipsis: true,
+          colKey: 'amount',
+        },
+        {
+          align: 'left',
+          fixed: 'right',
+          width: 200,
+          colKey: 'op',
+          title: '操作',
+        },
+      ],
+      rowKey: 'index',
+      tableLayout: 'auto',
+      verticalAlign: 'top',
+      hover: true,
+      rowClassName: (rowKey: string) => `${rowKey}-class`,
+      // 与pagination对齐
+      pagination: {
+        defaultPageSize: 20,
+        total: 0,
+        defaultCurrent: 1,
+      },
+      searchValue: '',
+      confirmVisible: false,
+      deleteIdx: -1,
+    };
+  },
+  computed: {
+    confirmBody() {
+      if (this.deleteIdx > -1) {
+        const { name } = this.data?.[this.deleteIdx];
+        return `删除后，${name}的所有合同信息将被清空，且无法恢复`;
+      }
+      return '';
+    },
+    offsetTop() {
+      return this.$store.state.setting.isUseTabsRouter ? 48 : 0;
+    },
+  },
+  mounted() {
+    this.dataLoading = true;
+    this.$request
+      .get('/api/get-list')
+      .then((res) => {
+        if (res.code === 0) {
+          const { list = [] } = res.data;
+          this.data = list;
+          this.pagination = {
+            ...this.pagination,
+            total: list.length,
+          };
+        }
+      })
+      .catch((e: Error) => {
+        console.log(e);
+      })
+      .finally(() => {
+        this.dataLoading = false;
+      });
+  },
+
+  methods: {
+    getContainer() {
+      return document.querySelector('.tdesign-starter-layout');
+    },
+    rehandlePageChange(curr, pageInfo) {
+      console.log('分页变化', curr, pageInfo);
+    },
+    rehandleSelectChange(selectedRowKeys: number[]) {
+      this.selectedRowKeys = selectedRowKeys;
+    },
+    rehandleChange(changeParams, triggerAndData) {
+      console.log('统一Change', changeParams, triggerAndData);
+    },
+    handleClickDetail() {
+      this.$router.push('/detail/base');
+    },
+    handleSetupContract() {
+      this.$router.push('/form/base');
+    },
+    handleClickDelete(row: { rowIndex: any }) {
+      this.deleteIdx = row.rowIndex;
+      this.confirmVisible = true;
+    },
+    onConfirmDelete() {
+      // 真实业务请发起请求
+      this.data.splice(this.deleteIdx, 1);
+      this.pagination.total = this.data.length;
+      const selectedIdx = this.selectedRowKeys.indexOf(this.deleteIdx);
+      if (selectedIdx > -1) {
+        this.selectedRowKeys.splice(selectedIdx, 1);
+      }
+      this.confirmVisible = false;
+      this.$message.success('删除成功');
+      this.resetIdx();
+    },
+    onCancel() {
+      this.resetIdx();
+    },
+    resetIdx() {
+      this.deleteIdx = -1;
+    },
+  },
+});
+</script>
+
+<style lang="less" scoped>
+@import '@/style/variables';
+
+.payment-col {
+  display: flex;
+
+  .trend-container {
+    display: flex;
+    align-items: center;
+    margin-left: 8px;
+  }
+}
+
+.left-operation-container {
+  padding: 0 0 6px 0;
+  margin-bottom: 16px;
+
+  .selected-count {
+    display: inline-block;
+    margin-left: var(--td-comp-margin-s);
+    color: var(--td-text-color-secondary);
+  }
+}
+
+.search-input {
+  width: 360px;
+}
+
+.t-button + .t-button {
+  margin-left: var(--td-comp-margin-s);
+}
+</style>

package/src/template/Vue2/src/pages/list/card/index.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="list-card">
+    <!-- 搜索区域 -->
+    <div class="list-card-operation">
+      <t-button @click="formVisible = true">新建产品</t-button>
+      <t-input v-model="searchValue" class="search-input" placeholder="请输入你需要搜索的内容" clearable>
+        <template #suffix-icon>
+          <search-icon v-if="searchValue === ''" size="20px" />
+        </template>
+      </t-input>
+    </div>
+    <!-- 卡片列表 -->
+    <template v-if="pagination.total > 0 && !dataLoading">
+      <div class="list-card-items">
+        <t-row :gutter="[16, 16]">
+          <t-col
+            :lg="4"
+            :xs="6"
+            :xl="3"
+            v-for="product in productList.slice(
+              pagination.pageSize * (pagination.current - 1),
+              pagination.pageSize * pagination.current,
+            )"
+            :key="product.index"
+          >
+            <product-card :product="product" @delete-item="handleDeleteItem" @manage-product="handleManageProduct" />
+          </t-col>
+        </t-row>
+      </div>
+      <div class="list-card-pagination">
+        <t-pagination
+          v-model="pagination.current"
+          :total="pagination.total"
+          :pageSizeOptions="[12, 24, 36]"
+          :page-size.sync="pagination.pageSize"
+          @page-size-change="onPageSizeChange"
+          @current-change="onCurrentChange"
+        />
+      </div>
+    </template>
+    <div v-else-if="dataLoading" class="list-card-loading">
+      <t-loading text="加载中..."></t-loading>
+    </div>
+    <!-- 产品管理弹窗 -->
+    <t-dialog header="新建产品" :visible.sync="formVisible" :width="680" :footer="false">
+      <div slot="body">
+        <!-- 表单内容 -->
+        <t-form :data="formData" ref="form" :rules="rules" @submit="onSubmit" :labelWidth="100">
+          <t-form-item label="产品名称" name="name">
+            <t-input :style="{ width: '480px' }" v-model="formData.name" placeholder="请输入产品名称"></t-input>
+          </t-form-item>
+          <t-form-item label="产品状态" name="status">
+            <t-radio-group v-model="formData.status">
+              <t-radio value="0">已停用</t-radio>
+              <t-radio value="1">已启用</t-radio>
+            </t-radio-group>
+          </t-form-item>
+          <t-form-item label="产品描述" name="description">
+            <t-input :style="{ width: '480px' }" v-model="formData.description" placeholder="请输入产品描述"></t-input>
+          </t-form-item>
+          <t-form-item label="产品类型" name="type">
+            <t-select v-model="formData.type" clearable :style="{ width: '480px' }">
+              <t-option v-for="(item, index) in options" :value="item.value" :label="item.label" :key="index">
+                {{ item.label }}
+              </t-option>
+            </t-select>
+          </t-form-item>
+          <t-form-item label="备注" name="mark">
+            <t-textarea :style="{ width: '480px' }" v-model="textareaValue" placeholder="请输入内容" name="description">
+            </t-textarea>
+          </t-form-item>
+          <t-form-item style="float: right">
+            <t-button variant="outline" @click="onClickCloseBtn">取消</t-button>
+            <t-button theme="primary" type="submit">确定</t-button>
+          </t-form-item>
+        </t-form>
+      </div>
+    </t-dialog>
+    <!-- 删除操作弹窗 -->
+    <t-dialog
+      header="确认删除所选产品？"
+      :body="confirmBody"
+      :visible.sync="confirmVisible"
+      @confirm="onConfirmDelete"
+      :onCancel="onCancel"
+    >
+    </t-dialog>
+  </div>
+</template>
+<script lang="ts">
+import { prefix } from '@/config/global';
+import { SearchIcon } from 'tdesign-icons-vue';
+import ProductCard from '@/components/product-card/index.vue';
+
+const INITIAL_DATA = {
+  name: '',
+  status: '',
+  description: '',
+  type: '',
+  mark: '',
+  amount: 0,
+};
+
+export default {
+  name: 'ListCard',
+  components: {
+    SearchIcon,
+    ProductCard,
+  },
+  data() {
+    return {
+      pagination: { current: 1, pageSize: 12, total: 0 },
+      prefix,
+      productList: [],
+      value: 'first',
+      rowKey: 'index',
+      tableLayout: 'auto',
+      verticalAlign: 'top',
+      bordered: true,
+      hover: true,
+      rowClassName: (rowKey) => `${rowKey}-class`,
+      formData: { ...INITIAL_DATA },
+      options: [
+        { label: '网关', value: '1' },
+        { label: '人工智能', value: '2' },
+        { label: 'CVM', value: '3' },
+      ],
+      formVisible: false,
+      textareaValue: '',
+      rules: {
+        name: [{ required: true, message: '请输入产品名称', type: 'error' }],
+      },
+      searchValue: '',
+      confirmVisible: false, // 控制确认弹窗
+      deleteProduct: undefined,
+      dataLoading: false,
+    };
+  },
+  computed: {
+    confirmBody(): string {
+      const { deleteProduct } = this;
+      return deleteProduct ? `删除后，${deleteProduct.name}的所有产品信息将被清空, 且无法恢复` : '';
+    },
+  },
+  mounted() {
+    this.dataLoading = true;
+    this.$request
+      .get('/api/get-card-list')
+      .then((res) => {
+        if (res.code === 0) {
+          const { list = [] } = res.data;
+          this.productList = list;
+          this.pagination = {
+            ...this.pagination,
+            total: list.length,
+          };
+        }
+      })
+      .catch((e: Error) => {
+        console.log(e);
+      })
+      .finally(() => {
+        this.dataLoading = false;
+      });
+  },
+  methods: {
+    onPageSizeChange(size: number): void {
+      this.pagination.pageSize = size;
+      this.pagination.current = 1;
+    },
+    onCurrentChange(current: number): void {
+      this.pagination.current = current;
+    },
+    onSubmit({ result, firstError }): void {
+      if (!firstError) {
+        this.$message.success('提交成功');
+        this.formVisible = false;
+      } else {
+        console.log('Errors: ', result);
+        this.$message.warning(firstError);
+      }
+    },
+    onClickCloseBtn(): void {
+      this.formVisible = false;
+      this.formData = {};
+    },
+    handleDeleteItem(product): void {
+      this.confirmVisible = true;
+      this.deleteProduct = product;
+    },
+    onConfirmDelete(): void {
+      const { index } = this.deleteProduct;
+      this.productList.splice(index - 1, 1);
+      this.confirmVisible = false;
+      this.$message.success('删除成功');
+    },
+    onCancel(): void {
+      this.deleteProduct = undefined;
+      this.formData = {};
+    },
+    handleManageProduct(product): void {
+      this.formVisible = true;
+      this.formData = { ...product, status: product?.isSetup ? '1' : '0' };
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.list-card-operation {
+  display: flex;
+  justify-content: space-between;
+
+  .search-input {
+    width: 360px;
+  }
+}
+
+.list-card-items {
+  margin: 14px 0 24px 0;
+}
+</style>