nuclear-detection-frontend/src/components/Publish.vue

<template>
  <t-form
    :data="formData"
    :rules="pubRules"
    ref="form"
    @reset="onReset"
    @submit="onSubmit"
  >
    <t-form-item
      label="任务名称"
      help="任务名称用来直观的说明本次操作"
      name="taskName"
    >
      <t-input
        v-model="formData.taskName"
        placeholder="请输入任务名称"
      ></t-input>
    </t-form-item>
    <t-form-item label="核查顺序" name="checkOrder">
      <t-radio-group v-model="formData.checkOrder">
        <t-radio value="0">横向</t-radio>
        <t-radio value="1">纵向</t-radio>
      </t-radio-group>
    </t-form-item>
    <t-form-item label="核电站" name="nuclearStationId">
      <t-select
        v-model="formData.nuclearStationId"
        class="demo-select-base"
        clearable
        filterable
        @change="handleStationChange"
        placeholder="请选择所在核电站"
      >
        <t-option
          v-for="item in stationList"
          :value="item.id"
          :label="item.name"
          :key="item.id"
        >
          {{ item.name }}
        </t-option>
      </t-select>
    </t-form-item>
    <t-form-item label="堆芯" name="nuclearCoreId">
      <t-select
        v-model="formData.nuclearCoreId"
        class="demo-select-base"
        clearable
        filterable
        placeholder="请选择所在堆芯"
      >
        <t-option
          v-for="item in coreList"
          :value="item.id"
          :label="item.name"
          :key="item.id"
        >
          {{ item.name }}
        </t-option>
      </t-select>
    </t-form-item>
    <t-form-item label="操作员" name="operatorId">
      <t-select
        v-model="formData.operatorId"
        class="demo-select-base"
        clearable
        filterable
        placeholder="请选择分配的操作员"
      >
        <t-option
          v-for="item in userList"
          :value="item.username"
          :label="item.nickname"
          :key="item.id"
        >
          {{ item.nickname }}
        </t-option>
      </t-select>
    </t-form-item>
    <t-form-item>
      <t-space size="10px">
        <t-button theme="primary" type="submit">提交</t-button>
        <t-button theme="default" variant="base" type="reset">重置</t-button>
      </t-space>
    </t-form-item>
  </t-form>
</template>
<script>
import { allOperatorApi } from '@/api/publish'
import { createTaskApi } from '@/api/task'
import { useAccountStore } from '@/store'
import { stationListApi, coreListByStationIdApi } from '@/api/info'
const accountStore = useAccountStore()
const INITIAL_DATA = {
  taskName: '',
  checkOrder: '',
  nuclearStationId: '',
  nuclearCoreId: '',
  operatorId: '',
}
export default {
  data() {
    return {
      formData: { ...INITIAL_DATA },
      stationList: [],
      userList: [],
      coreList: [],
      pubRules: {
        taskName: [{ required: true, message: '请填写任务名称' }],
        operatorId: [{ required: true, message: '请选择要分配的操作员' }],
        nuclearCoreId: [{ required: true, message: '请选择堆芯' }],
        nuclearStationId: [{ required: true, message: '请选择核电站' }],
        checkOrder: [{ required: true, message: '核查路径顺序必填' }],
      },
    }
  },

  methods: {
    async handleStationChange(value, context) {
      const res = await coreListByStationIdApi(value)
      if (res?.code == 200) {
        this.coreList = res?.data.list
      }
    },
    async getStationList() {
      const res = await stationListApi()
      if (res?.code == 200) {
        this.stationList = res?.data?.list
      }
    },
    async getAllOperator() {
      const res = await allOperatorApi()
      if (res?.code == 200) {
        this.userList = res?.data
      }
    },
    onReset() {
      this.$message.success('重置成功')
    },
    async onSubmit({ validateResult, firstError }) {
      if (validateResult === true) {
        const res = await createTaskApi(this.formData)
        if (res?.code == 200) {
          if (res?.data?.result) {
            this.$message.success('创建任务成功')
            accountStore.changePage(1)
          }
        }
      } else {
        this.$message.warning(firstError)
      }
    },
  },

  mounted() {
    this.getAllOperator()
    this.getStationList()
  },
}
</script>

<style scoped></style>