Merge pull request #13 from Tencent/fix/responsive/ui

fix(responsive): responsive ui edit
2024-09-20 10:44:22 +08:00 · 2021-12-22 23:39:29 +08:00 · 2021-12-22 23:39:29 +08:00 · 658fad2898
commit 658fad2898
parent 6eafb99389 38096899e1
11 changed files with 67 additions and 61 deletions
--- a/src/layouts/components/Header.vue
+++ b/src/layouts/components/Header.vue
@ -268,7 +268,8 @@ export default defineComponent({
 }

 .header-logo-container {
-  width: 166px;
+  width: 184px;
+  height: 26px;
  display: flex;
  margin-left: 24px;
  color: @text-color-primary;
--- a/src/pages/dashboard/base/index.vue
+++ b/src/pages/dashboard/base/index.vue
@ -236,7 +236,9 @@ const getThisMonth = (checkedValues?: string[]) => {
  date = new Date(checkedValues[0]);
  const date2 = new Date(checkedValues[1]);

-  return `${date.getFullYear()}-${date.getMonth() + 1}  至  ${date2.getFullYear()}-${date2.getMonth() + 1}`;
+  const startMonth = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`;
+  const endMonth = date2.getMonth() + 1 > 9 ? date2.getMonth() + 1 : `0${date2.getMonth() + 1}`;
+  return `${date.getFullYear()}-${startMonth}  至  ${date2.getFullYear()}-${endMonth}`;
 };

 export default defineComponent({
--- a/src/pages/dashboard/detail/index.vue
+++ b/src/pages/dashboard/detail/index.vue
@ -16,7 +16,7 @@
        </t-col>
      </t-row>
    </card>
-    <t-row :gutter="16" class="card-container-margin">
+    <t-row :gutter="[16, 16]" class="card-container-margin">
      <t-col :xs="12" :xl="9">
        <card title="采购商品申请趋势" describe="(件)">
          <template #option>
--- a/src/pages/form/base/constants.ts
+++ b/src/pages/form/base/constants.ts
@ -21,6 +21,7 @@ export const INITIAL_DATA = {
  payment: '1',
  amount: 0,
  comment: '',
+  files: [],
 };

 export const TYPE_OPTIONS = [
--- a/src/pages/form/base/index.less
+++ b/src/pages/form/base/index.less
@ -7,7 +7,6 @@
  background-color: @bg-color-container;
  padding: 0 32px 134px;

-
  @media (max-width: @screen-sm-max) {
    padding: 0 32px 67px;

--- a/src/pages/form/base/index.vue
+++ b/src/pages/form/base/index.vue
@ -122,6 +122,21 @@
                />
              </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>
        </t-form>

@ -153,21 +168,8 @@
    <div class="form-submit-container">
      <div class="form-submit-sub">
        <div class="form-submit-left">
-          <t-upload
-            v-model="files"
-            action=""
-            placeholder="支持批量上传文件，文 件格式不限，最多只能上传 10 份文件"
-            :format-response="formatResponse"
-            :before-upload="beforeUpload"
-            @fail="handleFail"
-          >
-            <t-button class="form-submit-upload-btn" variant="outline"> 上传合同文件 </t-button>
-          </t-upload>
-          <span class="form-submit-upload-span">请上传pdf文件，大小在60M以内</span>
-        </div>
-        <div class="form-submit-right">
-          <t-button type="reset" class="form-submit-cancel" theme="default" variant="base"> 取消 </t-button>
          <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>
@ -182,7 +184,6 @@ export default defineComponent({
  name: 'FormBase',
  setup() {
    const formData = ref({ ...INITIAL_DATA });
-    const files = ref([]);

    return {
      TYPE_OPTIONS,
@ -190,7 +191,6 @@ export default defineComponent({
      PARTY_B_OPTIONS,
      FORM_RULES,
      formData,
-      files,
      onReset() {
        MessagePlugin.warning('取消新建');
      },
--- a/src/pages/list/base/index.vue
+++ b/src/pages/list/base/index.vue
@ -57,7 +57,7 @@

    <t-dialog
      v-model:visible="confirmVisible"
-      header="是否确认删除"
+      header="确认删除当前所选合同？"
      :body="confirmBody"
      :on-cancel="onCancel"
      @confirm="onConfirmDelete"
@ -118,8 +118,8 @@ export default defineComponent({
    const deleteIdx = ref(-1);
    const confirmBody = computed(() => {
      if (deleteIdx.value > -1) {
-        const { no, name } = data.value[deleteIdx.value];
-        return `产品编号:${no}, 产品名称: ${name}`;
+        const { name } = data.value[deleteIdx.value];
+        return `删除后，${name}的所有合同信息将被清空，且无法恢复`;
      }
      return '';
    });
--- a/src/pages/list/card/index.vue
+++ b/src/pages/list/card/index.vue
@ -51,7 +51,7 @@

    <t-dialog
      v-model:visible="confirmVisible"
-      header="是否确认删除产品"
+      header="确认删除所选产品？"
      :body="confirmBody"
      :on-cancel="onCancel"
      @confirm="onConfirmDelete"
@ -109,7 +109,7 @@ export default defineComponent({
    };

    const confirmBody = computed(() =>
-      deleteProduct.value ? `产品名称:${deleteProduct.value.name}, 产品描述: ${deleteProduct.value?.description}` : '',
+      deleteProduct.value ? `确认删除后${deleteProduct.value.name}的所有产品信息将被清空, 且无法恢复` : '',
    );

    onMounted(() => {
--- a/src/pages/list/components/CommonTable.vue
+++ b/src/pages/list/components/CommonTable.vue
@ -2,14 +2,20 @@
  <div class="list-common-table">
    <t-form ref="form" :data="formData" :label-width="80" colon @reset="onReset" @submit="onSubmit">
      <t-row>
-        <t-col :span="8">
+        <t-col :span="10">
          <t-row :gutter="[16, 16]">
-            <t-col :span="4">
+            <t-col :flex="1">
              <t-form-item label="合同名称" name="name">
-                <t-input v-model="formData.name" class="form-item-content" type="search" placeholder="请输入合同名称" />
+                <t-input
+                  v-model="formData.name"
+                  class="form-item-content"
+                  type="search"
+                  placeholder="请输入合同名称"
+                  :style="{ minWidth: '134px' }"
+                />
              </t-form-item>
            </t-col>
-            <t-col :span="4">
+            <t-col :flex="1">
              <t-form-item label="合同状态" name="status">
                <t-select
                  v-model="formData.status"
@ -19,14 +25,17 @@
                />
              </t-form-item>
            </t-col>
-            <t-col :span="4">
+            <t-col :flex="1">
              <t-form-item label="合同编号" name="no">
-                <t-input v-model="formData.no" class="form-item-content" placeholder="请输入合同编号" />
+                <t-input
+                  v-model="formData.no"
+                  class="form-item-content"
+                  placeholder="请输入合同编号"
+                  :style="{ minWidth: '134px' }"
+                />
              </t-form-item>
            </t-col>
-
-            <template v-if="isExpand">
-              <t-col :span="4">
+            <t-col :flex="1">
              <t-form-item label="合同类型" name="type">
                <t-select
                  v-model="formData.type"
@ -36,17 +45,12 @@
                />
              </t-form-item>
            </t-col>
-            </template>
          </t-row>
        </t-col>

        <t-col :span="4" class="operation-container">
-          <t-button theme="primary" type="submit"> 查询 </t-button>
+          <t-button theme="primary" type="submit" :style="{ marginLeft: '8px' }"> 查询 </t-button>
          <t-button type="reset" variant="base" theme="default"> 重置 </t-button>
-          <t-button theme="primary" variant="text" class="expand" @click="toggleExpand">
-            {{ isExpand ? '收起' : '展开' }}
-            <chevron-down-icon size="20" :style="{ transform: `rotate(${isExpand ? '180deg' : '0'}` }" />
-          </t-button>
        </t-col>
      </t-row>
    </t-form>
@ -101,7 +105,6 @@
 <script lang="ts">
 import { defineComponent, ref, computed, onMounted } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
-import { ChevronDownIcon } from 'tdesign-icons-vue-next';
 import Trend from '@/components/trend/index.vue';
 import request from '@/utils/request';
 import { ResDataType } from '@/interface';
@ -168,7 +171,6 @@ export default defineComponent({
  name: 'ListTable',
  components: {
    Trend,
-    ChevronDownIcon,
  },
  setup() {
    const formData = ref({ ...searchForm });
@ -183,10 +185,6 @@ export default defineComponent({
      defaultCurrent: 1,
    });
    const confirmVisible = ref(false);
-    const isExpand = ref(false);
-    const toggleExpand = () => {
-      isExpand.value = !isExpand.value;
-    };

    const data = ref([]);

@ -275,8 +273,6 @@ export default defineComponent({
      rehandleClickOp({ text, row }) {
        console.log(text, row);
      },
-      isExpand,
-      toggleExpand,
    };
  },
 });
--- a/src/pages/result/success/index.vue
+++ b/src/pages/result/success/index.vue
@ -1,11 +1,11 @@
 <template>
  <div class="result-success">
    <t-icon class="result-success-icon" name="check-circle" />
-    <div class="result-success-title">创建成功</div>
+    <div class="result-success-title">项目已创建成功</div>
    <div class="result-success-describe">可以联系负责人分发应用</div>
    <div>
+      <t-button @click="() => $router.push('/form/base')"> 返回首页 </t-button>
      <t-button theme="default" @click="() => $router.push('/detail/advanced')"> 查看进度 </t-button>
-      <t-button @click="() => $router.push('/form/base')"> 再次创建 </t-button>
    </div>
  </div>
 </template>
--- a/src/pages/user/index.vue
+++ b/src/pages/user/index.vue
@ -90,7 +90,7 @@
  </t-row>
 </template>
 <script lang="ts">
-import { defineComponent, nextTick, onMounted, onUnmounted } from 'vue';
+import { defineComponent, nextTick, onMounted, onUnmounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import * as echarts from 'echarts/core';
 import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
@ -99,7 +99,7 @@ import { CanvasRenderer } from 'echarts/renderers';

 import { LAST_7_DAYS } from '@/utils/date';
 import { USER_INFO_LIST, TEAM_MEMBERS, PRODUCT_LIST } from './constants';
-import { getFolderLineDataSet } from '@/pages/dashboard/base/index';
+import { changeChartsTheme, getFolderLineDataSet } from '@/pages/dashboard/base/index';
 import ProductAIcon from '@/assets/assets-product-1.svg';
 import ProductBIcon from '@/assets/assets-product-2.svg';
 import ProductCIcon from '@/assets/assets-product-3.svg';
@ -170,6 +170,13 @@ export default defineComponent({
      }
    };

+    watch(
+      () => store.state.setting.brandTheme,
+      () => {
+        changeChartsTheme([lineChart]);
+      },
+    );
+
    return {
      LAST_7_DAYS,
      USER_INFO_LIST,