feat: update list, form, detail

This commit is contained in:
pengYYYYY 2021-11-16 19:01:03 +08:00
parent d32ac9e722
commit d9ff532fdb
29 changed files with 1164 additions and 1053 deletions

View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TDesign Pro Vue3</title>
<title>TDesign Starter Vue Next</title>
</head>
<body>
<div id="app"></div>

View File

@ -3,10 +3,7 @@
<div :class="titleCls">
<span :class="titleTextCls">
{{ title }}
<span
v-if="describe"
class="card-describe"
>{{ describe }}</span>
<span v-if="describe" class="card-describe">{{ describe }}</span>
</span>
<span class="card-option">
<slot name="option" />
@ -15,10 +12,7 @@
<div class="card-content">
<slot />
</div>
<div
v-if="size !== 'small'"
class="card-spacer-bottom"
/>
<div v-if="size !== 'small'" class="card-spacer-bottom" />
</div>
</template>
<script lang="ts">
@ -87,7 +81,6 @@ export default defineComponent({
}
.card {
&-option {
display: flex;
align-items: center;
@ -138,7 +131,7 @@ export default defineComponent({
&-describe {
font-size: 14px;
color: rgba(0, 0, 0, .6);
color: rgba(0, 0, 0, 0.6);
line-height: 22px;
}

View File

@ -1,8 +1,5 @@
<template>
<div
:style="style"
class="color-container"
/>
<div :style="style" class="color-container" />
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
@ -37,4 +34,3 @@ export default defineComponent({
display: inline-block;
}
</style>

View File

@ -1,22 +1,13 @@
<template>
<card>
<div class="result-container">
<img
class="result-bg-img"
:src="bgUrl"
>
<img class="result-bg-img" :src="bgUrl">
<div class="result-tip">
{{ tip }}
</div>
<div>
<router-link
class="tdesign-pro-main-link"
to="/"
>
<t-button
theme="primary"
variant="text"
>
<router-link class="tdesign-pro-main-link" to="/">
<t-button theme="primary" variant="text">
返回首页
</t-button>
</router-link>
@ -47,7 +38,6 @@ export default defineComponent({
@import url('@/style/index.less');
.result {
&-link {
color: @brand-color;
text-decoration: none;

View File

@ -1,8 +1,5 @@
<template>
<img
:class="className"
:src="url"
>
<img :class="className" :src="url">
</template>
<script lang="ts">
import { defineComponent, computed, PropType } from 'vue';
@ -38,7 +35,6 @@ export default defineComponent({
@import url('@/style/index.less');
.thumbnail {
&-container {
display: inline-block;
}

View File

@ -9,16 +9,8 @@
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5 8L8 11.5L4.5 8"
stroke="currentColor"
stroke-width="1.5"
/>
<path
d="M8 11L8 4"
stroke="currentColor"
stroke-width="1.5"
/>
<path d="M11.5 8L8 11.5L4.5 8" stroke="currentColor" stroke-width="1.5" />
<path d="M8 11L8 4" stroke="currentColor" stroke-width="1.5" />
</svg>
<svg
v-else
@ -28,16 +20,8 @@
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.5 8L8 4.5L11.5 8"
stroke="currentColor"
stroke-width="1.5"
/>
<path
d="M8 5V12"
stroke="currentColor"
stroke-width="1.5"
/>
<path d="M4.5 8L8 4.5L11.5 8" stroke="currentColor" stroke-width="1.5" />
<path d="M8 5V12" stroke="currentColor" stroke-width="1.5" />
</svg>
</span>
<span>{{ describe }}</span>
@ -87,9 +71,7 @@ export default defineComponent({
<style lang="less" scoped>
.trend {
&-container {
&__up {
color: #e34d59 !important;
display: inline-flex;

4
src/interface.ts Normal file
View File

@ -0,0 +1,4 @@
export interface ResDataType {
code: number,
data: any
}

View File

@ -0,0 +1,60 @@
<template>
<div class="operater-block operater-gap">
<div class="operater-content">
<div class="operater-title">
<t-icon name="cart" class="operater-title-icon" />
<h1>{{ data.name }}</h1>
<div class="operater-title-subtitle">
{{ data.subtitle }}
</div>
<div class="operater-title-tags">
<t-tag class="operater-title-tag" theme="success" size="small">
{{ data.size }}
</t-tag>
<t-tag class="operater-title-tag" size="small">
{{ data.cpu }}
</t-tag>
<t-tag class="operater-title-tag" size="small">
{{ data.memory }}
</t-tag>
</div>
</div>
<div class="operater-item">
<span class="operater-item-info">{{ data.info }}</span>
<t-icon
class="operater-item-icon"
name="chevron-right"
size="small"
style="color: rgba(0, 0, 0, 0.26)"
/>
</div>
</div>
<div class="operater-footer">
<span class="operater-footer-percentage">{{ data.use }} / {{ data.stock }}</span>
<t-progress
class="operater-progress"
theme="line"
:percentage="(data.use / data.stock) * 100"
:label="false"
:color="(data.use / data.stock) < 0.5 ? '#E24D59' : ''"
:track-color="(data.use / data.stock) < 0.5 ? '#FCD4D4' : '#D4E3FC'"
/>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: {
data: {
type: Object,
},
},
});
</script>
<style lang="less" scoped>
@import url('../index.less');
</style>

View File

@ -0,0 +1,154 @@
export const BASE_INFO_DATA = [
{
name: '合同名称',
value: '总部办公用品采购项目',
type: null,
},
{
name: '合同状态',
value: '履行中',
type: {
key: 'contractStatus',
value: 'inProgress',
},
},
{
name: '合同编号',
value: 'BH00010',
type: null,
},
{
name: '合同类型',
value: '主合同',
type: null,
},
{
name: '合同收付类型',
value: '付款',
type: null,
},
{
name: '合同金额',
value: '5,000,000元',
type: null,
},
{
name: '甲方',
value: '腾讯科技(深圳)有限公司',
type: null,
},
{
name: '乙方',
value: '欧尚',
type: null,
},
{
name: '合同签订日期',
value: '2020-12-20',
type: null,
},
{
name: '合同生效日期',
value: '2021-01-20',
type: null,
},
{
name: '合同结束日期',
value: '2022-12-20',
type: null,
},
{
name: '合同附件',
value: '总部办公用品采购项目合同.pdf',
type: {
key: 'contractAnnex',
value: 'pdf',
},
},
{
name: '备注',
value: '--',
type: null,
},
{
name: '创建时间',
value: '2020-12-22 10:00:00',
type: null,
},
];
export const TABLE_COLUMNS_DATA = [
{
align: 'center',
minWidth: '250',
ellipsis: true,
colKey: 'index',
title: '申请号',
sorter: (a, b) => a.index.substr(3) - b.index.substr(3),
},
{
minWidth: '100',
ellipsis: true,
colKey: 'pdName',
title: '产品名称',
sorter: (a, b) => a.pdName.length - b.pdName.length,
},
{
minWidth: '250',
ellipsis: true,
colKey: 'pdNum',
title: '产品编号',
},
{
minWidth: '100',
ellipsis: true,
colKey: 'purchaseNum',
title: '采购数量',
sorter: (a, b) => a.purchaseNum - b.purchaseNum,
},
{
minWidth: '100',
ellipsis: true,
colKey: 'adminName',
title: '申请部门',
},
{
minWidth: '250',
className: 'test',
ellipsis: true,
colKey: 'updateTime',
title: '创建时间',
sorter: (a, b) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
},
{
align: 'left',
width: 200,
className: 'test2',
ellipsis: true,
colKey: 'op',
title: '操作',
},
];
export const PRODUCT_LIST = [
{
name: 'Macbook Pro 2021',
subTitle: 'Macbook Pro 2021',
size: '13.3 英寸',
cpu: 'Apple M1',
memory: 'RAM 16GB',
info: '最高可选配 16GB 内存 · 最高可选配 2TB 存储设备 电池续航最长达 18 小时',
use: 1420,
stock: 1500
},
{
name: 'Surface Laptop Go',
subTitle: '微软Microsoft Corporation',
size: '12.4 英寸',
cpu: 'Core i7',
memory: 'RAM 16GB',
info: '常规使用 Surface续航时间最长可达13小时 随时伴您工作',
use: 120,
stock: 2000
}
]

View File

@ -8,13 +8,19 @@
color: rgba(0, 0, 0, .6) !important;
}
.t-table.t-size-l th,
.t-table.t-size-l td {
padding: 13px 13px 12px 24px;
line-height: 22px;
}
.row-padding {
padding-top: 30px;
padding-left: 20px;
}
.operater-block-container {
padding: 10px 0 30px;
.t-tag.t-size-s {
margin-left: 8px;
}
.operater-add {
@ -27,6 +33,14 @@
border: dashed 1px #dedede;
border-radius: 3px;
.operater-sub-icon {
background: #ecf2fe;
color: @brand-color;
font-size: 33px;
padding: 8px;
border-radius: 100%;
}
.operater-sub {
font-size: 14px;
color: @text-color-secondary;
@ -41,7 +55,7 @@
svg {
rect {
fill: @brand-color-2;
fill: @brand-color-1;
}
path {
@ -69,6 +83,14 @@
padding: 20px 32px 24px 32px;
height: 256px;
.operater-title-icon {
background: #ecf2fe;
color: @brand-color;
font-size: 56px;
padding: 14px;
border-radius: 100%;
}
.operater-title {
margin-bottom: 25px;
position: relative;
@ -88,7 +110,10 @@
}
&-tag {
margin-right: 8px;
margin-right: 4px;
margin-top: 8px;
margin-left: unset;
border: unset
}
&-icon {
@ -124,7 +149,7 @@
&-icon {
position: absolute;
bottom: 0;
bottom: 8px;
right: 0;
}
}
@ -134,6 +159,7 @@
position: absolute;
width: 100%;
bottom: 0px;
left: 0;
.t-progress--thin {
display: unset;
@ -152,9 +178,8 @@
&-panel {
background-color: white;
padding: @spacer-3;
padding: @spacer-3 @spacer-4 @spacer-4 @spacer-4;
border-radius: @border-radius;
margin-top: 16px;
}
&-search-input {
@ -163,13 +188,12 @@
}
&-operater-row {
margin-bottom: 12px;
margin-bottom: 32px;
}
&-operater-title {
font-size: 20px;
color: rgba(0, 0, 0, .9);
font-weight: bold;
}
&-operater-label {
@ -178,8 +202,17 @@
}
}
.advanced-card {
margin-top: 0 !important;
.card-title-default {
margin-bottom: 12px;
}
}
.info-block {
column-count: 2;
margin-bottom: 12px;
.info-item {
padding: 12px 0;

View File

@ -1,21 +1,8 @@
<template>
<div>
<div :class="prefix + '-panel'">
<div class="base-info">
<t-row
:class="prefix + '-operater-row'"
justify="space-between"
>
<p :class="prefix + '-operater-title'">
基本信息
</p>
</t-row>
<card title="基本信息" class="advanced-card">
<div class="info-block">
<div
v-for="(item, index) in baseInfoData"
:key="index"
class="info-item"
>
<div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
<h1>{{ item.name }}</h1>
<span
:class="{
@ -28,259 +15,54 @@
</span>
</div>
</div>
</div>
</div>
</card>
<!-- 发票进度 -->
<div :class="prefix + '-panel'">
<t-row
:class="prefix + '-operater-row'"
justify="space-between"
>
<p :class="prefix + '-operater-title'">
发票进度
</p>
</t-row>
<t-row
:class="prefix + '-operater-row row-padding'"
justify="space-between"
>
<t-steps
theme="dot"
:current="updateCurrent"
>
<t-step-item
title="申请提交"
content="已于12月21日提交"
/>
<t-step-item
title="电子发票"
content="预计13个工作日"
/>
<t-step-item
title="发票已邮寄"
content="电子发票开出后7个工作日内联系"
/>
<t-step-item
title="完成"
content
/>
<card title="发票进度">
<t-row :class="PREFIX + '-operater-row row-padding'" justify="space-between">
<t-steps theme="dot" :current="updateCurrent">
<t-step-item title="申请提交" content="已于12月21日提交" />
<t-step-item title="电子发票" content="预计13个工作日" />
<t-step-item title="发票已邮寄" content="电子发票开出后7个工作日内联系" />
<t-step-item title="完成" content />
</t-steps>
</t-row>
</div>
</card>
<!-- 产品目录 -->
<div :class="prefix + '-panel'">
<t-row
:class="prefix + '-operater-row'"
justify="space-between"
>
<p :class="prefix + '-operater-title'">
产品目录
</p>
</t-row>
<card title="产品目录">
<template #option>
<t-radio-group default-value="dateVal">
<t-radio-button value="dateVal">
季度
</t-radio-button>
<t-radio-button value="monthVal">
月份
</t-radio-button>
</t-radio-group>
</template>
<t-row class="operater-block-container">
<t-col :flex="1">
<div class="operater-add">
<div class="operater-sub">
<svg
width="34"
height="34"
viewBox="0 0 34 34"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0.5"
y="0.5"
width="33"
height="33"
rx="16.5"
stroke="white"
/>
<path d="M16.35 17.6501V21.5H17.65V17.6501H21.5V16.3501H17.65V12.5H16.35V16.3501H12.5V17.6501H16.35Z" />
</svg>
<t-icon name="add" class="operater-sub-icon" />
<span>新增产品</span>
</div>
</div>
</t-col>
<t-col :flex="1">
<div class="operater-block operater-gap">
<div class="operater-content">
<div class="operater-title">
<svg
class="operater-title-icon"
width="56"
height="56"
viewBox="0 0 56 56"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="28"
cy="28"
r="28"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M14 18H17.1529L19.93 34.663C20.0586 35.4345 20.7261 36 21.5083 36H40V34H21.8471L21.1805 30H38.4478C39.182 30 39.8219 29.5003 40 28.7881L41.7 21.9881C41.9525 20.9782 41.1887 20 40.1478 20H19.5138L19.07 17.337C18.9414 16.5655 18.2739 16 17.4917 16H14V18ZM38.1355 28H20.8471L19.8471 22H39.6355L38.1355 28Z"
/>
<path
d="M21.5 41C22.3284 41 23 40.3284 23 39.5C23 38.6716 22.3284 38 21.5 38C20.6716 38 20 38.6716 20 39.5C20 40.3284 20.6716 41 21.5 41Z"
/>
<path
d="M37.6259 41C38.4543 41 39.1259 40.3284 39.1259 39.5C39.1259 38.6716 38.4543 38 37.6259 38C36.7975 38 36.1259 38.6716 36.1259 39.5C36.1259 40.3284 36.7975 41 37.6259 41Z"
/>
</svg>
<h1>Macbook Pro 2021</h1>
<div class="operater-title-subtitle">
Macbook Pro 2021
</div>
<div class="operater-title-tags">
<t-tag
class="operater-title-tag"
theme="success"
size="small"
>
13.3 英寸
</t-tag>
<t-tag
class="operater-title-tag"
size="small"
>
Apple M1
</t-tag>
<t-tag
class="operater-title-tag"
size="small"
>
RAM 16GB
</t-tag>
</div>
</div>
<div class="operater-item">
<span
class="operater-item-info"
>最高可选配 16GB 内存 · 最高可选配 2TB 存储设备 电池续航最长达 18 小时</span>
<t-icon
class="operater-item-icon"
name="chevron-right"
size="small"
style="color: rgba(0, 0, 0, .26)"
/>
</div>
<div class="operater-footer">
<span class="operater-footer-percentage">1420 / 1500</span>
<t-progress
class="operater-progress"
theme="line"
:percentage="(1420 / 1500) * 100"
:label="false"
track-color="#D4E3FC"
/>
</div>
</div>
</div>
</t-col>
<t-col :flex="1">
<div class="operater-block operater-gap">
<div class="operater-content">
<div class="operater-title">
<svg
class="operater-title-icon"
width="56"
height="56"
viewBox="0 0 56 56"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="28"
cy="28"
r="28"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M14 18H17.1529L19.93 34.663C20.0586 35.4345 20.7261 36 21.5083 36H40V34H21.8471L21.1805 30H38.4478C39.182 30 39.8219 29.5003 40 28.7881L41.7 21.9881C41.9525 20.9782 41.1887 20 40.1478 20H19.5138L19.07 17.337C18.9414 16.5655 18.2739 16 17.4917 16H14V18ZM38.1355 28H20.8471L19.8471 22H39.6355L38.1355 28Z"
/>
<path
d="M21.5 41C22.3284 41 23 40.3284 23 39.5C23 38.6716 22.3284 38 21.5 38C20.6716 38 20 38.6716 20 39.5C20 40.3284 20.6716 41 21.5 41Z"
/>
<path
d="M37.6259 41C38.4543 41 39.1259 40.3284 39.1259 39.5C39.1259 38.6716 38.4543 38 37.6259 38C36.7975 38 36.1259 38.6716 36.1259 39.5C36.1259 40.3284 36.7975 41 37.6259 41Z"
/>
</svg>
<h1>Surface Laptop Go</h1>
<div class="operater-title-subtitle">
微软Microsoft Corporation
</div>
<div class="operater-title-tags">
<t-tag
class="operater-title-tag"
theme="success"
size="small"
>
12.4 英寸
</t-tag>
<t-tag
class="operater-title-tag"
size="small"
>
Core i7
</t-tag>
<t-tag
class="operater-title-tag"
size="small"
>
RAM 16GB
</t-tag>
</div>
</div>
<div class="operater-item">
<span class="operater-item-info">常规使用 Surface续航时间最长可达13小时 随时伴您工作</span>
<t-icon
class="operater-item-icon"
name="chevron-right"
size="small"
style="color: rgba(0, 0, 0, .26)"
/>
</div>
</div>
<div class="operater-footer">
<span class="operater-footer-percentage">120 / 2000</span>
<t-progress
class="operater-progress"
theme="line"
:percentage="(120 / 2000) * 100"
:label="false"
color="#E24D59"
track-color="#FCD4D4"
/>
</div>
</div>
<t-col v-for="(item, index) in PRODUCT_LIST" :key="index" :flex="1">
<product :data="item" />
</t-col>
</t-row>
</div>
</card>
<!-- 产品采购明细 -->
<div :class="prefix + '-panel'">
<t-row
:class="prefix + '-operater-row'"
justify="space-between"
>
<p :class="prefix + '-operater-title'">
产品采购明细
</p>
</t-row>
<card title="产品采购明细">
<t-table
:columns="columns"
:data="data"
:pagination="pagination"
:hover="hover"
:hover="true"
row-key="index"
size="large"
@sort-change="sortChange"
@ -289,53 +71,32 @@
<template #pdName="{ row }">
<span>
{{ row.pdName }}
<t-tag
v-if="row.pdType"
size="small"
>{{ row.pdType }}</t-tag>
<t-tag v-if="row.pdType" size="small">{{ row.pdType }}</t-tag>
</span>
</template>
<template #purchaseNum="{ row }">
<span>
{{ row.purchaseNum }}
<t-tag
v-if="row.purchaseNum > 50"
theme="danger"
variant="light"
size="small"
>超预算</t-tag>
<t-tag v-if="row.purchaseNum > 50" theme="danger" variant="light" size="small">超预算</t-tag>
</span>
</template>
<template #op="slotProps">
<a
:class="prefix + '-link'"
@click="listClick(slotProps)"
>管理</a>
<a
:class="prefix + '-link'"
@click="deleteClickOp(slotProps)"
>删除</a>
<a :class="PREFIX + '-link'" @click="listClick()">管理</a>
<a :class="PREFIX + '-link'" @click="deleteClickOp(slotProps)">删除</a>
</template>
<template #op-column>
<t-icon name="descending-order" />
</template>
</t-table>
</div>
<t-dialog
v-model:visible="visible"
header="基本信息"
@confirm="onConfirm"
>
</card>
<t-dialog v-model:visible="visible" header="基本信息" @confirm="onConfirm">
<template #body>
<div class="dialog-info-block">
<div
v-for="(item, index) in baseInfoData"
:key="index"
class="info-item"
>
<div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
<h1>{{ item.name }}</h1>
<span
:class="{
@ -353,78 +114,91 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { PREFIX as prefix } from '@/config/global';
import model from './index';
import { defineComponent, ref, onMounted } from 'vue';
import { PREFIX } from '@/config/global';
import { BASE_INFO_DATA, TABLE_COLUMNS_DATA, PRODUCT_LIST } from './constants';
import request from '@/utils/request';
import { ResDataType } from '@/interface';
//
import './index.less';
import Card from '@/components/card/index.vue';
import Product from './components/Product.vue';
export default defineComponent({
name: 'DetailAdvanced',
data() {
return {
data: [],
prefix,
updateCurrent: 0,
columns: model.getTableColumns(),
baseInfoData: model.getBaseInfoData(),
bordered: true,
hover: true,
visible: false,
pagination: {
components: {
Card,
Product,
},
setup() {
const data = ref([]);
const pagination = ref({
defaultPageSize: 10,
total: 100,
defaultCurrent: 1,
},
};
},
async mounted() {
//
setInterval(() => {
if (this.updateCurrent > 5) {
this.updateCurrent = -1;
}
this.updateCurrent = this.updateCurrent + 1;
}, 2000);
});
this.$request
.get('/api/get-purchase-list')
.then((res) => {
const updateCurrent = ref(0);
const setpUpdate = () => {
setInterval(() => {
if (updateCurrent.value > 5) {
updateCurrent.value = -1;
}
updateCurrent.value += 1;
}, 2000);
};
const fetchData = async () => {
try {
const res:ResDataType = await request.get('/api/get-purchase-list');
if (res.code === 0) {
const { list = [] } = res.data;
this.data = list;
this.pagination = {
...this.pagination,
data.value = list;
pagination.value = {
...pagination.value,
total: list.length,
};
}
})
.catch((e) => {
} catch (e) {
console.log(e);
}
};
onMounted(() => {
setpUpdate();
fetchData();
});
},
methods: {
const visible = ref(false);
return {
BASE_INFO_DATA,
PREFIX,
PRODUCT_LIST,
columns: TABLE_COLUMNS_DATA,
data,
pagination,
visible,
updateCurrent,
sortChange(val) {
console.log(val);
},
rehandleChange(changeParams, triggerAndData) {
console.log('统一Change', changeParams, triggerAndData);
},
listClick(e) {
console.log(e);
this.visible = true;
listClick() {
visible.value = true;
},
deleteClickOp(e) {
this.data.splice(e.index, 1);
deleteClickOp(columns) {
data.value.splice(columns.index, 1);
},
onConfirm() {
this.visible = false;
visible.value = false;
},
};
},
});
</script>
<style>
<style lang="less" scoped>
@import url('./index.less');
</style>

View File

@ -0,0 +1,78 @@
export const BASE_INFO_DATA = [
{
name: '合同名称',
value: '总部办公用品采购项目',
type: null,
},
{
name: '合同状态',
value: '履行中',
type: {
key: 'contractStatus',
value: 'inProgress',
},
},
{
name: '合同编号',
value: 'BH00010',
type: null,
},
{
name: '合同类型',
value: '主合同',
type: null,
},
{
name: '合同收付类型',
value: '付款',
type: null,
},
{
name: '合同金额',
value: '5,000,000元',
type: null,
},
{
name: '甲方',
value: '腾讯科技(深圳)有限公司',
type: null,
},
{
name: '乙方',
value: '欧尚',
type: null,
},
{
name: '合同签订日期',
value: '2020-12-20',
type: null,
},
{
name: '合同生效日期',
value: '2021-01-20',
type: null,
},
{
name: '合同结束日期',
value: '2022-12-20',
type: null,
},
{
name: '合同附件',
value: '总部办公用品采购项目合同.pdf',
type: {
key: 'contractAnnex',
value: 'pdf',
},
},
{
name: '备注',
value: '--',
type: null,
},
{
name: '创建时间',
value: '2020-12-22 10:00:00',
type: null,
},
]

View File

@ -4,27 +4,44 @@
padding-top: @spacer-3;
}
.@{prefix} {
&-panel {
background-color: white;
padding: @spacer-4;
border-radius: @border-radius;
.t-steps .t-steps-item-title {
font-size: @font-size-base;
}
.@{prefix} {
&-operater-row {
margin-bottom: 12px;
}
}
&-operater-title {
font-weight: 400;
.detail-base-panel {
background-color: white;
padding: @spacer-3 @spacer-4 @spacer-4 @spacer-4;
border-radius: @border-radius;
margin-top: 0;
&-row {
margin-bottom: 12px;
}
}
.detail-base-info {
margin-bottom: 12px;
}
.detail-base-info-title {
margin: @spacer-1 0;
font-size: @font-size-xl;
font-weight: 500;
line-height: 28px;
color: @text-color-primary;
font-family: PingFangSC-Medium;
font-family: PingFangSC-Regular;
}
.t-steps-item-title {
font-size: @font-size-base;
}
}
.detail-base-info-steps {
padding-top: 12px;
}
.info-block {

View File

@ -1,21 +1,13 @@
<template>
<div>
<div :class="prefix + '-panel'">
<div class="base-info">
<t-row
:class="prefix + '-operater-row'"
justify="space-between"
>
<p :class="prefix + '-operater-title'">
<div class="detail-base-panel">
<t-row class="detail-base-info" justify="space-between">
<p class="detail-base-info-title">
基本信息
</p>
</t-row>
<div class="info-block">
<div
v-for="(item, index) in baseInfoData"
:key="index"
class="info-item"
>
<div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
<h1>{{ item.name }}</h1>
<span
:class="{
@ -28,34 +20,17 @@
</span>
</div>
</div>
</div>
<t-divider style="margin-top: 12px" />
<t-divider style="margin-top: 24px; margin-bottom: 23px; border-top-color: rgba(255, 255, 255, 0)" />
<div class="update-history">
<t-row
:class="prefix + '-operater-row'"
justify="space-between"
>
<p :class="prefix + '-operater-title'">
<t-row class="detail-base-info" justify="space-between">
<p class="detail-base-info-title">
变更记录
</p>
</t-row>
<t-steps
direction="vertical"
theme="dot"
:current="1"
>
<t-step-item
title="上传合同附件"
content="这里是提示文字"
/>
<t-step-item
title="修改合同金额"
content="这里是提示文字"
/>
<t-step-item
title="新建合同"
content="2020-12-01 15:00:00 管理员-李川操作"
/>
<t-steps class="detail-base-info-steps" direction="vertical" theme="dot" :current="1">
<t-step-item title="上传合同附件" content="这里是提示文字" />
<t-step-item title="修改合同金额" content="这里是提示文字" />
<t-step-item title="新建合同" content="2020-12-01 15:00:00 管理员-李川操作" />
</t-steps>
</div>
</div>
@ -63,21 +38,17 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { PREFIX as prefix } from '@/config/global';
import model from './index';
import './index.less';
import { BASE_INFO_DATA } from './constants';
export default defineComponent({
name: 'ListBase',
data() {
return {
prefix,
baseInfoData: model.getBaseInfoData(),
BASE_INFO_DATA,
};
},
});
</script>
<style>
<style lang="less" scoped>
@import url('./index.less');
</style>

View File

@ -0,0 +1,115 @@
export const BASE_INFO_DATA = [
{
name: '集群名',
value: 'helloworld',
type: null,
},
{
name: '集群ID',
value: 'cls - 2ntelvxw',
type: {
key: 'color',
value: 'blue',
},
},
{
name: '状态',
value: '运行中',
type: {
key: 'color',
value: 'green',
},
},
{
name: 'K8S版本',
value: '1.7.8',
type: null,
},
{
name: '配置',
value: '6.73 核 10.30 GB',
type: null,
},
{
name: '所在地域',
value: '广州',
type: null,
},
{
name: '新增资源所属项目',
value: '默认项目',
type: null,
},
{
name: '节点数量',
value: '4 个',
type: null,
},
{
name: '节点网络',
value: 'vpc - 5frmkm1x',
type: {
key: 'color',
value: 'blue',
},
},
{
name: '容器网络',
value: '172.16.0.0 / 16',
type: null,
},
{
name: '集群凭证',
value: '显示凭证',
type: {
key: 'color',
value: 'blue',
},
},
{
name: '创建/更新',
value: '2018-05-31 22:11:44 2018-05-31 22:11:44',
type: {
key: 'contractAnnex',
value: 'pdf',
},
},
{
name: '描述',
value: 'istio_test',
type: null,
},
];
export const TABLE_COLUMNS = [
{
minWidth: '250',
ellipsis: true,
colKey: 'name',
title: '项目名称',
sorter: (a, b) => a.name.substr(10) - b.name.substr(10),
},
{
minWidth: '200',
ellipsis: true,
colKey: 'adminName',
title: '管理员',
},
{
minWidth: '100',
className: 'test',
ellipsis: true,
colKey: 'updateTime',
title: '创建时间',
sorter: (a, b) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
},
{
align: 'left',
width: 200,
className: 'test2',
ellipsis: true,
colKey: 'op',
title: '操作',
},
];

View File

@ -3,8 +3,7 @@
.secondary-notification {
background-color: white;
border-radius: @border-radius;
margin-top: 16px;
padding: 32px;
padding: @spacer-3 @spacer-4;
.t-tabs__content {
padding-top: 0;
@ -12,12 +11,11 @@
}
.secondary-msg-list {
min-height: 443px;
max-height: calc(100vh - 400px);
height: 70vh;
.t-list-item {
cursor: pointer;
padding: 16px 24px 16px 0;
padding: 13px 24px 13px 0;
&:hover {
background-color: @bg-color-container-hover;
@ -36,6 +34,11 @@
}
}
}
.t-tag.t-size-s {
margin-right: @spacer-1;
margin-left: 0;
}
}
.content {

View File

@ -1,30 +1,11 @@
<template>
<t-page-header> 通知中心 </t-page-header>
<div class="secondary-notification">
<t-tabs v-model="value">
<t-tab-panel
value="frist"
label="全部通知"
>
<t-list
v-if="msgData.length > 0"
class="secondary-msg-list"
:split="true"
>
<t-list-item
v-for="(item, index) in msgData"
:key="index"
>
<p
:class="['content', { unread: item.status }]"
@click="setReadStatus(item)"
>
<t-tag
class="operater-title-tag"
size="small"
:theme="NOTIFICATION_TYPES[item.priorty]"
variant="light"
>
<t-tabs v-model="tabValue">
<t-tab-panel v-for="(tab, tabIndex) in TAB_LIST" :key="tabIndex" :value="tab.value" :label="tab.label">
<t-list v-if="msgDataList.length > 0" class="secondary-msg-list" :split="true">
<t-list-item v-for="(item, index) in msgDataList" :key="index">
<p :class="['content', { unread: item.status }]" @click="setReadStatus(item)">
<t-tag class="operater-title-tag" size="small" :theme="NOTIFICATION_TYPES[item.priorty]" variant="light">
{{ item.type }}
</t-tag>
{{ item.content }}
@ -38,212 +19,25 @@
:overlay-style="{ margin: '6px' }"
:content="item.status ? '设为已读' : '设为未读'"
>
<span
class="msg-action-icon"
@click="setReadStatus(item)"
>
<t-icon
v-if="!!item.status"
name="queue"
size="16px"
/>
<svg
v-else
width="16"
height="17"
viewBox="0 0 16 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.63795 11.4471H8.5V12.4471H5L2.49205 14.537C2.29666 14.6999 2 14.5609 2 14.3066V4.94708C2 4.3948 2.44772 3.94708 3 3.94708H13C13.5523 3.94708 14 4.3948 14 4.94708V10H13V4.94708H3V12.812L4.63795 11.4471Z"
fill="black"
/>
<path
d="M11.7786 14.9286L15.3536 11.3535L14.6464 10.6465L11.7786 13.5144L10.1318 11.8677L9.42471 12.5748L11.7786 14.9286Z"
fill="black"
/>
</svg>
<span class="msg-action-icon" @click="setReadStatus(item)">
<t-icon v-if="!!item.status" name="queue" size="16px" />
<read-icon v-else />
</span>
</t-tooltip>
<t-tooltip
content="删除通知"
:overlay-style="{ margin: '6px' }"
>
<t-tooltip content="删除通知" :overlay-style="{ margin: '6px' }">
<span @click="handleClickDeleteBtn(item)">
<t-icon
name="delete"
size="16px"
/>
<t-icon name="delete" size="16px" />
</span>
</t-tooltip>
</div>
</template>
</t-list-item>
</t-list>
<div
v-else
class="secondary-msg-list__empty-list"
>
<img
src="https://tdesign.gtimg.com/pro-template/personal/nothing.png"
alt="空"
>
<div v-else class="secondary-msg-list__empty-list">
<img src="https://tdesign.gtimg.com/pro-template/personal/nothing.png" alt="空">
<p>暂无通知</p>
</div>
</t-tab-panel>
<t-tab-panel
value="second"
label="未读通知"
>
<t-list
v-if="unreadMsg.length > 0"
class="secondary-msg-list"
:split="true"
>
<t-list-item
v-for="(item, index) in unreadMsg"
:key="index"
>
<p
:class="['content', { unread: item.status }]"
@click="setReadStatus(item)"
>
<t-tag
class="operater-title-tag"
size="small"
:theme="NOTIFICATION_TYPES[item.priorty]"
variant="light"
>
{{ item.type }}
</t-tag>
{{ item.content }}
</p>
<template #action>
<p class="msg-date">
{{ item.date }}
</p>
<div class="msg-action">
<t-tooltip
class="set-read-icon"
:overlay-style="{ margin: '6px' }"
:content="item.status ? '设为已读' : '设为未读'"
>
<span @click="setReadStatus(item)">
<t-icon
name="queue"
size="16px"
/>
</span>
</t-tooltip>
<t-tooltip
content="删除通知"
:overlay-style="{ margin: '6px' }"
>
<span @click="handleClickDeleteBtn(item)">
<t-icon
name="delete"
size="16px"
/>
</span>
</t-tooltip>
</div>
</template>
</t-list-item>
</t-list>
<div
v-else
class="secondary-msg-list__empty-list"
>
<img
src="https://tdesign.gtimg.com/pro-template/personal/nothing.png"
alt="空"
>
<p>暂无未读通知</p>
</div>
</t-tab-panel>
<t-tab-panel
value="third"
label="已读通知"
>
<t-list
v-if="readMsg.length > 0"
class="secondary-msg-list"
:split="true"
>
<t-list-item
v-for="(item, index) in readMsg"
:key="index"
>
<p :class="['content', { unread: item.status }]">
<t-tag
class="operater-title-tag"
size="small"
:theme="NOTIFICATION_TYPES[item.priorty]"
variant="light"
>
{{ item.type }}
</t-tag>
{{ item.content }}
</p>
<template #action>
<p class="msg-date">
{{ item.date }}
</p>
<div class="msg-action">
<t-tooltip
class="set-read-icon"
:overlay-style="{ margin: '6px' }"
:content="item.status ? '设为已读' : '设为未读'"
>
<span
class="msg-action-icon"
@click="setReadStatus(item)"
>
<svg
width="16"
height="17"
viewBox="0 0 16 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.63795 11.4471H8.5V12.4471H5L2.49205 14.537C2.29666 14.6999 2 14.5609 2 14.3066V4.94708C2 4.3948 2.44772 3.94708 3 3.94708H13C13.5523 3.94708 14 4.3948 14 4.94708V10H13V4.94708H3V12.812L4.63795 11.4471Z"
fill="black"
/>
<path
d="M11.7786 14.9286L15.3536 11.3535L14.6464 10.6465L11.7786 13.5144L10.1318 11.8677L9.42471 12.5748L11.7786 14.9286Z"
fill="black"
/>
</svg>
</span>
</t-tooltip>
<t-tooltip
content="删除通知"
:overlay-style="{ margin: '6px' }"
>
<span @click="handleClickDeleteBtn(item)">
<t-icon
name="delete"
size="16px"
/>
</span>
</t-tooltip>
</div>
</template>
</t-list-item>
</t-list>
<div
v-else
class="secondary-msg-list__empty-list"
>
<img
src="https://tdesign.gtimg.com/pro-template/personal/nothing.png"
alt="空"
>
<p>暂无已读通知</p>
</div>
</t-tab-panel>
</t-tabs>
</div>
<t-dialog
@ -254,56 +48,87 @@
/>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { mapState, mapGetters } from 'vuex';
import { PREFIX as prefix } from '@/config/global';
import { defineComponent, ref, computed } from 'vue';
import { useStore } from 'vuex';
import { NOTIFICATION_TYPES } from '@/constants';
import ReadIcon from '@/assets/read.svg?component';
//
import './index.less';
const TAB_LIST = [
{
label: '全部通知',
value: 'msgData',
},
{
label: '未读通知',
value: 'unreadMsg',
},
{
label: '已读通知',
value: 'readMsg',
},
];
export default defineComponent({
name: 'DetailSecondary',
components: {},
data() {
return {
NOTIFICATION_TYPES,
prefix,
data: [],
value: 'frist',
visible: false,
selectedItem: undefined,
components: { ReadIcon },
setup() {
const tabValue = ref('msgData');
const visible = ref(false);
const selectedItem = ref(undefined);
const store = useStore();
const { msgData } = store.state.notification;
const msgDataList = computed(() => {
if (tabValue.value === 'msgData') return msgData;
if (tabValue.value === 'unreadMsg') return store.getters['notification/unreadMsg'];
if (tabValue.value === 'readMsg') return store.getters['notification/readMsg'];
return [];
});
const handleClickDeleteBtn = (item) => {
visible.value = true;
selectedItem.value = item;
};
},
computed: {
...mapState('notification', ['msgData']),
...mapGetters('notification', ['unreadMsg', 'readMsg']),
},
methods: {
handleClickDeleteBtn(item) {
this.visible = true;
this.selectedItem = item;
},
setReadStatus(item) {
const changeMsg = this.msgData;
const setReadStatus = (item) => {
const changeMsg = msgData;
changeMsg.forEach((e) => {
if (e.id === item.id) {
e.status = !e.status;
}
});
this.$store.commit('notification/setMsgData', changeMsg);
},
deleteMsg() {
const item = this.selectedItem;
const changeMsg = this.msgData;
store.commit('notification/setMsgData', changeMsg);
};
const deleteMsg = () => {
const item = selectedItem.value;
const changeMsg = msgData;
changeMsg.forEach((e, index) => {
if (e.id === item.id) {
changeMsg.splice(index, 1);
}
});
this.visible = false;
this.$store.commit('notification/setMsgData', changeMsg);
},
visible.value = false;
store.commit('notification/setMsgData', changeMsg);
};
return {
TAB_LIST,
NOTIFICATION_TYPES,
visible,
selectedItem,
tabValue,
msgDataList,
handleClickDeleteBtn,
setReadStatus,
deleteMsg,
};
},
});
</script>
<style lang="less" scoped>
@import url('./index.less');
</style>

View File

@ -0,0 +1,42 @@
export const FORM_RULES = {
name: [{ required: true, message: '请输入合同名称', type: 'error' }],
type: [{ required: true, message: '请选择合同类型', type: 'error' }],
payment: [{ required: true, message: '请选择合同收付类型', type: 'error' }],
amount: [{ required: true, message: '请输入合同金额', type: 'error' }],
partyA: [{ required: true, message: '请选择甲方', type: 'error' }],
partyB: [{ required: true, message: '请选择乙方', type: 'error' }],
signDate: [{ required: true, message: '请选择日期', type: 'error' }],
startDate: [{ required: true, message: '请选择日期', type: 'error' }],
endDate: [{ required: true, message: '请选择日期', type: 'error' }],
}
export const INITIAL_DATA = {
name: '',
type: '',
partyA: '',
partyB: '',
signDate: '',
startDate: '',
endDate: '',
payment: '1',
amount: 0,
comment: ''
};
export const TYPE_OPTIONS = [
{ label: '类型A', value: '1' },
{ label: '类型B', value: '2' },
{ label: '类型C', value: '3' },
]
export const PARTY_A_OPTIONS = [
{ label: '公司A', value: '1' },
{ label: '公司B', value: '2' },
{ label: '公司C', value: '3' },
]
export const PARTY_B_OPTIONS = [
{ label: '公司A', value: '1' },
{ label: '公司B', value: '2' },
{ label: '公司C', value: '3' },
]

View File

@ -25,3 +25,154 @@
color: @text-color-secondary;
line-height: 20px;
}
.form-item-container {
display: flex;
// align-items: center;
justify-content: center;
}
.form-basic-container {
display: flex;
align-items: center;
justify-content: center;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
.span-item {
width: 12px;
}
.form-gap {
padding-left: 32px;
}
.row-gap {
padding-bottom: 24px;
}
.form-basic-item {
// padding: 0 60px 0 160px;
.form-basic-container-title {
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 22px;
color: rgba(0, 0, 0, .9);
padding: 64px 0 32px 0;
}
// .t-size-m {
// width: 100% !important;
// min-width: 280px;
// }
// .t-form-item__type {
// // width: 100% !important;
// min-width: 280px;
// }
}
.tdesign-pro-panel {
margin-top: 0px !important;
}
.t-textarea__inner {
height: 124px !important;
}
.form-cretifier {
font-size: 14px;
color: #000000;
padding-top: 24px;
padding-bottom: 130px;
.form-cretifier-container {
padding-top: 12px;
.form-cretifier-circle {
background: #0052d9;
border: 1px solid #a7a4a4;
border-radius: 40px;
width: 32px;
height: 32px;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
text-align: center;
line-height: 22px;
font-weight: 500;
position: absolute;
}
.form-cretifier-gap1 {
margin-left: 25px;
}
.form-cretifier-gap2 {
margin-left: 50px;
}
.form-cretifier-blure {
background: #d4e3fc;
color: #0052d9;
}
}
}
}
.form-submit-container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding-top: 30px;
padding-bottom: 28px;
background-color: #e3e6eb;
border-bottom: solid 1px #d8dadf;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
.form-submint-sub {
width: 676px;
display: flex;
align-items: center;
justify-content: space-between;
.form-submit-left {
.form-submit-upload-span {
font-size: 14px;
line-height: 22px;
color: rgba(0, 0, 0, .4);
padding-top: 8px;
display: inline-block;
}
}
.form-submit-upload-btn {
width: 144px;
height: 40px;
}
.form-submit-right {
.form-submit-cancel {
font-size: 16px !important;
color: #0052d9 !important;
background-color: #ebedf100 !important;
}
.form-submit-confirm {
font-size: 16px !important;
background: #0052d9 !important;
border-radius: 3px !important;
width: 80px !important;
height: 40px !important;
}
}
}
}

View File

@ -0,0 +1,53 @@
export const FORM_RULES = {
name: [{ required: true, message: '请选择合同名称', type: 'error' }],
type: [{ required: true, message: '请选择发票类型', type: 'error' }],
title: [{ required: true, message: '请输入发票抬头', type: 'error' }],
taxNum: [{ required: true, message: '请输入纳税人识别号', type: 'error' }],
consignee: [{ required: true, message: '请输入收货人', type: 'error' }],
mobileNum: [{ required: true, message: '请输入手机号码', type: 'error' }],
deliveryAddress: [{ required: true, message: '请选择收货地址', type: 'error' }],
fullAddress: [{ required: true, message: '请输入详细地址', type: 'error' }],
};
export const NAME_OPTIONS = [
{ label: '合同A', value: '1' },
{ label: '合同B', value: '2' },
{ label: '合同C', value: '3' },
];
export const TYPE_OPTIONS = [
{ label: '类型A', value: '1' },
{ label: '类型B', value: '2' },
{ label: '类型C', value: '3' },
];
export const ADDRESS_OPTIONS = [
{ label: '广东省深圳市南山区', value: '1' },
{ label: '北京市海淀区', value: '2' },
{ label: '上海市徐汇区', value: '3' },
{ label: '四川省成都市高新区', value: '4' },
{ label: '广东省广州市天河区', value: '5' },
{ label: '陕西省西安市高新区', value: '6' },
];
export const INITIAL_DATA1 = {
name: '',
type: '',
};
export const INITIAL_DATA2 = {
title: '',
taxNum: '',
address: '',
bank: '',
bankAccount: '',
email: '',
tel: '',
};
export const INITIAL_DATA3 = {
consignee: '',
mobileNum: '',
deliveryAddress: '',
fullAddress: '',
};

View File

@ -1,12 +1,8 @@
<template>
<t-page-header>分步表单页</t-page-header>
<div :class="`${prefix}-panel ${prefix}-step-panel`">
<div :class="`${PREFIX}-panel ${PREFIX}-step-panel`">
<!-- 简单步骤条 -->
<div :class="`${prefix}-step step-top`">
<t-steps
:current="activeForm"
status="process"
>
<div :class="`${PREFIX}-step step-top`">
<t-steps :current="activeForm" status="process">
<t-step-item title="提交开票申请" />
<t-step-item title="填写发票信息" />
<t-step-item title="确认邮寄地址" />
@ -15,15 +11,8 @@
</div>
<!-- 分步表单1 -->
<div
v-show="activeForm === 0"
class="rule-tips"
>
<t-alert
theme="info"
title="发票开具规则:"
:close="true"
>
<div v-show="activeForm === 0" class="rule-tips">
<t-alert theme="info" title="发票开具规则:" :close="true">
<template #message>
<p>
1申请开票后电子发票在13个工作日内开具增值税专用发票纸质如资质审核通过将在电子发票开具后10个工作日内为您寄出
@ -37,46 +26,20 @@
v-show="activeForm === 0"
class="step-form"
:data="formData1"
:rules="rules"
:rules="FORM_RULES"
label-align="left"
@submit="onSubmit1"
>
<t-form-item
label="合同名称"
name="name"
>
<t-select
v-model="formData1.name"
:style="{ width: '480px' }"
class="demo-select-base"
clearable
>
<t-option
v-for="(item, index) in nameOptions"
:key="index"
:value="item.value"
:label="item.label"
@submit="({ validateResult }) => onSubmit({ validateResult }, 1)"
>
<t-form-item label="合同名称" name="name">
<t-select v-model="formData1.name" :style="{ width: '480px' }" class="demo-select-base" clearable>
<t-option v-for="(item, index) in NAME_OPTIONS" :key="index" :value="item.value" :label="item.label">
{{ item.label }}
</t-option>
</t-select>
</t-form-item>
<t-form-item
label="发票类型"
name="type"
>
<t-select
v-model="formData1.type"
:style="{ width: '480px' }"
class="demo-select-base"
clearable
>
<t-option
v-for="(item, index) in typeOptions"
:key="index"
:value="item.value"
:label="item.label"
>
<t-form-item label="发票类型" name="type">
<t-select v-model="formData1.type" :style="{ width: '480px' }" class="demo-select-base" clearable>
<t-option v-for="(item, index) in TYPE_OPTIONS" :key="index" :value="item.value" :label="item.label">
{{ item.label }}
</t-option>
</t-select>
@ -85,10 +48,7 @@
{{ amount }}
</t-form-item>
<t-form-item>
<t-button
theme="primary"
type="submit"
>
<t-button theme="primary" type="submit">
提交申请
</t-button>
</t-form-item>
@ -99,93 +59,37 @@
v-show="activeForm === 1"
class="step-form"
:data="formData2"
:rules="rules"
:rules="FORM_RULES"
label-align="left"
@reset="onReset2"
@submit="onSubmit2"
@reset="onReset(0)"
@submit="({ validateResult }) => onSubmit({ validateResult }, 2)"
>
<t-form-item
label="发票抬头"
name="title"
>
<t-input
v-model="formData2.title"
:style="{ width: '480px' }"
placeholder="请输入发票抬头"
/>
<t-form-item label="发票抬头" name="title">
<t-input v-model="formData2.title" :style="{ width: '480px' }" placeholder="请输入发票抬头" />
</t-form-item>
<t-form-item
label="纳税人识别号"
name="taxNum"
>
<t-input
v-model="formData2.taxNum"
:style="{ width: '480px' }"
placeholder="请输入纳税人识别号"
/>
<t-form-item label="纳税人识别号" name="taxNum">
<t-input v-model="formData2.taxNum" :style="{ width: '480px' }" placeholder="请输入纳税人识别号" />
</t-form-item>
<t-form-item
label="单位地址"
name="address"
>
<t-input
v-model="formData2.address"
:style="{ width: '480px' }"
placeholder="请输入单位地址"
/>
<t-form-item label="单位地址" name="address">
<t-input v-model="formData2.address" :style="{ width: '480px' }" placeholder="请输入单位地址" />
</t-form-item>
<t-form-item
label="开户行"
name="bank"
>
<t-input
v-model="formData2.bank"
:style="{ width: '480px' }"
placeholder="请输入开户行"
/>
<t-form-item label="开户行" name="bank">
<t-input v-model="formData2.bank" :style="{ width: '480px' }" placeholder="请输入开户行" />
</t-form-item>
<t-form-item
label="银行账号"
name="bankAccount"
>
<t-input
v-model="formData2.bankAccount"
:style="{ width: '480px' }"
placeholder="请输入银行账号"
/>
<t-form-item label="银行账号" name="bankAccount">
<t-input v-model="formData2.bankAccount" :style="{ width: '480px' }" placeholder="请输入银行账号" />
</t-form-item>
<t-form-item
label="通知邮箱"
name="email"
>
<t-input
v-model="formData2.email"
:style="{ width: '480px' }"
placeholder="请输入通知邮箱"
/>
<t-form-item label="通知邮箱" name="email">
<t-input v-model="formData2.email" :style="{ width: '480px' }" placeholder="请输入通知邮箱" />
</t-form-item>
<t-form-item
label="通知手机"
name="tel"
>
<t-input
v-model="formData2.tel"
:style="{ width: '480px' }"
placeholder="请输入通知手机"
/>
<t-form-item label="通知手机" name="tel">
<t-input v-model="formData2.tel" :style="{ width: '480px' }" placeholder="请输入通知手机" />
</t-form-item>
<t-form-item>
<t-button
type="reset"
theme="default"
variant="base"
>
<t-button type="reset" theme="default" variant="base">
上一步
</t-button>
<t-button
theme="primary"
type="submit"
>
<t-button theme="primary" type="submit">
下一步
</t-button>
</t-form-item>
@ -196,35 +100,18 @@
v-show="activeForm === 2"
class="step-form"
:data="formData3"
:rules="rules"
:rules="FORM_RULES"
label-align="left"
@reset="onReset3"
@submit="onSubmit3"
@reset="onReset(1)"
@submit="({ validateResult }) => onSubmit({ validateResult }, 6)"
>
<t-form-item
label="收货人"
name="consignee"
>
<t-input
v-model="formData3.consignee"
:style="{ width: '480px' }"
placeholder="请输入收货人"
/>
<t-form-item label="收货人" name="consignee">
<t-input v-model="formData3.consignee" :style="{ width: '480px' }" placeholder="请输入收货人" />
</t-form-item>
<t-form-item
label="手机号码"
name="mobileNum"
>
<t-input
v-model="formData3.mobileNum"
:style="{ width: '480px' }"
placeholder="请输入手机号码"
/>
<t-form-item label="手机号码" name="mobileNum">
<t-input v-model="formData3.mobileNum" :style="{ width: '480px' }" placeholder="请输入手机号码" />
</t-form-item>
<t-form-item
label="收货地址"
name="deliveryAddress"
>
<t-form-item label="收货地址" name="deliveryAddress">
<t-select
v-model="formData3.deliveryAddress"
:style="{ width: '480px' }"
@ -232,53 +119,27 @@
class="demo-select-base"
clearable
>
<t-option
v-for="(item, index) in addressOptions"
:key="index"
:value="item.value"
:label="item.label"
>
<t-option v-for="(item, index) in ADDRESS_OPTIONS" :key="index" :value="item.value" :label="item.label">
{{ item.label }}
</t-option>
</t-select>
</t-form-item>
<t-form-item
label="详细地址"
name="fullAddress"
>
<t-textarea
v-model="formData3.fullAddress"
:style="{ width: '480px' }"
placeholder="请输入详细地址"
/>
<t-form-item label="详细地址" name="fullAddress">
<t-textarea v-model="formData3.fullAddress" :style="{ width: '480px' }" placeholder="请输入详细地址" />
</t-form-item>
<t-form-item>
<t-button
type="reset"
theme="default"
variant="base"
>
<t-button type="reset" theme="default" variant="base">
上一步
</t-button>
<t-button
theme="primary"
type="submit"
>
<t-button theme="primary" type="submit">
下一步
</t-button>
</t-form-item>
</t-form>
<!-- 分步表单4 -->
<div
v-show="activeForm === 6"
class="step-form-4"
>
<t-icon
name="check-circle-filled"
style="color: green"
size="52px"
/>
<div v-show="activeForm === 6" class="step-form-4">
<t-icon name="check-circle-filled" style="color: green" size="52px" />
<p class="text">
完成开票申请
</p>
@ -286,17 +147,10 @@
预计13个工作日会将电子发票发至邮箱发票邮寄请耐心等待
</p>
<div class="button-group">
<t-button
theme="primary"
@click="onReset4"
>
<t-button theme="primary" @click="onReset(0)">
再次申请
</t-button>
<t-button
variant="base"
theme="default"
@click="onSubmit4"
>
<t-button variant="base" theme="default" @click="complete">
查看进度
</t-button>
</div>
@ -304,117 +158,62 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { PREFIX as prefix } from '@/config/global';
import { PREFIX } from '@/config/global';
import { FORM_RULES, NAME_OPTIONS, TYPE_OPTIONS, ADDRESS_OPTIONS, INITIAL_DATA1, INITIAL_DATA2, INITIAL_DATA3 } from './constants';
//
import './index.less';
const INITIAL_DATA1 = {
name: '',
type: '',
};
const INITIAL_DATA2 = {
title: '',
taxNum: '',
address: '',
bank: '',
bankAccount: '',
email: '',
tel: '',
};
const INITIAL_DATA3 = {
consignee: '',
mobileNum: '',
deliveryAddress: '',
fullAddress: '',
};
export default defineComponent({
name: 'FormStep',
data() {
return {
prefix,
formData1: { ...INITIAL_DATA1 },
formData2: { ...INITIAL_DATA2 },
formData3: { ...INITIAL_DATA3 },
nameOptions: [
{ label: '合同A', value: '1' },
{ label: '合同B', value: '2' },
{ label: '合同C', value: '3' },
],
typeOptions: [
{ label: '类型A', value: '1' },
{ label: '类型B', value: '2' },
{ label: '类型C', value: '3' },
],
addressOptions: [
{ label: '广东省深圳市南山区', value: '1' },
{ label: '北京市海淀区', value: '2' },
{ label: '上海市徐汇区', value: '3' },
{ label: '四川省成都市高新区', value: '4' },
{ label: '广东省广州市天河区', value: '5' },
{ label: '陕西省西安市高新区', value: '6' },
],
rules: {
name: [{ required: true, message: '请选择合同名称', type: 'error' }],
type: [{ required: true, message: '请选择发票类型', type: 'error' }],
title: [{ required: true, message: '请输入发票抬头', type: 'error' }],
taxNum: [{ required: true, message: '请输入纳税人识别号', type: 'error' }],
consignee: [{ required: true, message: '请输入收货人', type: 'error' }],
mobileNum: [{ required: true, message: '请输入手机号码', type: 'error' }],
deliveryAddress: [{ required: true, message: '请选择收货地址', type: 'error' }],
fullAddress: [{ required: true, message: '请输入详细地址', type: 'error' }],
},
activeForm: 0,
};
},
computed: {
amount() {
if (this.formData1.name === '1') {
setup() {
const formData1 = ref({ ...INITIAL_DATA1 });
const formData2 = ref({ ...INITIAL_DATA2 });
const formData3 = ref({ ...INITIAL_DATA3 });
const activeForm = ref(0);
const amount = computed(() => {
if (formData1.value.name === '1') {
return '565421';
}
if (this.formData1.name === '2') {
if (formData1.value.name === '2') {
return '278821';
}
if (this.formData1.name === '3') {
if (formData1.value.name === '3') {
return '109824';
}
return '--';
},
},
methods: {
onSubmit1({ validateResult }) {
if (validateResult === true) {
this.activeForm = 1;
}
},
onSubmit2({ validateResult }) {
if (validateResult === true) {
this.activeForm = 2;
}
},
onReset2() {
this.activeForm = 0;
},
onSubmit3({ validateResult }) {
if (validateResult === true) {
this.activeForm = 6;
}
},
onReset3() {
this.activeForm = 1;
},
onSubmit4() {
this.$router.replace({ path: '/detail/advanced' });
},
onReset4() {
this.activeForm = 0;
},
},
});
return {
PREFIX,
NAME_OPTIONS,
TYPE_OPTIONS,
ADDRESS_OPTIONS,
FORM_RULES,
formData1,
formData2,
formData3,
activeForm,
amount,
onSubmit({ validateResult }, val) {
if (validateResult === true) {
activeForm.value = val;
}
},
onReset(val) {
activeForm.value = val;
},
complete() {
const router = useRouter();
router.replace({ path: '/detail/advanced' });
},
};
},
});
</script>
<style>
<style lang="less" scoped>
@import url('./index.less');
</style>

View File

@ -0,0 +1,48 @@
export const COLUMNS = [
{ colKey: 'row-select', type: 'multiple', width: '50' },
{
title: '合同名称',
minWidth: '200',
width: 200,
align: 'left',
ellipsis: true,
colKey: 'name',
},
{ title: '合同状态', colKey: 'status', width: 150, cell: { col: 'status' } },
{
title: '合同编号',
minWidth: '100',
width: 100,
ellipsis: true,
colKey: 'no',
},
{
title: '合同类型',
width: 150,
minWidth: '150',
ellipsis: true,
colKey: 'contractType',
},
{
title: '合同收付类型',
width: 200,
minWidth: '200',
ellipsis: true,
colKey: 'paymentType',
},
{
title: '合同金额 (元)',
width: 300,
minWidth: '300',
ellipsis: true,
colKey: 'amount',
},
{
align: 'left',
fixed: 'right',
width: 200,
ellipsis: true,
colKey: 'op',
title: '操作',
},
]

View File

@ -11,12 +11,10 @@ export default defineComponent({
ListCommonTable,
},
});
</script>
<style lang="less" scoped>
@import '@/style/index';
.@{prefix} {
&-panel {
background-color: white;
padding: @spacer-3;

View File

@ -1,10 +1,7 @@
<template>
<card>
<div class="result-success">
<t-icon
class="result-success-icon"
name="close-circle-filled"
/>
<t-icon class="result-success-icon" name="close-circle-filled" />
<div class="result-success-title">
项目创建失败
</div>

View File

@ -1,10 +1,7 @@
<template>
<card>
<div class="result-success">
<t-icon
class="result-success-icon"
name="check-circle-filled"
/>
<t-icon class="result-success-icon" name="check-circle-filled" />
<div class="result-success-title">
项目已创建成功
</div>
@ -12,10 +9,7 @@
可以联系负责人分发应用
</div>
<div>
<t-button
theme="default"
@click="() => $router.push('/detail/advanced')"
>
<t-button theme="default" @click="() => $router.push('/detail/advanced')">
查看进度
</t-button>
<t-button @click="() => $router.push('/form/base')">
@ -54,7 +48,7 @@ export default defineComponent({
&-title {
margin-top: 16px;
font-size: 20px;
color: rgba(0, 0, 0, .9);
color: rgba(0, 0, 0, 0.9);
text-align: center;
line-height: 22px;
}
@ -62,7 +56,7 @@ export default defineComponent({
&-describe {
margin: 8px 0 32px;
font-size: 14px;
color: rgba(0, 0, 0, .6);
color: rgba(0, 0, 0, 0.6);
line-height: 22px;
}
}

View File

@ -1,5 +1,4 @@
import { InjectionKey } from 'vue';
import { createStore, Store } from 'vuex';
import { createStore } from 'vuex';
import user from './modules/user';
import notification from './modules/notification';
import setting from './modules/setting';

View File

@ -6,42 +6,54 @@ const state = {
content: '腾讯大厦一楼改造施工项目 已通过审核!',
type: '合同动态',
status: true,
collected: false,
date: '2021-01-01 08:00',
priorty: 'high',
},
{
id: '124',
content: '三季度生产原材料采购项目 开票成功!',
type: '票务动态',
status: true,
collected: false,
date: '2021-01-01 08:00',
priorty: 'low',
},
{
id: '125',
content: '2021-01-01 10:00的【国家电网线下签约】会议即将开始请提前10分钟前往 会议室1 进行签到!',
type: '会议通知',
status: true,
collected: false,
date: '2021-01-01 08:00',
priorty: 'middle',
},
{
id: '126',
content: '一季度生产原材料采购项目 开票成功!',
type: '票务动态',
status: true,
collected: false,
date: '2021-01-01 08:00',
priorty: 'low',
},
{
id: '127',
content: '二季度生产原材料采购项目 开票成功!',
type: '票务动态',
status: true,
collected: false,
date: '2021-01-01 08:00',
priorty: 'low',
},
{
id: '128',
content: '三季度生产原材料采购项目 开票成功!',
type: '票务动态',
status: true,
collected: false,
date: '2021-01-01 08:00',
priorty: 'low',
},
],
};

27
src/utils/hooks.ts Normal file
View File

@ -0,0 +1,27 @@
import { Ref, onUnmounted, onMounted } from 'vue';
import * as echarts from 'echarts/core';
export const useChart = (domId: string, chart: Ref) => {
let chartContainer: HTMLCanvasElement;
const selfChart = chart;
const updateContainer = () => {
selfChart.value.resize({
width: chartContainer.clientWidth,
height: chartContainer.clientHeight,
});
};
onMounted(() => {
if (!chartContainer) {
chartContainer = document.getElementById(domId) as HTMLCanvasElement;
}
selfChart.value = echarts.init(chartContainer);
});
window.addEventListener('resize', updateContainer, false);
onUnmounted(() => {
window.removeEventListener('resize', updateContainer);
});
};

View File

@ -2,8 +2,8 @@ import { defineConfig } from 'vite';
import { viteMockServe } from 'vite-plugin-mock';
import { viteThemePlugin } from 'vite-plugin-theme';
import createVuePlugin from '@vitejs/plugin-vue';
import svgLoader from 'vite-svg-loader'
import vueJsx from '@vitejs/plugin-vue-jsx';
import svgLoader from 'vite-svg-loader'
// import HttpProxyAgent from 'http-proxy-agent';
import path from 'path';
@ -44,7 +44,7 @@ export default defineConfig({
viteThemePlugin({
colorVariables: getColorList([getGreyColor(backgroundTheme), getBrandColor(brandTheme)]),
}),
svgLoader()
svgLoader(),
],
server: {