congmao-cli 1.0.0

package/src/template/Vue2/src/pages/detail/advanced/index.less

@@ -0,0 +1,74 @@
+@import '../base/index.less';
+
+.detail-advanced {
+  /deep/ .t-card {
+    padding: 8px;
+  }
+  /deep/ .t-card__title {
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  .advanced-card {
+    margin-top: 0 !important;
+
+    .card-title-default {
+      margin-bottom: 12px;
+    }
+  }
+}
+
+.product-block-container {
+  .t-col-xl-4 + .t-col-xl-4 {
+    @media (max-width: @screen-lg-max) {
+      .operator-gap {
+        margin: 16px 0 0 0;
+      }
+    }
+  }
+
+  .product-add {
+    width: 100%;
+    height: 256px;
+    display: flex;
+    align-items: center;
+    justify-items: center;
+    padding: 20px 10px 24px 20px;
+    border: dashed 1px var(--td-component-border);
+    border-radius: 3px;
+
+    .product-sub-icon {
+      background: var(--td-brand-color-1);
+      color: var(--td-brand-color);
+      font-size: 33px;
+      padding: 8px;
+      border-radius: 100%;
+    }
+
+    .product-sub {
+      font-size: 14px;
+      color: var(--td-text-color-secondary);
+      margin: 0 auto;
+      text-align: center;
+      line-height: 22px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      cursor: pointer;
+
+      svg {
+        rect {
+          fill: var(--td-brand-color-1);
+        }
+
+        path {
+          fill: var(--td-brand-color);
+        }
+      }
+    }
+
+    span {
+      padding-top: 12px;
+    }
+  }
+}

package/src/template/Vue2/src/pages/detail/advanced/index.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="detail-advanced">
+    <t-card title="基本信息" class="advanced-card" :bordered="false">
+      <div class="info-block">
+        <div v-for="(item, index) in baseInfoData" :key="index" class="info-item">
+          <h1>{{ item.name }}</h1>
+          <span
+            :class="{
+              ['inProgress']: item.type && item.type.value === 'inProgress',
+              ['pdf']: item.type && item.type.value === 'pdf',
+            }"
+          >
+            <i v-if="item.type && item.type.key === 'contractStatus'"></i>
+            {{ item.value }}
+          </span>
+        </div>
+      </div>
+    </t-card>
+
+    <!-- 发票进度 -->
+    <t-card title="发票进度" class="container-base-margin-top" :bordered="false">
+      <t-row :class="prefix + '-operator-row row-padding'" justify="space-between">
+        <template>
+          <t-steps :current="updateCurrent">
+            <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>
+        </template>
+      </t-row>
+    </t-card>
+
+    <!-- 产品目录 -->
+    <t-card title="产品目录" class="container-base-margin-top" :bordered="false">
+      <template slot="option">
+        <t-radio-group default-value="dateVal" @change="onAlertChange">
+          <t-radio-button value="dateVal">季度</t-radio-button>
+          <t-radio-button value="monthVal">月份</t-radio-button>
+        </t-radio-group>
+      </template>
+
+      <t-row :gutter="16" class="product-block-container">
+        <t-col :xl="4">
+          <div class="product-add">
+            <div class="product-sub">
+              <add-icon class="product-sub-icon" />
+              <span>新增产品</span>
+            </div>
+          </div>
+        </t-col>
+        <t-col v-for="(item, index) in PRODUCT_LIST" :key="index" :xl="4">
+          <product :data="item" />
+        </t-col>
+      </t-row>
+    </t-card>
+
+    <!-- 产品采购明细 -->
+    <t-card title="产品采购明细" class="container-base-margin-top" :bordered="false">
+      <t-table
+        :columns="columns"
+        :data="data"
+        :pagination="pagination"
+        :hover="hover"
+        size="large"
+        row-key="index"
+        @sort-change="sortChange"
+        @change="rehandleChange"
+      >
+        <template #pdName="{ row }">
+          <span>
+            {{ row.pdName }}
+            <t-tag v-if="row.pdType" size="small">{{ row.pdType }}</t-tag>
+          </span>
+        </template>
+
+        <template #purchaseNum="{ row }">
+          <span>
+            {{ row.purchaseNum }}
+            <t-tag v-if="row.purchaseNum > 50" theme="danger" variant="light" size="small">超预算</t-tag>
+          </span>
+        </template>
+
+        <template #op="slotProps">
+          <a class="t-button-link" @click="listClick(slotProps)">管理</a>
+          <a class="t-button-link" @click="deleteClickOp(slotProps)">删除</a>
+        </template>
+        <order-descending-icon slot="op-column" />
+      </t-table>
+    </t-card>
+
+    <t-dialog header="基本信息" :visible.sync="visible" @confirm="onConfirm">
+      <div slot="body">
+        <div class="dialog-info-block">
+          <div v-for="(item, index) in baseInfoData" :key="index" class="info-item">
+            <h1>{{ item.name }}</h1>
+            <span
+              :class="{
+                ['inProgress']: item.type && item.type.value === 'inProgress',
+                ['pdf']: item.type && item.type.value === 'pdf',
+              }"
+            >
+              <i v-if="item.type && item.type.key === 'contractStatus'"></i>
+              {{ item.value }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </t-dialog>
+  </div>
+</template>
+<script lang="ts">
+import { TableChangeContext, TableChangeData, TableSort } from 'tdesign-vue';
+import { OrderDescendingIcon, AddIcon } from 'tdesign-icons-vue';
+import { prefix } from '@/config/global';
+import model from '@/service/service-advance';
+import Product from './components/Product.vue';
+
+const PRODUCT_LIST = [
+  {
+    name: 'MacBook Pro 2021',
+    subTitle: 'MacBook Pro 2021',
+    size: '13.3 英寸',
+    cpu: 'Apple M1',
+    memory: 'RAM 16GB',
+    info: '最高可选配 16GB 内存 · 最高可选配 2TB 存储设备 电池续航最长达 18 小时',
+    use: 1420,
+    stock: 1500,
+  },
+  {
+    name: 'Surface Laptop Go',
+    subTitle: '微软（Microsoft Corporation）',
+    size: '12.4 英寸',
+    cpu: 'Core i7',
+    memory: 'RAM 16GB',
+    info: '常规使用 Surface，续航时间最长可达13小时 随时伴您工作',
+    use: 120,
+    stock: 2000,
+  },
+];
+
+/** 高级详情 */
+export default {
+  name: 'DetailAdvanced',
+  components: { Product, OrderDescendingIcon, AddIcon },
+  data() {
+    return {
+      data: [],
+      prefix,
+      updateCurrent: 0,
+      columns: model.getTableColumns(),
+      baseInfoData: model.getBaseInfoData(),
+      bordered: true,
+      hover: true,
+      visible: false,
+      pagination: {
+        defaultPageSize: 10,
+        total: 100,
+        defaultCurrent: 1,
+        pageSizeOptions: [],
+      },
+      PRODUCT_LIST,
+    };
+  },
+  async mounted() {
+    // 模拟进度
+    setInterval(() => {
+      if (this.updateCurrent > 5) {
+        this.updateCurrent = -1;
+      }
+      this.updateCurrent += 1;
+    }, 2000);
+
+    this.$request
+      .get('/api/get-purchase-list')
+      .then((res: { code: number; data: Record<string, any> }) => {
+        if (res.code === 0) {
+          const { list = [] } = res.data;
+          this.data = list;
+          this.pagination = {
+            ...this.pagination,
+            total: list.length,
+          };
+        }
+      })
+      .catch((e: Error) => {
+        console.log(e);
+      });
+  },
+  methods: {
+    onAlertChange(val: string): void {
+      console.log(val);
+    },
+    sortChange(val: TableSort): void {
+      console.log(val);
+    },
+    rehandleChange(
+      changeParams: TableChangeData,
+      triggerAndData: TableChangeContext<Array<Record<string, string>>>,
+    ): void {
+      console.log('统一Change', changeParams, triggerAndData);
+    },
+    listClick(e: any): void {
+      console.log(e);
+      this.visible = true;
+    },
+    deleteClickOp(e: any): void {
+      console.log(e, 'e');
+      this.data.splice(e.rowIndex, 1);
+    },
+    onConfirm(): void {
+      this.visible = false;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+@import './index';
+</style>

package/src/template/Vue2/src/pages/detail/base/index.less

@@ -0,0 +1,105 @@
+@import '@/style/variables.less';
+
+.detail-base {
+  /deep/ .t-card {
+    padding: 8px;
+  }
+
+  /deep/ .t-card__title {
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  &-info-steps {
+    padding-top: 12px;
+  }
+}
+
+.info-block {
+  column-count: 2;
+
+  .info-item {
+    padding: 12px 0;
+    display: flex;
+    color: var(--td-text-color-primary);
+
+    h1 {
+      width: 200px;
+      font: var(--td-font-body-medium);
+      color: var(--td-text-color-secondary);
+      font-weight: normal;
+      text-align: left;
+
+      @media (max-width: @screen-sm-max) {
+        width: 100px;
+      }
+
+      @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+        width: 120px;
+      }
+    }
+
+    span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin-left: 24px;
+    }
+
+    i {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: var(--td-radius-circle);
+      background: var(--td-success-color-5);
+    }
+
+    .inProgress {
+      color: var(--td-success-color-5);
+    }
+
+    .pdf {
+      color: var(--td-brand-color);
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.dialog-info-block {
+  .info-item {
+    padding: 12px 0;
+    display: flex;
+
+    h1 {
+      width: 84px;
+      font-family: PingFangSC-Regular;
+      font-size: 14px;
+      color: var(--td-text-color-secondary);
+      text-align: left;
+      line-height: 22px;
+    }
+
+    span {
+      margin-left: 24px;
+    }
+
+    i {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: var(--td-radius-circle);
+      background: var(--td-success-color-5);
+    }
+
+    .green {
+      color: var(--td-success-color-5);
+    }
+
+    .blue {
+      color: var(--td-brand-color);
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+<template>
+  <div class="detail-base">
+    <t-card title="基本信息" :bordered="false">
+      <div class="info-block">
+        <div v-for="(item, index) in baseInfoData" :key="index" class="info-item">
+          <h1>{{ item.name }}</h1>
+          <span
+            :class="{
+              ['inProgress']: item.type && item.type.value === 'inProgress',
+              ['pdf']: item.type && item.type.value === 'pdf',
+            }"
+          >
+            <i v-if="item.type && item.type.key === 'contractStatus'" />
+            {{ item.value }}
+          </span>
+        </div>
+      </div>
+    </t-card>
+
+    <t-card title="变更记录" class="container-base-margin-top" :bordered="false">
+      <t-steps class="detail-base-info-steps" layout="vertical" theme="dot" :current="1">
+        <t-step-item title="上传合同附件" content="这里是提示文字" />
+        <t-step-item title="修改合同金额" content="这里是提示文字" />
+        <t-step-item title="新建合同" content="2020-12-01 15:00:00 管理员-李川操作" />
+      </t-steps>
+    </t-card>
+  </div>
+</template>
+<script>
+import { prefix } from '@/config/global';
+import model from '@/service/service-detail-base';
+
+export default {
+  name: 'DetailBase',
+  data() {
+    return {
+      prefix,
+      baseInfoData: model.getBaseInfoData(),
+    };
+  },
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+@import './index';
+</style>

package/src/template/Vue2/src/pages/detail/deploy/index.ts

@@ -0,0 +1,204 @@
+import { getChartListColor } from '@/utils/color';
+import { getDateArray, getRandomArray } from '@/utils/charts';
+
+export const lastYearList: Array<number> = [100, 120, 140, 160, 180, 200, 210];
+
+/** 平滑图数据 */
+// eslint-disable-next-line import/prefer-default-export
+export function getSmoothLineDataSet({
+  dateTime = [],
+  placeholderColor,
+  borderColor,
+}: { dateTime?: Array<string> } & Record<string, string>) {
+  let dateArray: Array<string> = ['00:00', '02:00', '04:00', '06:00'];
+  if (dateTime.length > 0) {
+    const divideNum = 7;
+    dateArray = getDateArray(dateTime, divideNum);
+  }
+
+  return {
+    color: getChartListColor(),
+    tooltip: {
+      trigger: 'item',
+    },
+    grid: {
+      top: '10px',
+      left: '0',
+      right: '20px',
+      bottom: '36px',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      data: dateArray,
+      boundaryGap: false,
+      axisLabel: {
+        color: placeholderColor,
+      },
+      axisLine: {
+        lineStyle: {
+          color: borderColor,
+          width: 1,
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        color: placeholderColor,
+      },
+      splitLine: {
+        lineStyle: {
+          color: borderColor,
+        },
+      },
+    },
+    legend: {
+      data: ['本月', '上月'],
+      icon: 'circle',
+      bottom: '0',
+      itemGap: 48,
+      itemHeight: 8,
+      itemWidth: 8,
+      textStyle: {
+        fontSize: 12,
+        color: placeholderColor,
+      },
+    },
+    series: [
+      {
+        name: '上月',
+        data: [
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+        ],
+        type: 'line',
+        smooth: true,
+        color: getChartListColor()[0],
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        areaStyle: {
+          normal: {
+            opacity: 0.1,
+          },
+        },
+      },
+      {
+        name: '本月',
+        data: [
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+          getRandomArray(),
+        ],
+        type: 'line',
+        smooth: true,
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        color: getChartListColor()[1],
+      },
+    ],
+  };
+}
+
+/**
+ * 柱状图数据结构
+ *
+ * @export
+ * @param {boolean} [isMonth=false]
+ * @returns {*}
+ */
+export function get2ColBarChartDataSet({
+  isMonth = false,
+  placeholderColor,
+  borderColor,
+}: { isMonth?: boolean } & Record<string, string>) {
+  let lastYearListCopy = lastYearList.concat([]);
+  let thisYearListCopy = lastYearList.concat([]);
+
+  if (isMonth) {
+    lastYearListCopy = lastYearListCopy.reverse();
+    thisYearListCopy = thisYearListCopy.reverse();
+  }
+
+  return {
+    color: getChartListColor(),
+    tooltip: {
+      trigger: 'item',
+    },
+    grid: {
+      top: '10px',
+      left: '0',
+      right: '0',
+      bottom: '36px',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        axisTick: {
+          alignWithLabel: true,
+        },
+        axisLabel: {
+          color: placeholderColor,
+        },
+        axisLine: {
+          lineStyle: {
+            color: borderColor,
+            width: 1,
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        axisLabel: {
+          color: placeholderColor,
+        },
+        splitLine: {
+          lineStyle: {
+            color: borderColor,
+          },
+        },
+      },
+    ],
+    legend: {
+      data: ['去年', '今年'],
+      bottom: '0',
+      icon: 'rect',
+      itemGap: 48,
+      itemHeight: 4,
+      itemWidth: 12,
+      textStyle: {
+        fontSize: 12,
+        color: placeholderColor,
+      },
+    },
+    series: [
+      {
+        name: '去年',
+        type: 'bar',
+        barWidth: '30%',
+        data: lastYearListCopy,
+      },
+      {
+        name: '今年',
+        type: 'bar',
+        barWidth: '30%',
+        data: thisYearListCopy,
+      },
+    ],
+  };
+}