backmanagerweb/src/components/contract.vue

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