完成Banner,设备管理模块，进行中 水电表

src/views/system/Sdb/SdbBill/add.vue

@@ -0,0 +1,161 @@
+<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="name">
+            <el-input v-model.trim="form.name" placeholder="请输入账单名称" />
+          </el-form-item>
+
+          <el-form-item label="收费项目" prop="materialName">
+            <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="billingMethod">
+            <el-radio-group v-model="form.billingMethod">
+              <el-radio value="0">固定单价</el-radio>
+            </el-radio-group>
+          </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="price">
+            <el-input v-model.trim="form.price" placeholder="请输入费用单价" />
+          </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';
+
+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 router = useRouter();
+const route = useRoute();
+
+const formRef = ref();
+const form = ref({
+  'id': null,
+  'name': '',
+  'billingMethod': '0',
+  'price': null,
+  'unit': '',
+  'precision': '',
+  'carryMethod': '',
+  'remark': '',
+  'formula': ''
+});
+const rules = ref({
+  name: [{ required: true, message: '请输入 项目名称', trigger: 'blur' }],
+  billingMethod: [{ required: true, message: '请输入 计费方式', trigger: 'blur' }],
+  price: [{ required: true, message: '请输入 费用单价', trigger: 'blur' }],
+  formula: [{ required: true, message: '请选择 计费公式', trigger: 'blur' }],
+  unit: [{ required: true, message: '请选择 计费单位', trigger: 'blur' }],
+  precision: [{ required: true, message: '选择 计算精度', trigger: 'blur' }],
+  carryMethod: [{ required: true, message: '请选择 进位方式', trigger: 'blur' }]
+});
+const userid = ref(null);
+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>