191 lines
6.7 KiB
Vue
191 lines
6.7 KiB
Vue
<template>
|
|
<div class="AddBuildingBox">
|
|
<PageHeader></PageHeader>
|
|
<div class="AddBuildingBody">
|
|
<div class="title">基本信息</div>
|
|
<div class="addBuildingFormBody">
|
|
<el-form class="formBody" label-position="right" ref="formRef" :model="form" :rules="rules" label-width="130px">
|
|
<el-form-item label="项目名称" prop="itemName">
|
|
<el-input v-model.trim="form.itemName" placeholder="请输入项目名称" />
|
|
</el-form-item>
|
|
<el-form-item label="收费项目" prop="typeId">
|
|
<el-select v-model="form.typeId">
|
|
<el-option v-for="(item, index) in chargeitemlist" :key="index" :value="item.id" :label="item.name"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="计费方式" prop="billingType">
|
|
<el-radio-group v-model="form.billingType">
|
|
<el-radio v-for="(item, index) in com_charge_item_method" :key="index" :value="item.value" :label="item.label"></el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="计算公式" prop="formula">
|
|
<el-select v-model="form.formula">
|
|
<el-option v-for="(item, index) in com_charge_item_formula" :key="index" :value="item.value" :label="item.label"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="计量单位" prop="unit">
|
|
<el-select v-model="form.unit">
|
|
<el-option v-for="(item, index) in com_charge_item_unit" :key="index" :value="item.value" :label="item.label"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="费用单价" prop="fixedPrice">
|
|
<el-input v-model.trim="form.fixedPrice" placeholder="请输入费用单价" />
|
|
</el-form-item>
|
|
<el-form-item label="计算精度" prop="accuracy">
|
|
<el-select v-model="form.accuracy">
|
|
<el-option v-for="(item, index) in com_charge_item_precision" :key="index" :value="item.value" :label="item.label"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="进位方式" prop="carryMethod">
|
|
<el-select v-model="form.carryMethod">
|
|
<el-option v-for="(item, index) in com_charge_item_carry_method" :key="index" :value="item.value" :label="item.label"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="启用/停用" prop="status">
|
|
<el-radio-group v-model="form.status">
|
|
<el-radio value="0" label="启用"></el-radio>
|
|
<el-radio value="1" label="停用"></el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="备注" prop="remark">
|
|
<el-input type="textarea" :rows="5" v-model.trim="form.remark" placeholder="请输入" />
|
|
</el-form-item>
|
|
|
|
<el-form-item style="margin-top: 30px">
|
|
<el-button type="primary" @click="submitForm">提交</el-button>
|
|
<el-button @click="cancelForm">返回</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import PageHeader from '@/components/Pageheader/index.vue';
|
|
import { getChargeItem, updateChargeItem, addChargeItem } from '@/api/system/SdbChargeItem';
|
|
import { listChargeType } from '@/api/system/ChargeType';
|
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
const { com_charge_item_unit } = toRefs<any>(proxy?.useDict('com_charge_item_unit'));
|
|
const { com_charge_item_precision } = toRefs<any>(proxy?.useDict('com_charge_item_precision'));
|
|
const { com_charge_item_carry_method } = toRefs<any>(proxy?.useDict('com_charge_item_carry_method'));
|
|
const { com_charge_item_formula } = toRefs<any>(proxy?.useDict('com_charge_item_formula'));
|
|
const { com_charge_item_method } = toRefs<any>(proxy?.useDict('com_charge_item_method'));
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
const formRef = ref();
|
|
const form = ref({
|
|
'id': null,
|
|
'typeId': '',
|
|
'itemName': '',
|
|
'billingType': '0',
|
|
'fixedPrice': null,
|
|
'unit': '',
|
|
'accuracy': '',
|
|
'carryMethod': '',
|
|
'remark': '',
|
|
'status': '0',
|
|
'formula': ''
|
|
});
|
|
const rules = ref({
|
|
itemName: [{ required: true, message: '请输入 项目名称', trigger: 'blur' }],
|
|
typeId: [{ required: true, message: '请选择 收费类型', trigger: 'blur' }],
|
|
billingType: [{ required: true, message: '请输入 计费方式', trigger: 'blur' }],
|
|
fixedPrice: [{ required: true, message: '请输入 费用单价', trigger: 'blur' }],
|
|
formula: [{ required: true, message: '请选择 计费公式', trigger: 'blur' }],
|
|
unit: [{ required: true, message: '请选择 计费单位', trigger: 'blur' }],
|
|
accuracy: [{ required: true, message: '选择 计算精度', trigger: 'blur' }],
|
|
carryMethod: [{ required: true, message: '请选择 进位方式', trigger: 'blur' }]
|
|
});
|
|
const userid = ref(null);
|
|
const chargeitemlist = ref([]);
|
|
listChargeType().then((res) => {
|
|
chargeitemlist.value = res.rows;
|
|
});
|
|
if (route.query.id) {
|
|
userid.value = route.query.id;
|
|
|
|
getChargeItem(userid.value).then((res) => {
|
|
form.value = {
|
|
...form.value,
|
|
...res.data
|
|
};
|
|
});
|
|
}
|
|
// !== 提交 =============================================================================
|
|
// 提交
|
|
// TODO 收费项目提交
|
|
|
|
const submitForm = () => {
|
|
formRef.value?.validate(async (valid: boolean) => {
|
|
if (valid) {
|
|
if (userid.value) {
|
|
updateChargeItem(form.value).then((res) => {
|
|
ElMessage.success('编辑成功');
|
|
cancelForm();
|
|
});
|
|
} else {
|
|
addChargeItem(form.value).then((res) => {
|
|
ElMessage.success('添加成功');
|
|
cancelForm();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
};
|
|
// 推出
|
|
const cancelForm = () => {
|
|
router.back();
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.AddBuildingBox {
|
|
padding: 15px;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.AddBuildingBody {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
background-color: white;
|
|
padding: 15px;
|
|
.title {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
padding-left: 20px;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
color: rgba(16, 16, 16, 1);
|
|
border-bottom: 1px solid #bbbbbb;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.formBody {
|
|
width: 650px;
|
|
margin: 0 auto;
|
|
&:deep(.el-form-item__content, .el-select, .el-input) {
|
|
width: 350px !important;
|
|
margin-right: 10px;
|
|
.el-cascader {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.el-form-item {
|
|
margin-bottom: 20px;
|
|
align-items: center;
|
|
}
|
|
.el-button {
|
|
width: 80px;
|
|
height: 35px;
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|