cxyy-web2/src/views/center/parts/score.vue

<template>
  <div class="index">
    <el-row>
      <el-col :span="24" class="main" v-loading="loading">
        <el-row justify="center">
          <el-col :span="16">
            <el-steps style="max-width: 600px" :active="active" finish-status="success">
              <el-step v-for="(item, index) in matchPathList" :key="index" :title="item.name" />
            </el-steps>
          </el-col>
        </el-row>
        <el-col :span="24" class="one" v-if="matchPathList.value && matchPathList.value.length > 0">
          <div class="one_left" @click="toAdd">添加分数</div>
        </el-col>
        <div class="table">
          <el-table :data="list" border>
            <el-table-column type="index" label="序号" width="80" align="center" />
            <el-table-column prop="matchPath_name" label="流程" align="center" />
            <el-table-column prop="sign_name" label="选手" align="center" />
            <el-table-column prop="score" label="分数" align="center">
              <template #default="scope">
                <el-input v-model="scope.row.score" type="number" placeholder="请输入分数" />
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="100">
              <template #default="scope">
                <el-link :underline="false" type="primary" size="mini" @click="onSave(scope.row)" style="margin-right: 10px">保存</el-link>
                <el-link :underline="false" type="danger" size="mini" @click="onDelete(scope.row)"> 删除 </el-link>
              </template>
            </el-table-column>
          </el-table>
          <el-col :span="24" class="thr">
            <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
          </el-col>
        </div>
        <div class="button" v-if="matchPathList.value && matchPathList.value.length > 0">
          <el-button @click="back">上一步</el-button>
          <el-button @click="next">下一步</el-button>
        </div>
      </el-col>
    </el-row>
    <el-dialog v-model="dialog.show" :title="dialog.title" :destroy-on-close="false" @close="toClose">
      <el-row>
        <el-col :span="24" v-if="dialog.type == '1'">
          <custom-form v-model="form" :fields="formFields" :rules="rules" @save="toSave" :DraftSave="false" submitText="保存">
            <template #matchPath>
              <el-option v-for="i in matchPathList" disabled :key="i.id" :label="i.name" :value="i.id"></el-option>
            </template>
            <template #sign>
              <el-option v-for="i in signList" :key="i.id" :label="i.name" :value="i.id">
                <span style="float: left">{{ i.name }}</span>
                <span style="float: right; font-size: 13px" v-if="i.card">身份证号码：{{ i.card }} </span>
              </el-option>
            </template>
          </custom-form>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup>
import moment from 'moment'
import { cloneDeep, get } from 'lodash-es'
const $checkRes = inject('$checkRes')
// 接口
import { ScoreStore } from '@/store/api/platform/score'
import { SignStore } from '@/store/api/platform/sign'
import { ProcessStore } from '@/store/api/platform/process'
const store = ScoreStore()
const processStore = ProcessStore()
const signStore = SignStore()
// 路由
const searchForm = ref({})

// 列表
const list = ref([])
let skip = 0
let limit = inject('limit')
const total = ref(0)
const currentPage = ref(1)

const props = defineProps({
  matchForm: { type: Object, default: () => {} }
})

const { matchForm } = toRefs(props)
const formFields = ref([
  { label: '流程', model: 'matchPath', type: 'select' },
  { label: '选手', model: 'sign', type: 'select' },
  { label: '分数', model: 'score', type: 'number' }
])
const rules = reactive({
  sign: [{ required: true, message: '请选择选手', trigger: 'blur' }],
  score: [{ required: true, message: '请填写分数', trigger: 'blur' }]
})
const dialog = ref({ type: '1', show: false, title: '维护分数' })
const form = ref({})
// 字典表
const matchPathList = ref([])
const signList = ref([])
// 加载中
const loading = ref(false)
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  if (matchPathList.value && matchPathList.value.length > 0) await search({ skip, limit })
  loading.value = false
})
const searchOther = async () => {
  let result
  // 流程
  result = await processStore.query({ match: matchForm.value.id, is_use: '0' })
  if ($checkRes(result)) matchPathList.value = result.data
  // 选手
  result = await signStore.query({ match: matchForm.value.id, status: '1' })
  if ($checkRes(result)) signList.value = result.data
}
const search = async (query = { skip, limit }) => {
  skip = query.skip
  limit = query.limit
  const info = { skip: query.skip, limit: query.limit, ...searchForm.value, match: matchForm.value.id, matchPath: matchPathList.value[active.value].id }
  const res = await store.list(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
// 添加
const toAdd = () => {
  form.value = { matchPath: matchPathList.value[active.value].id }
  dialog.value = { type: '1', show: true, title: '添加分数' }
}
// 删除
const onDelete = async (data) => {
  const res = await store.del(data.id)
  if ($checkRes(res, true)) {
    search({ skip, limit })
  }
}
const onSave = async (data) => {
  let res
  const other = { time: moment().format('YYYY-MM-DD'), match: matchForm.value.id }
  if (get(data, 'id')) res = await store.update({ ...data, ...other })
  else res = await store.create({ ...data, ...other })
  if ($checkRes(res, true)) {
    search({ skip, limit })
  }
}
const toSave = async () => {
  const data = cloneDeep(form.value)
  const other = { time: moment().format('YYYY-MM-DD'), match: matchForm.value.id }
  let res
  if (get(data, 'id')) res = await store.update({ ...data, ...other })
  else res = await store.create({ ...data, ...other })
  if ($checkRes(res, true)) {
    search({ skip, limit })
    toClose()
  }
}
const toClose = () => {
  form.value = {}
  dialog.value = { show: false }
}
const active = ref(0)
// 上一步
const back = async () => {
  if (active.value > 0) active.value = active.value - 1
  else active.value = 0
  await search({ skip, limit })
}
// 下一步
const next = async () => {
  if (active.value < matchPathList.value.length - 1) active.value = active.value + 1
  else active.value = 0
  await search({ skip, limit })
}
// 分页
const changePage = (page = currentPage.value) => {
  search({ skip: (page - 1) * limit, limit: limit })
}
const sizeChange = (limits) => {
  limit = limits
  currentPage.value = 1
  search({ skip: 0, limit: limit })
}
</script>
<style scoped lang="scss">
.main {
  .one {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 10px 0;
    .one_left {
      background: #1875df;
      padding: 0 10px;
      height: 30px;
      color: #fff;
      line-height: 30px;
      text-align: center;
      font-size: 16px;
      cursor: default;
    }
  }
  .button {
    text-align: center;
    margin: 12px 0 0 0;
  }
  .thr {
    display: flex;
    justify-content: center;
    margin: 20px 0 0 0;
  }
}
</style>