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 {
width: 166px;
width: 184px;
height: 26px;
display: flex;
margin-left: 24px;
color: @text-color-primary;

View File

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

View File

@ -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>

View File

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

View File

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

View File

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

View File

@ -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 '';
});

View File

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

View File

@ -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,34 +25,32 @@
/>
</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">
<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 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-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,
};
},
});

View File

@ -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>

View File

@ -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,