fix(responsive): responsive ui edit

This commit is contained in:
pengYYY 2021-12-22 23:29:37 +08:00
parent 6eafb99389
commit 38096899e1
11 changed files with 67 additions and 61 deletions

View File

@ -268,7 +268,8 @@ export default defineComponent({
} }
.header-logo-container { .header-logo-container {
width: 166px; width: 184px;
height: 26px;
display: flex; display: flex;
margin-left: 24px; margin-left: 24px;
color: @text-color-primary; color: @text-color-primary;

View File

@ -236,7 +236,9 @@ const getThisMonth = (checkedValues?: string[]) => {
date = new Date(checkedValues[0]); date = new Date(checkedValues[0]);
const date2 = new Date(checkedValues[1]); 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({ export default defineComponent({

View File

@ -16,7 +16,7 @@
</t-col> </t-col>
</t-row> </t-row>
</card> </card>
<t-row :gutter="16" class="card-container-margin"> <t-row :gutter="[16, 16]" class="card-container-margin">
<t-col :xs="12" :xl="9"> <t-col :xs="12" :xl="9">
<card title="采购商品申请趋势" describe="(件)"> <card title="采购商品申请趋势" describe="(件)">
<template #option> <template #option>

View File

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

View File

@ -7,7 +7,6 @@
background-color: @bg-color-container; background-color: @bg-color-container;
padding: 0 32px 134px; padding: 0 32px 134px;
@media (max-width: @screen-sm-max) { @media (max-width: @screen-sm-max) {
padding: 0 32px 67px; padding: 0 32px 67px;

View File

@ -122,6 +122,21 @@
/> />
</t-form-item> </t-form-item>
</t-col> </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-row>
</t-form> </t-form>
@ -153,21 +168,8 @@
<div class="form-submit-container"> <div class="form-submit-container">
<div class="form-submit-sub"> <div class="form-submit-sub">
<div class="form-submit-left"> <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 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> </div>
</div> </div>
@ -182,7 +184,6 @@ export default defineComponent({
name: 'FormBase', name: 'FormBase',
setup() { setup() {
const formData = ref({ ...INITIAL_DATA }); const formData = ref({ ...INITIAL_DATA });
const files = ref([]);
return { return {
TYPE_OPTIONS, TYPE_OPTIONS,
@ -190,7 +191,6 @@ export default defineComponent({
PARTY_B_OPTIONS, PARTY_B_OPTIONS,
FORM_RULES, FORM_RULES,
formData, formData,
files,
onReset() { onReset() {
MessagePlugin.warning('取消新建'); MessagePlugin.warning('取消新建');
}, },

View File

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

View File

@ -51,7 +51,7 @@
<t-dialog <t-dialog
v-model:visible="confirmVisible" v-model:visible="confirmVisible"
header="是否确认删除产品" header="确认删除所选产品"
:body="confirmBody" :body="confirmBody"
:on-cancel="onCancel" :on-cancel="onCancel"
@confirm="onConfirmDelete" @confirm="onConfirmDelete"
@ -109,7 +109,7 @@ export default defineComponent({
}; };
const confirmBody = computed(() => const confirmBody = computed(() =>
deleteProduct.value ? `产品名称:${deleteProduct.value.name}, 产品描述: ${deleteProduct.value?.description}` : '', deleteProduct.value ? `确认删除后${deleteProduct.value.name}的所有产品信息将被清空, 且无法恢复` : '',
); );
onMounted(() => { onMounted(() => {

View File

@ -2,14 +2,20 @@
<div class="list-common-table"> <div class="list-common-table">
<t-form ref="form" :data="formData" :label-width="80" colon @reset="onReset" @submit="onSubmit"> <t-form ref="form" :data="formData" :label-width="80" colon @reset="onReset" @submit="onSubmit">
<t-row> <t-row>
<t-col :span="8"> <t-col :span="10">
<t-row :gutter="[16, 16]"> <t-row :gutter="[16, 16]">
<t-col :span="4"> <t-col :flex="1">
<t-form-item label="合同名称" name="name"> <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-form-item>
</t-col> </t-col>
<t-col :span="4"> <t-col :flex="1">
<t-form-item label="合同状态" name="status"> <t-form-item label="合同状态" name="status">
<t-select <t-select
v-model="formData.status" v-model="formData.status"
@ -19,34 +25,32 @@
/> />
</t-form-item> </t-form-item>
</t-col> </t-col>
<t-col :span="4"> <t-col :flex="1">
<t-form-item label="合同编号" name="no"> <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">
<t-form-item label="合同类型" name="type">
<t-select
v-model="formData.type"
class="form-item-content`"
:options="CONTRACT_TYPE_OPTIONS"
placeholder="请选择合同类型"
/>
</t-form-item> </t-form-item>
</t-col> </t-col>
<template v-if="isExpand">
<t-col :span="4">
<t-form-item label="合同类型" name="type">
<t-select
v-model="formData.type"
class="form-item-content`"
:options="CONTRACT_TYPE_OPTIONS"
placeholder="请选择合同类型"
/>
</t-form-item>
</t-col>
</template>
</t-row> </t-row>
</t-col> </t-col>
<t-col :span="4" class="operation-container"> <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 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-col>
</t-row> </t-row>
</t-form> </t-form>
@ -101,7 +105,6 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, computed, onMounted } from 'vue'; import { defineComponent, ref, computed, onMounted } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next'; import { MessagePlugin } from 'tdesign-vue-next';
import { ChevronDownIcon } from 'tdesign-icons-vue-next';
import Trend from '@/components/trend/index.vue'; import Trend from '@/components/trend/index.vue';
import request from '@/utils/request'; import request from '@/utils/request';
import { ResDataType } from '@/interface'; import { ResDataType } from '@/interface';
@ -168,7 +171,6 @@ export default defineComponent({
name: 'ListTable', name: 'ListTable',
components: { components: {
Trend, Trend,
ChevronDownIcon,
}, },
setup() { setup() {
const formData = ref({ ...searchForm }); const formData = ref({ ...searchForm });
@ -183,10 +185,6 @@ export default defineComponent({
defaultCurrent: 1, defaultCurrent: 1,
}); });
const confirmVisible = ref(false); const confirmVisible = ref(false);
const isExpand = ref(false);
const toggleExpand = () => {
isExpand.value = !isExpand.value;
};
const data = ref([]); const data = ref([]);
@ -275,8 +273,6 @@ export default defineComponent({
rehandleClickOp({ text, row }) { rehandleClickOp({ text, row }) {
console.log(text, row); console.log(text, row);
}, },
isExpand,
toggleExpand,
}; };
}, },
}); });

View File

@ -1,11 +1,11 @@
<template> <template>
<div class="result-success"> <div class="result-success">
<t-icon class="result-success-icon" name="check-circle" /> <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 class="result-success-describe">可以联系负责人分发应用</div>
<div> <div>
<t-button @click="() => $router.push('/form/base')"> 返回首页 </t-button>
<t-button theme="default" @click="() => $router.push('/detail/advanced')"> 查看进度 </t-button> <t-button theme="default" @click="() => $router.push('/detail/advanced')"> 查看进度 </t-button>
<t-button @click="() => $router.push('/form/base')"> 再次创建 </t-button>
</div> </div>
</div> </div>
</template> </template>

View File

@ -90,7 +90,7 @@
</t-row> </t-row>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, nextTick, onMounted, onUnmounted } from 'vue'; import { defineComponent, nextTick, onMounted, onUnmounted, watch } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import * as echarts from 'echarts/core'; import * as echarts from 'echarts/core';
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'; import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
@ -99,7 +99,7 @@ import { CanvasRenderer } from 'echarts/renderers';
import { LAST_7_DAYS } from '@/utils/date'; import { LAST_7_DAYS } from '@/utils/date';
import { USER_INFO_LIST, TEAM_MEMBERS, PRODUCT_LIST } from './constants'; 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 ProductAIcon from '@/assets/assets-product-1.svg';
import ProductBIcon from '@/assets/assets-product-2.svg'; import ProductBIcon from '@/assets/assets-product-2.svg';
import ProductCIcon from '@/assets/assets-product-3.svg'; import ProductCIcon from '@/assets/assets-product-3.svg';
@ -170,6 +170,13 @@ export default defineComponent({
} }
}; };
watch(
() => store.state.setting.brandTheme,
() => {
changeChartsTheme([lineChart]);
},
);
return { return {
LAST_7_DAYS, LAST_7_DAYS,
USER_INFO_LIST, USER_INFO_LIST,