煤质管理前端代码

 src/views/xmcpms/coal-quality/analysis/wash/WashTargetForm.vue

对比新文件
@@ -0,0 +1,295 @@
<template>
  <Dialog width="60%" v-model="dialogVisible" :title="dialogTitle">
    <el-form :model="formData" :rules="dataRule" ref="formData" 
             label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item prop="ny" label="年月">
            <el-date-picker
              style="width: 100%;"
              v-model="formData.ny"
              type="month"
              format="yyyy-MM"
              value-format="yyyy-MM"
              placeholder="年月"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="mz" label="煤种">
            <dict-select-tag style="width: 100%"
                             size="mini"
                             v-model="formData.mz"
                             placeholder="煤种"
                             dictCode="ymmz"
                             :clearable="true"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="ymdw" label="用煤单位">
            <el-input size="mini" v-model="formData.ymdw" placeholder="用煤单位"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="cpl" label="产量">
            <el-input-number size="mini" style="width: 100%;" v-model="formData.cpl" :controls="false"
                             :precision="2" :min="0" :max="10000000"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">原煤指标</el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="ymSf" label="Mt%">
            <el-input-number v-model="formData.ymSf"
                             style="width: 100%;"
                             size="mini"
                             placeholder="Mt%"
                             :precision="2"
                             :controls="false"
                             :min="0"
                             :max="100"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="ymHf" label="Ad%">
            <el-input-number v-model="formData.ymHf"
                             style="width: 100%;"
                             size="mini"
                             placeholder="Ad%"
                             :precision="2"
                             :controls="false"
                             :min="0"
                             :max="100"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="ymLf" label="St.d%">
            <el-input-number v-model="formData.ymLf"
                             style="width: 100%;"
                             size="mini"
                             placeholder="Mt%"
                             :precision="2"
                             :controls="false"
                             :min="0"
                             :max="100"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">精煤指标</el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="jmSf" label="Ad%">
            <el-input-number v-model="formData.jmSf"
                             style="width: 100%;"
                             size="mini"
                             placeholder="Ad%"
                             :precision="2"
                             :controls="false"
                             :min="0"
                             :max="100"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="jmHff" label="Vdaf%">
            <el-input-number v-model="formData.jmHff"
                             style="width: 100%;"
                             size="mini"
                             placeholder="Vdaf%"
                             :precision="2"
                             :controls="false"
                             :min="0"
                             :max="100"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="jmLf" label="St.d%">
            <el-input-number v-model="formData.jmLf"
                             style="width: 100%;"
                             size="mini"
                             placeholder="St.d%"
                             :precision="2"
                             :controls="false"
                             :min="0"
                             :max="100"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="jmNj" label="GR.I">
            <el-input-number v-model="formData.jmNj"
                             style="width: 100%;"
                             size="mini"
                             placeholder="GR.I"
                             :controls="false"
                             :min="0"
                             :max="1000"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="jmJzc" label="胶质层Y">
            <el-input-number v-model="formData.jmJzc"
                             style="width: 100%;"
                             size="mini"
                             placeholder="胶质层Y"
                             :controls="false"
                             :min="0"
                             :max="1000"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">中煤指标</el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="zmHf" label="Ad%">
            <el-input-number v-model="formData.zmHf"
                             style="width: 100%;"
                             size="mini"
                             placeholder="Ad%"
                             :precision="2"
                             :controls="false"
                             :min="0"
                             :max="100"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="zmLf" label="St.d%">
            <el-input-number v-model="formData.zmLf"
                             style="width: 100%;"
                             size="mini"
                             placeholder="St.d%"
                             :precision="2"
                             :controls="false"
                             :min="0"
                             :max="100"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">矸石指标</el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="gsHf" label="Ad%">
            <el-input-number v-model="formData.gsHf"
                             style="width: 100%;"
                             size="mini"
                             placeholder="Ad%"
                             :precision="2"
                             :controls="false"
                             :min="0"
                             :max="100"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm()">确定</el-button>
      <el-button @click="dialogVisible = false">取消</el-button>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>

  import * as WashTargetApi from '@/api/xmcpms/coal-quality/analysis/wash/target'


  defineOptions({name: ' WashTargetForm'})

  const {t} = useI18n() // 国际化
  const message = useMessage() // 消息弹窗
  const dialogVisible = ref(false) // 弹窗的是否展示
  const dialogTitle = ref('') // 弹窗的标题
  const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
  const formType = ref('') // 表单的类型：create - 新增；update - 修改
  const formRef = ref() // 表单 Ref
  const formData = ref({
    id: undefined,
    ny: undefined,
    mz: undefined,
    ymdw: undefined,
    cpl: undefined,
    ymSf: undefined,
    ymHf: undefined,
    ymLf: undefined,
    jmSf: undefined,
    jmHf: undefined,
    jmLf: undefined,
    jmHff: undefined,
    jmNj: undefined,
    jmJzc: undefined,
    zmHf: undefined,
    zmLf: undefined,
    gsHf: undefined
  })

  const open = async (type: string, id?: string) => {
    dialogVisible.value = true
    dialogTitle.value = t('action.' + type)
    formType.value = type
    resetForm()
    //修改时，设置数据
    if (id) {
      formLoading.value = true
      try {
        formData.value = await WashTargetApi.getWashTarget(id)
      } finally {
        formLoading.value = false
      }
    }
  }
  defineExpose({ open }) // 提供 open 方法，用于打开弹窗

  /** 提交表单 */
  const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
  const submitForm = async () => {
    // 校验表单
    if (!formRef) return
    const valid = await formRef.value.validate()
    if (!valid) return
    // 提交请求
    formLoading.value = true
    try {
      const data = formData.value as WashTargetApi.WashTargetVO
      if (formType.value === 'create') {
        await WashTargetApi.createWashTarget(data)
        message.success(t('common.createSuccess'))
      } else {
        await WashTargetApi.updateWashTarget(data)
        message.success(t('common.updateSuccess'))
      }
      dialogVisible.value = false
      // 发送操作成功的事件
      emit('success')
    } finally {
      formLoading.value = false
    }
  }

  /** 重置表单 */
  const resetForm = () => {
    formData.value = {
      id: undefined,
      code: undefined,
      ny: undefined,
      syrq: undefined,
      mz: undefined,
      drl: undefined,
      fcfa: undefined,
      bz: undefined,
      detList: []
    }
    formRef.value?.resetFields()
  }

</script>
<style scoped>
  .el-date-editor {
    width: 100%;
  }
</style>

 src/views/xmcpms/coal-quality/analysis/wash/target.vue

对比新文件
@@ -0,0 +1,156 @@
<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-outDetection-concentrate">
      <el-form :inline="true" :model="queryParams" >
        <el-form-item>
          <el-date-picker
            v-model="queryParams.ny"
            type="month"
            format="yyyy-MM"
            value-format="yyyy-MM"
            placeholder="年月"/>
        </el-form-item>
        <el-form-item>
          <el-button @click="getList">
            <Icon icon="ep:search" class="mr-5px" />
            查询
          </el-button>
          <el-button type="primary" plain @click="openForm('create')">
            <Icon icon="ep:plus" class="mr-5px" />
            新增
          </el-button>
          <el-button type="warning" plain @click="handleImport">
            <Icon icon="ep:upload" /> 导出
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
          ref="myTable"
          v-loading="dataListLoading"
          :data="dataList"
          border
          highlight-current-row
          @selection-change="dataListSelectionChangeHandle"
          @sort-change="dataListSortChangeHandle"
          style="width: 100%;">
        <el-table-column prop="ny" label="年月" header-align="center" align="left"
                         min-width="100"/>
        <el-table-column prop="mzName" label="煤种" header-align="center" align="center"
                         min-width="120"/>
        <el-table-column prop="ymdw" label="用煤单位" header-align="center" align="center"
                         min-width="180"/>
        <el-table-column prop="cpl" label="产品量(t)" header-align="center" align="center"
                         min-width="150"/>
        <el-table-column label="原煤指标" header-align="center">
          <el-table-column prop="ymSf" label="Mt%" header-align="center" align="center"
                           min-width="80"/>
          <el-table-column prop="ymHf" label="Ad%" header-align="center" align="center"
                           min-width="80"/>
          <el-table-column prop="ymLf" label="St.d%" header-align="center" align="center"
                           min-width="80"/>
        </el-table-column>
        <el-table-column label="精煤指标" header-align="center">
          <el-table-column prop="jmSf" label="Ad%" header-align="center" align="center"
                           min-width="80"/>
          <el-table-column prop="jmHff" label="Vdaf%" header-align="center" align="center"
                           min-width="80"/>
          <el-table-column prop="jmLf" label="St.d%" header-align="center" align="center"
                           min-width="80"/>
          <el-table-column prop="jmNj" label="GR.I" header-align="center" align="center"
                           min-width="80"/>
          <el-table-column prop="jmJzc" label="胶质层Y" header-align="center" align="center"
                           min-width="80"/>
        </el-table-column>
        <el-table-column label="中煤指标" header-align="center">
          <el-table-column prop="zmHf" label="Ad%" header-align="center" align="center"
                           min-width="80"/>
          <el-table-column prop="zmLf" label="St.d%" header-align="center" align="center"
                           min-width="80"/>
        </el-table-column>
        <el-table-column label=" 矸石指标" header-align="center">
          <el-table-column prop="gsHf" label="Ad%" header-align="center" align="center"
                           min-width="80"/>
        </el-table-column>
        <el-table-column label="操作" fixed="right" header-align="center" align="center" width="120">
          <template #default="scope">
            <el-button v-hasPermi="['data:ind-item:update']" link type="primary" @click="openForm('update', scope.row.id)">
              修改
            </el-button>
            <el-button v-hasPermi="['data:ind-item:delete']" link type="danger" @click="handleDelete(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNo"
        :total="total"
        @pagination="getList"
      />
    </div>
  </el-card>
  <WashTargetForm ref="washTargetFormRef" @success="getList" />
</template>

<script lang="ts" setup>
  import * as WashTargetApi from '@/api/xmcpms/coal-quality/analysis/wash/target'
  import WashTargetForm from './WashTargetForm.vue'
  import * as WashCurvesApi from "@/api/xmcpms/coal-quality/analysis/wash-curves";

  const message = useMessage() // 消息弹窗
  const { t } = useI18n() // 国际化
  defineOptions({ name: 'Analysis' })
  const loading = ref(true) // 列表的加载中
  const total = ref(0) // 列表的总页数
  const dataList = ref([]) // 字典表格数据
  const queryFormRef = ref() // 搜索的表单
  const exportLoading = ref(false)

  const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    startTime: '',
    endTime: '',
    mz: '',
    fcfa: ''
  })

  const getList = async () => {
    loading.value = true
    try {
      const data = await WashTargetApi.getWashTargetPage(queryParams)
      dataList.value = data.list
      total.value = data.total
    } finally {
      loading.value = false
    }
  }

  /** 添加/修改操作 */
  const washTargetFormRef = ref()
  const openForm = (type: string, id?: string) => {
    washTargetFormRef.value.open(type, id)
  }


  /** 删除按钮操作 */
  const handleDelete = async (id: string) => {
    try {
      // 删除的二次确认
      await message.delConfirm()
      // 发起删除
      await WashTargetApi.deleteWashTarget(id)
      message.success(t('common.delSuccess'))
      // 刷新列表
      await getList()
    } catch {
    }
  }

  /** 初始化 **/
  onMounted(async () => {
    await getList()
  })

</script>