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

fix(responsive): responsive ui edit

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;

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({

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>

src/pages/form/base/constants.ts

@@ -21,6 +21,7 @@ export const INITIAL_DATA = {
   payment: '1',
   amount: 0,
   comment: '',
+  files: [],
 };
 
 export const TYPE_OPTIONS = [

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;
 

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('取消新建');
       },

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];
+        const { name } = data.value[deleteIdx.value];
-        return `产品编号:${no}, 产品名称: ${name}`;
+        return `删除后，${name}的所有合同信息将被清空，且无法恢复`;
       }
       return '';
     });

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(() => {

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>
-
+            <t-col :flex="1">
-            <template v-if="isExpand">
-              <t-col :span="4">
               <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,
     };
   },
 });

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>

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,