<template>
  <div class="PageContent">
    <!-- <div class="WebToolbar">
      <div class="FormComponent">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="状态">
            <el-select v-model="formInline.Status" placeholder="请选择状态" clearable>
              <el-option label="未发布" value="未发布" />
              <el-option label="已发布" value="已发布" />
              <el-option label="已结束" value="已结束" />
            </el-select>
          </el-form-item>
          <el-form-item label="软件名称">
            <el-input
              v-model="formInline.ExamName"
              placeholder="请输入考试名称"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="ButtonAssembly">
        <el-button style="color: #fff" @click="queryData()">
          <img src="../../assets/menu/search.png" alt="" />
          <span>查询</span>
        </el-button>
        <el-button style="color: #1d2129" @click="resetFormInline">
          <img src="../../assets/menu/reset.png" alt="" />
          <span>重置</span>
        </el-button>
      </div>
    </div> -->
    <div class="Tabulation">
      <div class="actionBar">
        <h1>考试列表</h1>
        <!-- <div class="Worktop">
          <el-button @click="goToAboutPage">编辑器</el-button>
          <el-button @click="handleReleaseExam">发布</el-button>
          <el-button @click="handleRevokeReleaseExam">撤销发布</el-button>
          <el-button @click="handleFinishedExam">考试结束</el-button>
            <el-button @click="handleExamination">考试名单</el-button>

          <el-button class="BlueBack" @click="handleCreate">
            <img src="../../assets/menu/Increased.png" alt="" />
            <span>新增</span>
          </el-button>
            <el-button class="BlueBack" @click="dialogToLead = true">
                <img src="../../assets/menu/toLead.png" alt="" />
                <span>导入</span>
            </el-button>
          <el-button class="Delete">
            <img src="../../assets/menu/delete.png" alt="" />
            <span>删除</span>
          </el-button>
        </div> -->
      </div>
      <div class="ExaminationForm">
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" />
          <el-table-column label="序号" type="index" :index="indexMethod" width="60px"/>
          <el-table-column property="SoftwareName" label="软件名称" />
          <el-table-column property="VersionNumber" label="版本号" />
          <el-table-column property="UpdateTime" label="更新时间" />
          <el-table-column property="" label="操作">
            <template #default="{row}">
            <span class="user-name" @click="handleEdit(row)" >编辑</span>
            <!-- <el-divider direction="vertical" v-if="row.Status!='已发布'"></el-divider> -->
            <!-- <span class="register" @click="handleCopy(row)">复制</span>
            <el-divider direction="vertical"></el-divider> -->
              <!-- <span class="register" @click="handleDelete(row)">删除</span> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="InlineForm.PageIndex"
          :page-size="InlineForm.PageSize"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
<!--新增弹框-->
  <el-dialog
    v-model="dialogFormVisible"
    :title="ExamId ? '编辑考试' : '新增考试'"
    width="1050"
    center
    @close="closeDialog"
  >
    <el-form ref="formRef" :model="form" :rules="state.rules" :inline="true" :label-width="formLabelWidth">
      <el-form-item label="软件名称：" prop="SoftwareName">
        <el-input v-model="form.SoftwareName" />
      </el-form-item>
      <el-form-item
        label="版本号："
        class="demo-form-scene"
      >
      <el-input v-model="form.VersionNumber" />
      </el-form-item>
	  <el-form-item label="启动器资源包" style="margin-top: 20%;margin-left: 10px;">
        <el-upload
          :action="action"
		  :before-remove="handleRemoveFile"
          :file-list="fileListFile"
           multiple
          accept=".pdf,.doc,.docx,.excel,.ppt,.pptx,.word,.xlsx,.RTF, .xls"
          :on-error="handleUploadError"
          :on-exceed="handleExceed"
          :on-success="handleUploadSuccess"
          :on-change="handChangeFile"
		  :on-preview="handleFormPreview"
          :http-request="httpRequest"
          :show-file-list="true"
          :auto-upload="false"
          class="upload-file-uploader horizontal-list"
          ref="upload"
        >
          <!-- 上传按钮 -->
          <template v-slot:trigger>
            <el-button size="mini" type="primary">上传文件</el-button>
          </template>
        </el-upload>
        <!-- 文件列表 -->
        <transition-group
          class="upload-file-list el-upload-list el-upload-list--text"
          name="el-fade-in-linear"
          tag="ul"
        >
          <li
            :key="file.uid"
            class="el-upload-list__item ele-upload-list__item-content"
            v-for="(file, index) in list"
          >
            <el-link :href="file.url" :underline="false" target="_blank">
              <span class="el-icon-document">
                {{ getFileName(file.name) }}
              </span>
            </el-link>
            <div class="ele-upload-list__item-content-action">
              <el-link
                :underline="false"
                @click="handleDelete(index)"
                type="danger"
                >删除</el-link
              >
            </div>
          </li>
        </transition-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
		  <el-button  @click="closeDialog">
		    取消
		  </el-button>
        <el-button @click="submit" type="primary">保存</el-button>
      </div>
    </template>
  </el-dialog>
<!--  编辑弹框-->
  <!-- <el-dialog
    v-model="EditFormVisible"
    title="新增考试"
    width="1050"
    center
    :data="EditExamtableData"
    v-if="false"
  >
    <el-form :model="form"  :inline="true" :label-width="formLabelWidth">
      <el-form-item label="考试名称："  >
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item
        label="场景："
        class="demo-form-scene"
      >
        <el-select v-model="form.region" placeholder="">
        </el-select>
      </el-form-item>
      <el-form-item label="台区："  >
        <el-select v-model="form.PlatformAreaName" placeholder="">
        </el-select>
      </el-form-item>
      <el-form-item label="线路："  >
        <el-select v-model="form.region" placeholder="">
        </el-select>
      </el-form-item>
      <el-form-item
        label="处理日期："
        class="el-form-end"
      >
        <el-date-picker v-model="value2" type="date" placeholder="请选择时间" />
      </el-form-item>
      <el-form-item label="巡线日期："  >
        <el-date-picker v-model="value1" type="date" placeholder="请选择时间" />
      </el-form-item>
      <el-form-item
        label="工单内容："
        class="backInformation"
      >
        <el-input
          v-model="form.WorkOrderContent"
          style="width: 240px"
          :rows="12"
          type="textarea"
          placeholder="Please input"
        />
      </el-form-item>
      <el-form-item label="背景资料："  label-width="192px" >
        <el-input
          v-model="textarea"
          style="width: 240px"
          :rows="12"
          type="textarea"
          placeholder=""
        />
      </el-form-item>
      <el-form-item label="考试时长："  >
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="411电缆型号及长度：">
        <el-input v-model="form.name" autocomplete="off" />
        <span class="example">示例：YJV22-4*95/12米</span>
      </el-form-item>
      <el-form-item label="411电缆型号及长度：">
        <el-input v-model="form.name" autocomplete="off" />
        <span class="example">示例：YJV22-4*95/12米</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="submit">确认</el-button>
        <el-button type="primary" @click="EditFormVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog> -->
<!--考试名单  -->
    <!-- <el-dialog v-model="dialogTabular" title="考试学员考试题目" width="1800">
        <div class="functionalUnit">
            <el-form :model="stateA.queryForm" :inline="true" width="800">
                <el-form-item label="姓名:" width="200">
                    <el-input v-model="stateA.queryForm.Name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="账号:" width="200">
                    <el-input v-model="stateA.queryForm.Account" autocomplete="off" />
                </el-form-item>
            </el-form>
            <div class="functionalUnit">
                <el-button @click="getExamination">
                    <img src="../../assets/menu/search.png" alt="" />
                    <span>查询</span>
                </el-button>
                <el-button class="BlueBack" @click="dialogExamination = true" >
                    <img src="../../assets/menu/Increased.png" alt="" />
                    <span>新增</span>
                </el-button>
            </div>
        </div>

            <P class="TabularTitle">
                <span style="margin-left: 20px">考试名单列表</span>
            </P>
            <div class="TabularList">
                <el-table :data="stateA.examRosterList" style="width: 100%">

                    <el-table-column prop="OwnCity" abel="所在市" width="280"/>
                    <el-table-column prop="unit_name" label="单位" width="200"/>
                    <el-table-column prop="dep_name" label="部门" />
                    <el-table-column prop="login_name" label="账号" />
                    <el-table-column prop="real_name" label="姓名" />
                    <el-table-column prop="sex" label="性别"/>
                    <el-table-column prop="" label="操作" >
                      <template #default="{row}">
                        <span class="register" @click="handleCancel(row)">删除</span>
                      </template>
                    </el-table-column>
                    <template #empty>
                      <el-empty class="vab-data-empty" description="暂无数据" />
                    </template>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination
                  v-model:current-page="InlineForm.PageIndex"
                  :page-size="InlineForm.PageSize"
                  :small="small"
                  :disabled="disabled"
                  :background="background"
                  layout="total, prev, pager, next"
                  :total="stateA.total"
                  @current-change="handleCurrentChangeA"
                />
            </div>

        <el-dialog v-model="dialogExamination" title="备选考试人员" width="1600">
            <div class="functionalUnit">
                <el-form :model="stateB.queryForm"  :inline="true" width="800
                    <el-form-item label="姓名:" width="200">
                        <el-input v-model="stateB.queryForm.Name" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="账号:" width="200">
                        <el-input v-model="stateB.queryForm.Account" autocomplete="off" />
                    </el-form-item>
                </el-form>
                <div class="functionalUnit">
                    <el-button  >
                        <img src="../../assets/menu/search.png" alt="" />
                        <span>查询</span>
                    </el-button>
                </div>
            </div>
            <div class="ExaminationList">
                <P class="TabularTitle">
                    <span>考试[下发各地市测试01]</span>
                    <span style="margin-left: 20px">备选考试人员列表</span>
                </P>
                <div class="TabularList">
                    <el-table
                      :data="stateB.examRosterList"
                      style="width: 100%"
                      @selection-change="handleSelChange"
                    >
                      <el-table-column type="selection" />
                      <el-table-column prop="LoginName" label="账号" />
                      <el-table-column prop="RealName" label="姓名" />
                      <el-table-column prop="Sex" label="性别"/>
                      <template #empty>
                        <el-empty class="vab-data-empty" description="暂无数据" />
                      </template>
                    </el-table>
                    <div class="addSlip">
                        <el-button @click="addExamRoster">
                            <span>添加人员</span>
                        </el-button>
                        <el-pagination
                            v-model:current-page="InlineForm.PageIndex"
                            :page-size="InlineForm.PageSize"
                            :small="small"
                            :disabled="disabled"
                            :background="background"
                            layout="total, prev, pager, next"
                            :total="stateB.total"
                            @current-change="handleCurrentChangeB"
                        />
                    </div>
                </div>
            </div>
        </el-dialog>
    </el-dialog> -->
<!-- 导入 -->
    <!-- <el-dialog v-model="dialogToLead" title="导入" width="400">
        <el-upload
          ref="uploadRef"
          action="#"
          :http-request="toUpload"
          :auto-upload="false"
          :on-change="handleChange"
          :limit="1"
          :on-exceed="handleExceed"
        >
            <template #trigger>
                <el-button type="primary">选择</el-button>
            </template>

            <el-button class="ml-3" type="success" @click="submitUpload">
                上传
            </el-button>
        </el-upload>
    </el-dialog> -->
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElTable, ElMessageBox, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import {
  GetStarterList,
  AddExam,
  EditExam,
  GetExamDetails,
  EditExamList,
  DeleteExam,
  GetScene,
  GetPlatformArea,
  GetLine,
  ApiReleaseExam,
  ApiRevokeReleaseExam,
  ApiFinishedExam,
  ApiCopyExam,
  ApiDownloadExamm,
  ApiGetExamRosterList,
  DeleteExamRoster,
  ApiGetAddExamRosterListt,
  ApiAddExamRoster,
  apiUpload

} from '@/api/index.js'

const formInline = reactive({
  Status: '',
  ExamName: '',
  Type: '考试',
  PageIndex: 1,
  PageSize: 10
})
const resetFormInline = () => {
  formInline.Status = ''
  formInline.ExamName = ''
  getTable()
  //   for (const key in formInline) {
  //     if ( key !== 'PageIndex' || key !== 'PageIndex' ) formInline[key] = ''
  //   }
}
// 多选框
const indexMethod = (index) => {
  return index + 1
}

// 新增数据，弹框显示
const formRef = ref(null)
const dialogFormVisible = ref(false)
function handleCreate () {
  dialogFormVisible.value = true
}
const formLabelWidth = '150px'
const value1 = ref('')
const value2 = ref('')
const state = reactive({
  rules: {},
  scenemList: [],
  platformAreaList: [],
  lineList: []
})
const form = reactive({
  ExamName: '',
  LinePatrolDate: '',
  HandleDate: '',
  SceneId: '',
  PlatformAreaId: '',
  LineId: '',
  ExaminationDuration: '',
  IncomingLineModelLength: '',
  OutgoingLineModelLength: '',
  WorkOrderContent: '',
  BackgroundInformation: '',
  StartExamTime: '',
  EndExamTime: '',
  Type: '考试'
})

// 查询列表
onMounted(() => {
  getTable()
  // addTable()
  GetScene().then(res => {
    state.scenemList = res.data
    console.log(res.data, 'res.data--')
  })
  GetPlatformArea({
    SceneId: 'eab5920509b011ed844e7cd30a92bb1c'
  }).then(res => state.platformAreaList = res.data)
  GetLine({
    PlatformAreaId: '28f0723409b111ed844e7cd30a92bb1c'
  }).then(res => state.lineList = res.data)
})

// 考试列表
const total = ref(0)
const tableData = ref([])
const queryData = () => {
  formInline.PageIndex = 1
  getTable()
}
const getTable = async () => {
  try {
    const { code, data } = await GetStarterList({
      ...formInline
    })

    if (code === 0) {
    //   total.value = data.total
      console.log('data', data)
      tableData.value = data
    } else {
      total.value = 0
      tableData.value = []
    }
  } catch (error) {}
}

const multipleTableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  if (val.length > 1) {
    multipleTableRef.value.clearSelection()
    multipleTableRef.value.toggleRowSelection(val.pop())
  } else {
    // this.currentRow = val.pop();
    multipleSelection.value = val
  }
}
const textarea = ref('')
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

// 分页
const InlineForm = reactive({
  PageIndex: 1,
  PageSize: 10
})
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  formInline.PageSize = val
  getTable()
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  formInline.PageIndex = val
  getTable()
}
const ExamId = ref('')
const handleEdit = async (row) => {
  const res = await GetExamDetails({ ExamId: row.ExamId })
  console.log(res.data, 'res--')
  for (const key in form) {
    form[key] = res.data[key]
  }
  ExamId.value = res.data.ExamId
  dialogFormVisible.value = true
}
const handleCopy = (row) => {
  ApiCopyExam({ ExamId: row.ExamId }).then(res => {
    console.log(res, 'res--')
    if (res.code === 0) {
      ElMessage({
        message: '操作成功',
        type: 'success'
      })
      queryData()
    } else {
      ElMessage.error(res?.data || '操作失敗')
    }
  })
}
// 删除
const handleDelete = (row) => {
  console.log(row.ExamId, 'row--')
  ElMessageBox.confirm('确定要删除吗?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    DeleteExam({ ExamId: row.ExamId }).then(res => {
      console.log(res, 'res--')
      if (res.code === 0) {
        ElMessage({
          message: '操作成功',
          type: 'success'
        })
        queryData()
      } else {
        ElMessage.error(res?.data || '操作失敗')
      }
    })
  })
}
// 复制

// 保存
const submit = () => {
  formRef.value.validate(async (valid) => {
    console.log(form, 'from--')
    if (valid) {
      const obj = state.platformAreaList.find(v => v.PlatformAreaId == form.PlatformAreaId)
      console.log(obj, 'obj--')

      if (ExamId.value) {
        EditExam({
          ...form,
          PlatformArea: obj?.PlatformAreaName || '',
          ExamId: ExamId.value
        }).then(res => {
          console.log(res, 'res--')
          if (res.code == 0) {
            ElMessage({
              message: '操作成功.',
              type: 'success'
            })
            closeDialog()
            queryData()
          } else {
            ElMessage.error(res?.data || '操作失敗')
          }
        })
      } else {
		   form.Type = '考试'
        AddExam({
          ...form,
          PlatformArea: obj?.PlatformAreaName || ''
        }).then(res => {
          console.log(res, 'res--')
          if (res.code == 0) {
            ElMessage({
              message: '操作成功.',
              type: 'success'
            })
            closeDialog()
            queryData()
          } else {
            ElMessage.error(res?.data || '操作失敗')
          }
        })
      }
    }
  })
}
// 取消
const closeDialog = () => {
  for (const key in form) {
    form[key] = ''
  }
  ExamId.value = ''
  dialogFormVisible.value = false
}

// 跳转编辑器
const router = useRouter()
const goToAboutPage = () => {
	 if (multipleSelection.value?.length === 0) return ElMessage.error('请先选择')
  router.push(`/EditorMacros?ExamId=${multipleSelection.value[0].ExamId}`) // 跳转到指定路由
}
// 编辑弹框
const EditFormVisible = ref(false)
const EditExamtableData = ref()
const handleUpdate = async () => {
  EditFormVisible.value = true
  const data = await EditExamList()
  console.log(data.data, 'data')
}

// 发布
const handleReleaseExam = () => {
  if (multipleSelection.value?.length === 0) return ElMessage.error('请先选择')
  ElMessageBox.confirm('确定要发布吗?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ApiReleaseExam({ ExamId: multipleSelection.value[0].ExamId }).then(res => {
      console.log(res, 'res--')
      if (res.code == 0) {
        ElMessage({
          message: '操作成功',
          type: 'success'
        })
        queryData()
      } else {
        ElMessage.error(res?.data || '操作失敗')
      }
    })
  })
}

// 撤销发布
const handleRevokeReleaseExam = () => {
  if (multipleSelection.value?.length === 0) return ElMessage.error('请先选择')
  ElMessageBox.confirm('确定要撤销发布吗?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ApiRevokeReleaseExam({ ExamId: multipleSelection.value[0].ExamId }).then(res => {
      console.log(res, 'res--')
      if (res.code === 0) {
        ElMessage({
          message: '操作成功',
          type: 'success'
        })
        queryData()
      } else {
        ElMessage.error(res?.data || '操作失敗')
      }
    })
  })
}

// 撤销发布
const handleFinishedExam = () => {
  if (multipleSelection.value?.length === 0) return ElMessage.error('请先选择')
  ElMessageBox.confirm('确定要考试结束吗?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ApiFinishedExam({ ExamId: multipleSelection.value[0].ExamId }).then(res => {
      console.log(res, 'res--')
      if (res.code === 0) {
        ElMessage({
          message: '操作成功',
          type: 'success'
        })
        queryData()
      } else {
        ElMessage.error(res?.data || '操作失敗')
      }
    })
  })
}

// 考试名单
const dialogTabular = ref(false)
const stateA = reactive({
  total: 0,
  examRosterList: [],
  queryForm: {
    Name: '',
    Account: '',
    PageIndex: 1,
    PageSize: 10
  }
})
const handleExamination = async () => {
  if (multipleSelection.value?.length === 0) return ElMessage.error('请先选择')
  getExamination()
  getAddExamRosterListt()
  dialogTabular.value = true
}

const getExamination = async () => {
  console.log(stateA.queryForm, ' stateA.queryForm--')
  const res = await ApiGetExamRosterList({
    ExamId: multipleSelection.value[0].ExamId,
    // ExamId: '048dd77b0a734856a86153e2feaa1d1d',
    ...stateA.queryForm
  })
  dialogTabular.value = true
  stateA.examRosterList = res.data?.list || []
  stateA.total = res.data?.total
  console.log(res, 'res--ApiGetExamRosterList')
}
// 考试名单删除
const handleCancel = (row) => {
  console.log(row.ExamUsersId, 'row--')
  ElMessageBox.confirm('确定要删除吗?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    DeleteExamRoster({ ExamUsersId: row.ExamUsersId }).then(res => {
      console.log(res, 'res--')
      if (res.code === 0) {
        ElMessage({
          message: '操作成功',
          type: 'success'
        })
        getExamination()
        getAddExamRosterListt()
      } else {
        ElMessage.error(res?.data || '操作失敗')
      }
    })
  })
}

// 考试新增名单
const dialogExamination = ref(false)

const rosterSelection = ref([])
const handleSelChange = (val) => {
  console.log(val, 'val--')
  rosterSelection.value = val
}

const stateB = reactive({
  total: 0,
  examRosterList: [],
  queryForm: {
    Name: '',
    Account: '',
    PageIndex: 1,
    PageSize: 10
  }
})
const handleCurrentChangeB = (val) => {
  stateB.queryForm.PageIndex = val
  getAddExamRosterListt()
}
const getAddExamRosterListt = async () => {
  console.log(stateA.queryForm, ' stateA.queryForm--')
  if (multipleSelection.value?.length === 0) return ElMessage.error('请先选择')
  const res = await ApiGetAddExamRosterListt({
    ExamId: multipleSelection.value[0].ExamId,
    // ExamId: '048dd77b0a734856a86153e2feaa1d1d',
    ...stateB.queryForm
  })
  dialogTabular.value = true
  stateB.examRosterList = res.data?.list || []
  stateB.total = res.data?.total
  console.log(res, 'res--ApiGetExamRosterList')
}

const addExamRoster = () => {
  if (multipleSelection.value?.length === 0) return ElMessage.error('请先选择')
  ApiAddExamRoster({
    ExamId: multipleSelection.value[0].ExamId,
    UserIdList: rosterSelection.value.map(item => item.UserId)
  }).then(res => {
    console.log(res, 'res--')
    if (res.code === 0) {
      ElMessage({
        message: '操作成功',
        type: 'success'
      })
      getExamination()
      getAddExamRosterListt()
	  dialogExamination.value = false
    } else {
      ElMessage.error(res?.data || '操作失敗')
    }
  })
}
// 导入
const dialogToLead = ref(false)

const uploadRef = ref()
const handleExceed = (files) => {
  // submitUpload(files[0])
  uploadRef.value.clearFiles()
  nextTick(() => {
    uploadRef.value.handleStart(files[0])
  })
}
const handleChange = (uploadFile) => {
  console.log(uploadFile, 'uploadFile')
  // submitUpload(uploadFile.raw)
}
const submitUpload = () => {
  uploadRef.value.submit()
}
const toUpload = (param) => {
  if (!uploadRef.value) return ElMessage.error('请先上传文件')
  const formData = new FormData()
  formData.append('Files', param.file)
  apiUpload('', formData).then((res) => {
    console.log(res, 'res--')
    if (res.code === 0) {
      ElMessage({
        message: '上传成功',
        type: 'success'
      })
      queryData()
    } else {
      ElMessage.error(res?.data || '操作失敗')
    }
  })
}

</script>

<style scoped lang="scss">
.PageContent {
  width: 100%;
  height: 100%;
}
.WebToolbar {
  width: 100%;
  height: 72px;
  background-color: #fff;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  :deep(.el-form-item__content) {
    width: 256px !important;
    height: 32px !important;
  }
  :deep(.el-input) {
    width: 256px !important;
  }
  :deep(.el-select) {
    width: 256px !important;
  }
  :deep(.el-form-item__label) {
    color: #666 !important;
  }
}

.ButtonAssembly {
  .el-button {
    width: 84px;
    height: 32px;
    border: none;
    font-weight: 400;
    font-size: 14px;
    border-radius: 2px 2px 2px 2px;
    img {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }
  }
  .el-button:nth-child(1) {
    background-color: #0d867f;
  }
  .el-button:nth-child(2) {
    background-color: #f2f3f5;
  }
}

.Tabulation {
  width: 100%;
  height: calc(100% - 72px);
  background-color: #fff;
  margin-top: 14px;
  padding: 20px;
  .actionBar {
    display: flex;
    justify-content: space-between;
    h1 {
      font-weight: 500;
      font-size: 20px;
      color: #1d2129;
      line-height: 28px;
      font-family: Microsoft YaHei, Microsoft YaHei;
    }
  }
  .Worktop {
    .el-button {
      border: 1px solid #0d867f;
      font-weight: 400;
      font-size: 14px;
      color: #0d867f;
    }
    .el-button:hover {
      background-color: transparent;
    }
    .BlueBack {
      background: #0d867f;
      border-radius: 2px 2px 2px 2px;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      line-height: 22px;
      img {
        width: 16px;
        height: 16px;
        margin-right: 8px;
      }
    }
    .BlueBack:hover {
      background-color: #0d867f;
    }
    .Delete {
      background: #f2f3f5;
      border-radius: 2px 2px 2px 2px;
      font-weight: 400;
      font-size: 14px;
      color: #1d2129;
      line-height: 22px;
      border: none;
      img {
        width: 16px;
        height: 16px;
        margin-right: 8px;
      }
    }
    .Delete:hover {
      background-color: #f2f3f5;
    }
  }
  .ExaminationForm {
    margin-top: 16px;
    background-color: #0077aa;
  }
  .el-table tr {
    height: 41px;
  }
  .el-table td {
    height: 41px;
  }
  :deep(th) {
    background-color: #e5e6eb;
  }
}
.el-pagination {
  float: right;
  background-color: #fff !important;
  margin-top: 18px;
}
:deep(.el-pager li.is-active) {
  background-color: #e7f9f8 !important;
  font-weight: 400;
  color: #0d867f !important;
}
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: #e7f9f8 !important;
}

:deep(.el-select) {
  width: 280px !important;
}
:deep(.el-input) {
  width: 280px !important;
}
.example {
  margin-left: 20px;
  color: red;
}
.backInformation {
  :deep(.el-input) {
    width: 280px !important;
    height: 120px !important;
  }
}
.dialog-footer {
  width: 100%;
  text-align: center;
}
:deep(.el-textarea__inner) {
  width: 280px !important;
}
.user-name,.register{
  cursor: pointer;
}
.functionalUnit{
  margin-left: 20px;
  display: flex;
  .el-button {
    width: 84px;
    height: 32px;
    border: none;
    font-weight: 400;
    font-size: 14px;
    border-radius: 2px 2px 2px 2px;
    color: #fff;
    img {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }
  }
  .el-button:nth-child(1) {
    background-color: #2192ba;
  }
  .el-button:nth-child(2) {
    background-color: #17c85f;
  }
}
.TabularTitle{
  font-size: 14px;
  color: #747272;
  font-weight: bold;
  margin-bottom: 10px;
}
.pagination{
  width: 100%;
  height:30px;
  :deep(.el-pagination){
    margin-top: 9px!important;
  }
}
.addSlip{
  .el-button{
    border: none;
    background-color: #0077aa;
    margin-top: 8px;
    color: #fff;
  }
  :deep(.el-pagination){
    margin-top: 8px!important;
  }
}
.ml-3{
  margin-left: 20px;
}
</style>
