小小美化
This commit is contained in:
ChoChoX
196
src/components/contract.vue
Normal file
196
src/components/contract.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<script setup>
|
||||
import { ref,computed } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const searchKeyword = ref('')
|
||||
const selectField = ref('1')
|
||||
const dateRange = ref([])
|
||||
const loading=ref(false)
|
||||
|
||||
//过滤搜索结果
|
||||
const filteredContracts=computed(()=>{
|
||||
|
||||
})
|
||||
|
||||
//处理搜索
|
||||
const handleSearch=()=>{
|
||||
|
||||
}
|
||||
|
||||
//日期变更处理
|
||||
const handleDateChange=()=>{
|
||||
handleSearch();
|
||||
}
|
||||
|
||||
// 重置搜索
|
||||
const resetSearch = () => {
|
||||
searchKeyword.value = ''
|
||||
searchField.value = '1'
|
||||
dateRange.value = []
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
// 日期快捷选项
|
||||
const dateShortcuts = [
|
||||
{
|
||||
text: '最近一周',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 7 * 24 * 3600 * 1000)
|
||||
return [start, end]
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近一个月',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 30 * 24 * 3600 * 1000)
|
||||
return [start, end]
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近三个月',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 90 * 24 * 3600 * 1000)
|
||||
return [start, end]
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (date) => {
|
||||
if (!date) return ''
|
||||
return date
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="contract-container">
|
||||
<!-- 搜索栏区域 -->
|
||||
<div class="contract-search">
|
||||
<div class="search-row">
|
||||
<el-input v-model="searchKeyword" style="max-width: 600px" placeholder="Please input"
|
||||
class="contract-search-with-select">
|
||||
<template #prepend>
|
||||
<el-select v-model="searchField" placeholder="Select" style="width: 115px">
|
||||
<el-option label="编号" value="1" />
|
||||
<el-option label="名称" value="2" />
|
||||
<el-option label="类型" value="3" />
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button :icon="Search" />
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="search-row date-range">
|
||||
<span class="date-label">日期范围</span>
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:shortcuts="dateShortcuts"
|
||||
@change="handleDateChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-button type="primary" @click="addCustomer" style="margin-left: 20px">
|
||||
新增合同
|
||||
</el-button>
|
||||
<el-button type="default" @click="resetSearch" style="margin-left:20px">
|
||||
重置
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 合同列表 -->
|
||||
<div class="contract-list">
|
||||
<div v-if="loading" class="loading-container">
|
||||
<el-skeleton :rows="5" animated />
|
||||
</div>
|
||||
|
||||
<div v-else-if="filteredContracts.length===0" class="empty-container">
|
||||
<el-empty description="暂无合同数据" />
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div class="list-header">
|
||||
<span class="total-count">共找到{{ filteredContracts.length }}条合同</span>
|
||||
</div>
|
||||
|
||||
<div class="contract-cards">
|
||||
<el-card
|
||||
v-for="contract in filteredContracts"
|
||||
:key="contract.id"
|
||||
class="contract-card"
|
||||
shadow="hover"
|
||||
@click="viewDetail"
|
||||
>
|
||||
<div class="contract-info">
|
||||
<div class="contract-no">
|
||||
<el-tag size="small" type="primary">编号</el-tag>
|
||||
<span class="no-value">{{ contract.contractNo }}</span>
|
||||
</div>
|
||||
<div class="contract-name">
|
||||
<el-icon><Document /></el-icon>
|
||||
<span class="name-value">{{ contract.contractName }}</span>
|
||||
</div>
|
||||
<div class="contract-date">
|
||||
<el-icon><Calendar /></el-icon>
|
||||
<span class="date-value">{{ formatDate(contract.signDate) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增客户表单 -->
|
||||
<div v-if="showAddForm" class="customer-info-label">
|
||||
<el-form :model="form" label-width="auto" style="max-width: 600px" label-position="top">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.name" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电话">
|
||||
<el-input v-model="form.phone" :controls="false" :min="0" :max="99999999999" :precision="0"
|
||||
placeholder="请输入11位手机号" style="width: 100%" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="地区">
|
||||
<el-cascader v-model="form.region" :options="regionData" :props="{ expandTrigger: 'hover' }"
|
||||
placeholder="请选择省/市/区" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="详细地址">
|
||||
<el-input v-model="form.address" placeholder=" 请输入详细地址" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电子邮箱">
|
||||
<el-input v-model="form.email" placeholder=" 请输入邮箱地址" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="代理商类型">
|
||||
<el-radio-group v-model="form.customer_type">
|
||||
<el-radio value="VIP">地区总代理</el-radio>
|
||||
<el-radio value="Normal">普通代理</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="saveCustomer">保存</el-button>
|
||||
<el-button type="danger" @click="cancelAdd">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user