Newer
Older
xc-metering-front / src / views / tested / MeasurementPlan / plan / components / infoDetail.vue
liyaguang on 28 Sep 2023 4 KB feat(*): 首页完成
<!-- 计量计划 -详情-基本信息 -->
<script lang="ts" setup name="PlanBaseInfo">
import dataList from './dataList.vue'
import { getDictByCode } from '@/api/system/dict'
import { detailPlan } from '@/api/eqpt/measurementPlan/paln'
const $route = useRoute()
const $router = useRouter()
const statusName = $route.query.statusName as string
const typeFlag = ref('0')
const dialogStatus = ref('detail')
// 当前年份
const currentYear = ref<number>()
currentYear.value = new Date().getFullYear()
const ruleForm = ref({
  approvalStatus: '', // 审批状态
  createDeptId: '', // 创建单位id
  createDeptName: '', // 创建单位名称
  createTime: '', // 	创建时间
  createUserId: '', // 创建人id
  createUserName: '', // 创建人姓名
  decisionItem: '', // 可选决策项
  equipmentIds: [], // 关联设备id
  id: '',
  month: '', // month
  planCategory: '0', // 计划分类(字典值,原始/追加)
  planName: '', // 计划名称
  planNo: '', // 计划编号
  planType: '', // 计划类型(字典值,年/季/月)
  processId: '', // 流程实例id
  remark: '', // 备注
  season: '', // 季度
  taskId: '', // 任务id
  updateTime: '', // 更新时间
  year: '', // 年份
}) // 表单
onMounted(() => {
  // 基本信息
  const data = JSON.parse($route.query.row as string)
  detailPlan(data.id).then((res) => {
    const data = res.data
    typeFlag.value = data.planType
    ruleForm.value = data
  })
})
// 获取计划分类列表
const planTypeList = ref()
const fetchTypeList = () => {
  getDictByCode('eqptPlanType').then((res) => {
    planTypeList.value = res.data
  })
}
fetchTypeList()
</script>

<template>
  <detail-block-com>
    <el-form
      ref="ruleFormRef" :model="ruleForm" label-position="right" label-width="110px" class="form"
      :class="[$route.path.includes('detail') ? 'isDetail' : '']" :disabled="$route.path.includes('detail')"
    >
      <el-row :gutter="24" class="marg">
        <el-col :span="6">
          <el-form-item label="计划编号" prop="planNo">
            <el-input v-model.trim="ruleForm.planNo" placeholder="系统自动生成" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item v-if="typeFlag === '0'" label="计划名称" prop="planName">
            <el-input v-model.trim="ruleForm.planName" placeholder="计划名称" disabled />
          </el-form-item>
          <el-form-item v-if="typeFlag === '1'" label="计划名称" prop="planName">
            {{ currentYear }}年第<el-input v-model.trim="ruleForm.season" style="width: 40px;" /> 季度计量计划
          </el-form-item>
          <el-form-item v-if="typeFlag === '2'" label="计划名称" prop="planName">
            {{ currentYear }}年<el-input v-model.trim="ruleForm.month" style="width: 40px;" /> 月月度计量计划
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="计划分类" prop="planCategory">
            <el-select v-model="ruleForm.planCategory" placeholder="选择计划分类" style="width: 100%;" disabled>
              <el-option v-for="item in planTypeList" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="marg">
        <el-col :span="6">
          <el-form-item label="创建单位" prop="createDeptName">
            <el-input v-model.trim="ruleForm.createDeptName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建人" prop="createUserName">
            <el-input v-model.trim="ruleForm.createUserName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建时间" prop="createTime">
            <el-date-picker
              v-model="ruleForm.createTime" type="date" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" placeholder="请选择创建时间" class="normal-date" style="width: 100%;" disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="marg">
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model.trim="ruleForm.remark" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </detail-block-com>
  <detail-block-com>
    <data-list />
  </detail-block-com>
</template>