|
|
@@ -1,421 +1,431 @@
|
|
|
<template style="padding-left: 15px">
|
|
|
- <div>
|
|
|
- <el-row :gutter="0">
|
|
|
- <el-col :span="5">
|
|
|
- <div class="grid-content ep-bg-purple">
|
|
|
- <span>专家姓名</span>
|
|
|
- <el-input v-model="zjxm" style="width: 200px" placeholder="请输入专家姓名" />
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="5">
|
|
|
- <div class="grid-content ep-bg-purple">
|
|
|
- <span>专家类型</span>
|
|
|
- <el-select v-model="zjlx" placeholder="专家类型" style="width: 170px">
|
|
|
- <el-option value="A"> A</el-option>
|
|
|
- <el-option value="B"> B</el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="5">
|
|
|
- <div class="grid-content ep-bg-purple">
|
|
|
- <span>联系电话</span>
|
|
|
- <el-input v-model="zjlxdh" style="width: 200px" placeholder="请输入联系电话" />
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="5">
|
|
|
- <div class="grid-content ep-bg-purple">
|
|
|
- <span>身份证号</span>
|
|
|
- <el-input v-model="sfzh" style="width: 200px" placeholder="请输入专家身份证号"/>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="1">
|
|
|
- <div class="grid-content ep-bg-purple">
|
|
|
- <el-button type="primary" size="small">
|
|
|
- <el-icon>
|
|
|
- <Search/>
|
|
|
- </el-icon>
|
|
|
- 搜索
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="3">
|
|
|
- <div class="grid-content ep-bg-purple">
|
|
|
- <el-button size="small">
|
|
|
- <el-icon>
|
|
|
- <Refresh/>
|
|
|
- </el-icon>
|
|
|
- 重置
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <el-row :gutter="2">
|
|
|
- <el-col :span="1">
|
|
|
- <div class="grid-content ep-bg-purple">
|
|
|
- <el-button type="primary" plain size="small" @click="dialogFormVisible = true">
|
|
|
- <el-icon>
|
|
|
- <Plus/>
|
|
|
- </el-icon>
|
|
|
- 新增
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="1">
|
|
|
- <div class="grid-content ep-bg-purple">
|
|
|
- <el-button type="success" plain size="small">
|
|
|
- <el-icon>
|
|
|
- <EditPen/>
|
|
|
- </el-icon>
|
|
|
- 修改
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="1">
|
|
|
- <div class="grid-content ep-bg-purple">
|
|
|
- <el-button type="danger" plain size="small">
|
|
|
- <el-icon>
|
|
|
- <Delete/>
|
|
|
- </el-icon>
|
|
|
- 删除
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="1">
|
|
|
- <div class="grid-content ep-bg-purple">
|
|
|
- <el-button type="warning" plain size="small">
|
|
|
- <el-icon>
|
|
|
- <Download/>
|
|
|
- </el-icon>
|
|
|
- 导出
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2" :offset="18">
|
|
|
- <div>
|
|
|
- <el-button :icon="Search" circle size="small"/>
|
|
|
- <el-button :icon="Refresh" circle size="small"/>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <el-table
|
|
|
- :data="zhuanjiaxinxi"
|
|
|
- style="width: 100%; padding-top: 5px"
|
|
|
- fit="true"
|
|
|
- :header-cell-style="{background:'#f8f8f9'}"
|
|
|
- >
|
|
|
- <el-table-column prop="name" label="专家姓名" align="center"/>
|
|
|
- <el-table-column prop="type" label="专家类型" align="center"/>
|
|
|
-
|
|
|
- <el-table-column prop="tel" label="联系电话" align="center"/>
|
|
|
- <el-table-column prop="id" label="身份证号" align="center"/>
|
|
|
-
|
|
|
-
|
|
|
- <el-table-column label="操作" align="center">
|
|
|
- <template v-slot:default="scope">
|
|
|
- <el-button type="text" size="small" @click="fenzu">分组</el-button>
|
|
|
-
|
|
|
- <el-button
|
|
|
- @click.prevent="deleteRow(scope.$index, zhuanjiaxinxi)"
|
|
|
- type="text"
|
|
|
- size="small">
|
|
|
- 删除
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ <div>
|
|
|
+ <el-row :gutter="0">
|
|
|
+ <el-col :span="5">
|
|
|
+ <div class="grid-content ep-bg-purple">
|
|
|
+ <span>专家姓名</span>
|
|
|
+ <el-input v-model="zjxm" style="width: 200px" placeholder="请输入专家姓名"/>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <div class="grid-content ep-bg-purple">
|
|
|
+ <span>专家类型</span>
|
|
|
+ <el-select v-model="zjlx" placeholder="专家类型" style="width: 170px">
|
|
|
+ <el-option value="A"> A</el-option>
|
|
|
+ <el-option value="B"> B</el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <div class="grid-content ep-bg-purple">
|
|
|
+ <span>联系电话</span>
|
|
|
+ <el-input v-model="zjlxdh" style="width: 200px" placeholder="请输入联系电话"/>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <div class="grid-content ep-bg-purple">
|
|
|
+ <span>身份证号</span>
|
|
|
+ <el-input v-model="sfzh" style="width: 200px" placeholder="请输入专家身份证号"/>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1">
|
|
|
+ <div class="grid-content ep-bg-purple">
|
|
|
+ <el-button type="primary" size="small">
|
|
|
+ <el-icon>
|
|
|
+ <Search/>
|
|
|
+ </el-icon>
|
|
|
+ 搜索
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3">
|
|
|
+ <div class="grid-content ep-bg-purple">
|
|
|
+ <el-button size="small">
|
|
|
+ <el-icon>
|
|
|
+ <Refresh/>
|
|
|
+ </el-icon>
|
|
|
+ 重置
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="2">
|
|
|
+ <el-col :span="1">
|
|
|
+ <div class="grid-content ep-bg-purple">
|
|
|
+ <el-button type="primary" plain size="small" @click="dialogFormVisible = true">
|
|
|
+ <el-icon>
|
|
|
+ <Plus/>
|
|
|
+ </el-icon>
|
|
|
+ 新增
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1">
|
|
|
+ <div class="grid-content ep-bg-purple">
|
|
|
+ <el-button type="success" plain size="small">
|
|
|
+ <el-icon>
|
|
|
+ <EditPen/>
|
|
|
+ </el-icon>
|
|
|
+ 修改
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1">
|
|
|
+ <div class="grid-content ep-bg-purple">
|
|
|
+ <el-button type="danger" plain size="small">
|
|
|
+ <el-icon>
|
|
|
+ <Delete/>
|
|
|
+ </el-icon>
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1">
|
|
|
+ <div class="grid-content ep-bg-purple">
|
|
|
+ <el-button type="warning" plain size="small">
|
|
|
+ <el-icon>
|
|
|
+ <Download/>
|
|
|
+ </el-icon>
|
|
|
+ 导出
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2" :offset="18">
|
|
|
+ <div>
|
|
|
+ <el-button :icon="Search" circle size="small"/>
|
|
|
+ <el-button :icon="Refresh" circle size="small"/>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <el-table
|
|
|
+ :data="zhuanjiaxinxi"
|
|
|
+ style="width: 100%; padding-top: 5px"
|
|
|
+ fit="true"
|
|
|
+ :header-cell-style="{background:'#f8f8f9'}"
|
|
|
+ >
|
|
|
+ <el-table-column prop="name" label="专家姓名" align="center"/>
|
|
|
+ <el-table-column prop="type" label="专家类型" align="center"/>
|
|
|
+
|
|
|
+ <el-table-column prop="tel" label="联系电话" align="center"/>
|
|
|
+ <el-table-column prop="id" label="身份证号" align="center"/>
|
|
|
+
|
|
|
+
|
|
|
+ <el-table-column label="操作" align="center">
|
|
|
+ <template v-slot:default="scope">
|
|
|
+ <el-button type="text" size="small" @click="fenzu">分组</el-button>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ @click.prevent="deleteRow(scope.$index, zhuanjiaxinxi)"
|
|
|
+ type="text"
|
|
|
+ size="small">
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
<!-- 弹出框,添加专家信息-->
|
|
|
- <el-dialog v-model="dialogFormVisible" title="添加用户" width="550">
|
|
|
- <el-form :model="form">
|
|
|
- <el-row :gutter="0">
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="专家姓名" required label-width="100">
|
|
|
- <el-input v-model="form.name" type="text" placeholder="请输入专家姓名" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="专家类型" label-width="100" required>
|
|
|
- <el-select v-model="form.type" placeholder="请选择专家类型">
|
|
|
- <el-option value="A"> A</el-option>
|
|
|
- <el-option value="B"> B</el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <el-row :gutter="0">
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="联系电话" required label-width="100">
|
|
|
- <el-input v-model="form.tel" type="text" placeholder="请输入联系电话" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="身份证号" required label-width="100">
|
|
|
- <el-input v-model="form.id" type="text" placeholder="请输入专家身份证号"/>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- </el-form>
|
|
|
- <template #footer>
|
|
|
- <div class="dialog-footer">
|
|
|
- <el-button type="primary" @click="addzhuanjiaxinxi">确定</el-button>
|
|
|
- <el-button @click="dialogFormVisible = false">取消</el-button>
|
|
|
-
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
+ <el-dialog v-model="dialogFormVisible" title="添加用户" width="550">
|
|
|
+ <el-form :model="form">
|
|
|
+ <el-row :gutter="0">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="专家姓名" required label-width="100">
|
|
|
+ <el-input v-model="form.name" type="text" placeholder="请输入专家姓名"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="专家类型" label-width="100" required>
|
|
|
+ <el-select v-model="form.type" placeholder="请选择专家类型">
|
|
|
+ <el-option value="A"> A</el-option>
|
|
|
+ <el-option value="B"> B</el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="0">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="联系电话" required label-width="100">
|
|
|
+ <el-input v-model="form.tel" type="text" placeholder="请输入联系电话"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="身份证号" required label-width="100">
|
|
|
+ <el-input v-model="form.id" type="text" placeholder="请输入专家身份证号"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="addzhuanjiaxinxi">确定</el-button>
|
|
|
+ <el-button @click="dialogFormVisible = false">取消</el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
|
|
|
<!-- 弹出框,分组后的表格-->
|
|
|
- <el-dialog v-model="dialogTableVisible" title="专家评审分组" width="800" height="800">
|
|
|
- <table>
|
|
|
-<!-- 在 HTML 规范中，<tr>（表格行）元素不能直接作为 <table> 的子元素，而是需要放在 <thead>、<tbody> 或 <tfoot> 中。-->
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <th></th> <!-- 空单元格，用于行号列 -->
|
|
|
- <th v-for="(group, colIndex) in groups" :key="colIndex">
|
|
|
- 第{{colIndex + 1}}组 <!-- 列号 -->
|
|
|
- </th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- <tr v-for="row in 6" :key="row">
|
|
|
- <td>第{{row}}轮</td> <!-- 行号 -->
|
|
|
- <td v-for="(group, colIndex) in groups" :key="colIndex">
|
|
|
- <template v-if="group && group.length > ((row - 1) % 4) && group[(row - 1) % 4]">
|
|
|
- <!--{{ group[(row - 1) % 4].name }} ({{ group[(row - 1) % 4].type }})-->
|
|
|
- </template>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
-
|
|
|
-
|
|
|
- </table>
|
|
|
-
|
|
|
-
|
|
|
- </el-dialog>
|
|
|
+ <el-dialog v-model="dialogTableVisible" title="专家评审分组" width="800" height="800">
|
|
|
+ <table>
|
|
|
+ <!-- 在 HTML 规范中，<tr>（表格行）元素不能直接作为 <table> 的子元素，而是需要放在 <thead>、<tbody> 或 <tfoot> 中。-->
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th></th> <!-- 空单元格，用于行号列 -->
|
|
|
+ <th v-for="(group, colIndex) in groups" :key="colIndex">
|
|
|
+ 第{{ colIndex + 1 }}组 <!-- 列号 -->
|
|
|
+ </th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="row in 6" :key="row">
|
|
|
+ <td>第{{ row }}轮</td> <!-- 行号 -->
|
|
|
+ <td v-for="(group, colIndex) in groups" :key="colIndex">
|
|
|
+ <template v-if="group && group.length > ((row - 1) % 4) && group[(row - 1) % 4]">
|
|
|
+ <!--{{ group[(row - 1) % 4].name }} ({{ group[(row - 1) % 4].type }})-->
|
|
|
+ </template>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+
|
|
|
+
|
|
|
+ </table>
|
|
|
+
|
|
|
+
|
|
|
+ </el-dialog>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {reactive, ref} from 'vue'
|
|
|
+// import {reactive, ref} from 'vue'
|
|
|
//引图标
|
|
|
import {Refresh, Search} from "@element-plus/icons-vue";
|
|
|
|
|
|
export default {
|
|
|
- name: "zhuanJiaGuanLi",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- zjxm: "",
|
|
|
- zjlx: "",
|
|
|
- zjlxdh: "",
|
|
|
- sfzh: "",
|
|
|
- zhuanjiaxinxi: [
|
|
|
- {
|
|
|
- name:'张1',
|
|
|
- type:'A'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'张2',
|
|
|
- type:'A'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'张3',
|
|
|
- type:'A'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'张4',
|
|
|
- type:'B'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'李1',
|
|
|
- type:'A'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'李2',
|
|
|
- type:'A'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'李3',
|
|
|
- type:'A'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'李4',
|
|
|
- type:'B'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'王1',
|
|
|
- type:'A'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'王2',
|
|
|
- type:'A'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'王3',
|
|
|
- type:'A'
|
|
|
+ name: "zhuanJiaGuanLi",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ zjxm: "",
|
|
|
+ zjlx: "",
|
|
|
+ zjlxdh: "",
|
|
|
+ sfzh: "",
|
|
|
+ zhuanjiaxinxi: [
|
|
|
+ {
|
|
|
+ name: '张1',
|
|
|
+ type: 'A'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '张2',
|
|
|
+ type: 'A'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '张3',
|
|
|
+ type: 'A'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '张4',
|
|
|
+ type: 'B'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '李1',
|
|
|
+ type: 'A'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '李2',
|
|
|
+ type: 'A'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '李3',
|
|
|
+ type: 'A'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '李4',
|
|
|
+ type: 'B'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '王1',
|
|
|
+ type: 'A'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '王2',
|
|
|
+ type: 'A'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '王3',
|
|
|
+ type: 'A'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '王4',
|
|
|
+ type: 'B'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '赵1',
|
|
|
+ type: 'A'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '赵2',
|
|
|
+ type: 'A'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '赵3',
|
|
|
+ type: 'A'
|
|
|
+ },
|
|
|
+
|
|
|
+ ],
|
|
|
+ groups: [],
|
|
|
+
|
|
|
+ dialogTableVisible: "false",
|
|
|
+ dialogFormVisible: "false",
|
|
|
+ formLabelWidth: "140px",
|
|
|
+ form: {
|
|
|
+ name: '',
|
|
|
+ type: '',
|
|
|
+ tel: '',
|
|
|
+ id: '',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // setup() {
|
|
|
+ // const dialogTableVisible = ref(false)//弹出表格
|
|
|
+ // const dialogFormVisible = ref(false)//弹出表单
|
|
|
+ // const formLabelWidth = '140px'
|
|
|
+ //
|
|
|
+ // const form = reactive({
|
|
|
+ // name: '',
|
|
|
+ // type: '',
|
|
|
+ // tel: '',
|
|
|
+ // id: '',
|
|
|
+ //
|
|
|
+ // })
|
|
|
+ //
|
|
|
+ // return {
|
|
|
+ // dialogTableVisible,
|
|
|
+ // dialogFormVisible,
|
|
|
+ // formLabelWidth,
|
|
|
+ // form,
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ computed: {
|
|
|
+ Refresh() {
|
|
|
+ return Refresh
|
|
|
},
|
|
|
- {
|
|
|
- name:'王4',
|
|
|
- type:'B'
|
|
|
+ Search() {
|
|
|
+ return Search
|
|
|
},
|
|
|
- {
|
|
|
- name:'赵1',
|
|
|
- type:'A'
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ addzhuanjiaxinxi() {
|
|
|
+ // 验证电话号码长度
|
|
|
+ // if (!this.form.tel || this.form.tel.length !== 11) {
|
|
|
+ // this.$message.error('电话号码必须是11位数字！');
|
|
|
+ // return; // 阻止进一步执行
|
|
|
+ // }
|
|
|
+ let ZJ = {
|
|
|
+ name: this.form.name,
|
|
|
+ type: this.form.type,
|
|
|
+ tel: this.form.tel,
|
|
|
+ id: this.form.id,
|
|
|
+ }
|
|
|
+ this.zhuanjiaxinxi.push(ZJ)
|
|
|
+
|
|
|
+ // 清空表单
|
|
|
+ this.clear()
|
|
|
+
|
|
|
+ //关闭弹出框
|
|
|
+ this.dialogFormVisible = false
|
|
|
},
|
|
|
- {
|
|
|
- name:'赵2',
|
|
|
- type:'A'
|
|
|
+ clear() {
|
|
|
+ this.form.name = ""
|
|
|
+ this.form.type = ""
|
|
|
+ this.form.tel = ""
|
|
|
+ this.form.id = ""
|
|
|
},
|
|
|
- {
|
|
|
- name:'赵3',
|
|
|
- type:'A'
|
|
|
+ deleteRow(index, rows) {
|
|
|
+ // rows.splice(index, 1);
|
|
|
+ if (index < 0 || index >= rows.length) {
|
|
|
+ return; // 确保索引有效
|
|
|
+ }
|
|
|
+ rows.splice(index, 1);
|
|
|
+ // this.gongyingshangxinxi.pop(this.gongyingshangxinxi[index])
|
|
|
},
|
|
|
-
|
|
|
- ],
|
|
|
- groups: [],
|
|
|
- }
|
|
|
- },
|
|
|
- setup() {
|
|
|
- const dialogTableVisible = ref(false)//弹出表格
|
|
|
- const dialogFormVisible = ref(false)//弹出表单
|
|
|
- const formLabelWidth = '140px'
|
|
|
-
|
|
|
- const form = reactive({
|
|
|
- name: '',
|
|
|
- type: '',
|
|
|
- tel: '',
|
|
|
- id: '',
|
|
|
-
|
|
|
- })
|
|
|
-
|
|
|
- return {
|
|
|
- dialogTableVisible,
|
|
|
- dialogFormVisible,
|
|
|
- formLabelWidth,
|
|
|
- form,
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- Refresh() {
|
|
|
- return Refresh
|
|
|
- },
|
|
|
- Search() {
|
|
|
- return Search
|
|
|
- },
|
|
|
- },
|
|
|
- methods: {
|
|
|
-
|
|
|
- addzhuanjiaxinxi() {
|
|
|
- // 验证电话号码长度
|
|
|
- // if (!this.form.tel || this.form.tel.length !== 11) {
|
|
|
- // this.$message.error('电话号码必须是11位数字！');
|
|
|
- // return; // 阻止进一步执行
|
|
|
- // }
|
|
|
- let ZJ = {
|
|
|
- name: this.form.name,
|
|
|
- type:this.form.type,
|
|
|
- tel: this.form.tel,
|
|
|
- id:this.form.id,
|
|
|
- }
|
|
|
- this.zhuanjiaxinxi.push(ZJ)
|
|
|
-
|
|
|
- // 清空表单
|
|
|
- this.clear()
|
|
|
-
|
|
|
- //关闭弹出框
|
|
|
- this.dialogFormVisible = false
|
|
|
- },
|
|
|
- clear() {
|
|
|
- this.form.name = ""
|
|
|
- this.form.type = ""
|
|
|
- this.form.tel = ""
|
|
|
- this.form.id = ""
|
|
|
- },
|
|
|
- deleteRow(index, rows) {
|
|
|
- // rows.splice(index, 1);
|
|
|
- if (index < 0 || index >= rows.length){
|
|
|
- return; // 确保索引有效
|
|
|
- }
|
|
|
- rows.splice(index, 1);
|
|
|
- // this.gongyingshangxinxi.pop(this.gongyingshangxinxi[index])
|
|
|
- },
|
|
|
- // getExpertForRound(group, round) {
|
|
|
- // const index = (round - 1) % 4;
|
|
|
- // const expert = group[index];
|
|
|
- // return expert ? `${expert.name} (${expert.type})` : '';
|
|
|
- // },
|
|
|
- fenzu(){
|
|
|
- try{
|
|
|
- if(this.zhuanjiaxinxi.length % 4 != 0){
|
|
|
- this.$message.error('专家数量应该是4的倍数！');
|
|
|
- return; // 阻止进一步执行
|
|
|
- }
|
|
|
+ // getExpertForRound(group, round) {
|
|
|
+ // const index = (round - 1) % 4;
|
|
|
+ // const expert = group[index];
|
|
|
+ // return expert ? `${expert.name} (${expert.type})` : '';
|
|
|
+ // },
|
|
|
+ fenzu() {
|
|
|
+ try {
|
|
|
+ if (this.zhuanjiaxinxi.length % 4 != 0) {
|
|
|
+ this.$message.error('专家数量应该是4的倍数！');
|
|
|
+ return; // 阻止进一步执行
|
|
|
+ }
|
|
|
|
|
|
|
|
|
-
|
|
|
- //分组
|
|
|
- this.groups = [];
|
|
|
- for (let i = 0; i < this.zhuanjiaxinxi.length; i += 4) {
|
|
|
- this.groups.push(this.zhuanjiaxinxi.slice(i, i + 4));
|
|
|
- }
|
|
|
+ //分组
|
|
|
+ this.groups = [];
|
|
|
+ for (let i = 0; i < this.zhuanjiaxinxi.length; i += 4) {
|
|
|
+ this.groups.push(this.zhuanjiaxinxi.slice(i, i + 4));
|
|
|
+ }
|
|
|
|
|
|
|
|
|
- }catch (error){
|
|
|
- console.error('发生错误:', error); // 捕获并输出错误
|
|
|
- }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('发生错误:', error); // 捕获并输出错误
|
|
|
+ }
|
|
|
|
|
|
|
|
|
- this.dialogTableVisible = true
|
|
|
- },
|
|
|
+ this.dialogTableVisible = true
|
|
|
+ },
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
span {
|
|
|
- font-family: 微软雅黑;
|
|
|
- padding: 5px;
|
|
|
+ font-family: 微软雅黑;
|
|
|
+ padding: 5px;
|
|
|
}
|
|
|
|
|
|
/*专家表格样式*/
|
|
|
table {
|
|
|
- width: 100%;
|
|
|
- border-collapse: collapse;
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
}
|
|
|
+
|
|
|
td {
|
|
|
- border: 1px solid #ddd;
|
|
|
- padding: 8px;
|
|
|
- text-align: center;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ padding: 8px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<!--el-row样式-->
|
|
|
<style>
|
|
|
.el-row {
|
|
|
- margin-bottom: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.el-row:last-child {
|
|
|
- margin-bottom: 0px;
|
|
|
+ margin-bottom: 0px;
|
|
|
}
|
|
|
|
|
|
.el-col {
|
|
|
- border-radius: 4px;
|
|
|
+ border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
.grid-content {
|
|
|
- border-radius: 4px;
|
|
|
- min-height: 18px;
|
|
|
+ border-radius: 4px;
|
|
|
+ min-height: 18px;
|
|
|
}
|
|
|
|
|
|
</style>
|
