<template>
|
<Dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'">
|
<el-form
|
ref="dataForm"
|
v-loading="formLoading"
|
:model="dataForm"
|
:rules="formRules"
|
label-width="80px"
|
>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item prop="lsh" label="流水号" label-width="120px">
|
<el-input disabled v-model="dataForm.lsh" placeholder="流水号"/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :label="type === 'monthly' ? '月份' : '年份'" prop="ny" label-width="120px">
|
<el-date-picker
|
style="width: 100%"
|
v-if="type === 'monthly'"
|
v-model="dataForm.ny"
|
type="month"
|
value-format="yyyy-MM"
|
placeholder="选择月"/>
|
<el-date-picker
|
style="width: 100%"
|
v-if="type === 'yearly'"
|
v-model="dataForm.ny"
|
type="year"
|
value-format="yyyy"
|
placeholder="选择年"/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="编制人" prop="bzr" label-width="120px">
|
<el-input v-model="dataForm.bzr" placeholder="编制人"/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="编制时间" prop="bzsj" label-width="120px">
|
<el-date-picker
|
style="width: 100%"
|
v-model="dataForm.bzsj"
|
type="date"
|
value-format="yyyy-MM-dd"
|
placeholder="选择编制时间"/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="4">
|
<el-button type="primary" size="mini" @click="addDet">新增</el-button>
|
</el-col>
|
</el-row>
|
<el-row style="margin-top: 1%">
|
<el-table
|
v-loading="detListLoading"
|
:data="dataForm.detList"
|
style="width: 100%;"
|
border>
|
<el-table-column type="index" header-align="center" align="center" width="50" label="序号"/>
|
<el-table-column prop="mzCode" header-align="center" align="center" label="煤种">
|
<template #default="scope">
|
<el-form-item class="myCol" :prop="'detList.' + scope.$index + '.mzCode'"
|
:rules="dataRule.mzCode"
|
:show-message="false">
|
|
<el-select
|
style="width: 100%" size="mini" v-model="scope.mzCode"
|
placeholder="煤种"
|
>
|
<el-option
|
v-for="dict in getIntDictOptions(DICT_TYPE.PMS_CPMZ)"
|
:key="dict.value"
|
:label="dict.label"
|
:value="dict.value"
|
/>
|
</el-select>
|
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column prop="dw" header-align="center" align="center" label="单位" width="85">
|
<template #default="scope">
|
<el-form-item class="myCol" :prop="'detList.' + scope.$index + '.dw'"
|
:rules="dataRule.dw"
|
:show-message="false">
|
<el-input size="mini" v-model="scope.dw" placeholder="单位"/>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column prop="cl" header-align="center" align="center" label="产量">
|
<template #default="scope">
|
<el-form-item class="myCol" :prop="'detList.' + scope.$index + '.cl'"
|
:rules="dataRule.cl"
|
:show-message="false">
|
<el-input-number size="mini" style="width: 100%" :precision="2" v-model="scope.cl"
|
placeholder="产量"
|
:controls="false"/>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column prop="hf" header-align="center" align="center" label="灰分(Ad%)">
|
<template #default="scope">
|
<el-form-item class="myCol" :prop="'detList.' + scope.$index + '.hf'"
|
:rules="dataRule.hf"
|
:show-message="false">
|
<el-input-number size="mini" style="width: 100%" :precision="2" v-model="scope.hf"
|
placeholder="灰分"
|
:controls="false"/>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column prop="lf" header-align="center" align="center" label="硫分(St,d%)">
|
<template #default="scope">
|
<el-form-item class="myCol" :prop="'detList.' + scope.$index + '.lf'"
|
:show-message="false">
|
<el-input-number size="mini" style="width: 100%" :precision="2" v-model="scope.lf"
|
placeholder="硫分"
|
:controls="false"/>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column prop="sf" header-align="center" align="center" label="水分(Mt%)">
|
<template #default="scope">
|
<el-form-item class="myCol" :prop="'detList.' + scope.$index + '.sf'"
|
:show-message="false">
|
<el-input-number size="mini" style="width: 100%" :precision="2" v-model="scope.sf"
|
placeholder="水分"
|
:controls="false"/>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column prop="mbrz" header-align="center" align="center" label="目标热值(Kcal/Kg)">
|
<template #default="scope">
|
<el-form-item class="myCol" :prop="'detList.' + scope.$index + '.mbrz'"
|
:show-message="false">
|
<el-input-number size="mini" style="width: 100%" :precision="2" v-model="scope.mbrz"
|
placeholder="目标热值"
|
:controls="false"/>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center"
|
width="50">
|
<template #default="scope">
|
<el-button size="mini" type="text" icon="el-icon-delete"
|
@click="deleteDet(scope.$index)"
|
:disabled="dataForm.detList.length === 1"/>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-row>
|
</el-form>
|
<div>
|
<slot name="footer">
|
<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
|
<el-button type="primary" @click="dataFormSubmitHandle()"
|
:disabled="dataForm.detList.length === 0">{{
|
$t('confirm') }}
|
</el-button>
|
</slot>
|
</div>
|
</dialog>
|
</template>
|
|
<script lang="ts" setup>
|
import {getYM, getYMD} from '@/utils/dateUtil'
|
import {FormRules} from "element-plus";
|
import {ref, computed} from 'vue';
|
import { ElMessage } from 'element-plus'
|
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
defineOptions({name: 'ProdPlanAddOrUpdate'})
|
|
const type = ref('')
|
const visible = ref(false)
|
const dataForm = reactive({
|
id: '',
|
unit2: '',
|
ssdw: '',
|
lsh: '',
|
jhlb: type,
|
ny: getYM(new Date()),
|
bzr: '',
|
bzsj: getYMD(new Date()),
|
sslb: '',
|
detList: []
|
})
|
const detListLoading = ref(false)
|
const validateMzCode = (rule, value, callback) => {
|
if (this.dataForm.detList.filter(item => item.mzCode === value).length > 1) {
|
ElMessage({
|
message: '煤种进行了重复选择',
|
type: 'warning',
|
})
|
callback(new Error('煤种进行了重复选择'))
|
} else {
|
callback()
|
}
|
}
|
const formRules = reactive < FormRules > ({
|
ny: [
|
{required: true, message: '不能为空', trigger: 'change'}
|
],
|
bzr: [
|
{required: true, message: '编制人不能为空', trigger: 'change'}
|
],
|
bzsj: [
|
{required: true, message: '编制时间不能为空', trigger: 'change'}
|
],
|
sslb: [
|
{required: true, message: '所属类别不能为空', trigger: 'change'}
|
],
|
mzCode: [
|
{required: true, trigger: 'change'},
|
{validator: validateMzCode, trigger: 'change'}
|
],
|
dw: [
|
{required: true, trigger: 'change'}
|
],
|
cl: [
|
{required: true, trigger: 'blur'}
|
],
|
hf: [
|
{required: true, trigger: 'blur'}
|
],
|
lf: [
|
{required: true, trigger: 'blur'}
|
],
|
sf: [
|
{required: true, trigger: 'blur'}
|
],
|
mbrz: [
|
{required: true, trigger: 'blur'}
|
]
|
})
|
|
/** 打开弹窗 */
|
const open = async () => {
|
dialogVisible.value = true
|
resetForm()
|
|
this.dataForm.detList = []
|
this.dataForm.bzr = this.$store.state.user.realName
|
if (this.dataForm.id) {
|
this.getInfo()
|
}
|
}
|
/** 重置表单 */
|
const resetForm = () => {
|
dataForm.value = {
|
id: '',
|
unit2: '',
|
ssdw: '',
|
lsh: '',
|
jhlb: type,
|
ny: getYM(new Date()),
|
bzr: '',
|
bzsj: getYMD(new Date()),
|
sslb: '',
|
detList: []
|
}
|
dataForm.value?.resetFields()
|
}
|
|
</script>
|
|
<style scoped>
|
.myCol {
|
margin-bottom: 0px
|
}
|
</style>
|
