mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-11-10 13:48:32 +08:00
fix(responsive): responsive ui edit
This commit is contained in:
parent
6eafb99389
commit
38096899e1
|
@ -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;
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -21,6 +21,7 @@ export const INITIAL_DATA = {
|
|||
payment: '1',
|
||||
amount: 0,
|
||||
comment: '',
|
||||
files: [],
|
||||
};
|
||||
|
||||
export const TYPE_OPTIONS = [
|
||||
|
|
|
@ -7,7 +7,6 @@
|
|||
background-color: @bg-color-container;
|
||||
padding: 0 32px 134px;
|
||||
|
||||
|
||||
@media (max-width: @screen-sm-max) {
|
||||
padding: 0 32px 67px;
|
||||
|
||||
|
|
|
@ -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('取消新建');
|
||||
},
|
||||
|
|
|
@ -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 '';
|
||||
});
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue
Block a user