销售发票管理

src/views/salesMange/salesMange/invoice/index.vue

@@ -20,7 +20,49 @@
     </byTable>
 
     <el-dialog title="添加发票" v-if="dialogVisible" v-model="dialogVisible" width="600">
-      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit"> </byForm>
+      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
+        <template #contract>
+          <div style="width: 100%">
+            <div style="margin-bottom: 10px">
+              <el-button @click="clickAdd">添加行</el-button>
+            </div>
+            <el-table :data="formData.data.invoiceDetailsList" style="width: 100%; margin-top: 16px">
+              <el-table-column label="合同编号" min-width="200">
+                <template #default="{ row, $index }">
+                  <div style="width: 100%">
+                    <el-form-item :prop="'invoiceDetailsList.' + $index + '.contractId'" :rules="rules.contractId" :inline-message="true">
+                      <el-select v-model="row.contractId" placeholder="请选择合同编号" style="width: 100%">
+                        <el-option v-for="item in contractList" :key="item.value" :label="item.label" :value="item.value" />
+                      </el-select>
+                    </el-form-item>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column label="关联金额" width="160">
+                <template #default="{ row, $index }">
+                  <div style="width: 100%">
+                    <el-form-item :prop="'invoiceDetailsList.' + $index + '.money'" :rules="rules.money" :inline-message="true">
+                      <el-input-number
+                        onmousewheel="return false;"
+                        v-model="row.money"
+                        placeholder="请输入关联金额"
+                        style="width: 100%"
+                        :controls="false"
+                        :min="0"
+                        :precision="2" />
+                    </el-form-item>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="操作" width="80" fixed="right">
+                <template #default="{ $index }">
+                  <el-button type="primary" link @click="handleRemove($index)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </template>
+      </byForm>
       <template #footer>
         <el-button @click="dialogVisible = false" size="large">取 消</el-button>
         <el-button type="primary" @click="submitForm()" size="large" :loading="submitLoading"> 确 定 </el-button>
@@ -38,6 +80,8 @@ import useUserStore from "@/store/modules/user";
 
 const { proxy } = getCurrentInstance();
 const customerList = ref([]);
+const corporationList = ref([]);
+const contractList = ref([]);
 const invoiceType = ref([]);
 const loading = ref(false);
 const sourceList = ref({
@@ -47,15 +91,15 @@ const sourceList = ref({
     pageNum: 1,
     pageSize: 10,
     keyword: "",
-    customerId: "",
+    corporationId: "",
   },
 });
 const selectConfig = computed(() => {
   return [
     {
       label: "归属公司",
-      prop: "customerId",
-      data: customerList.value,
+      prop: "corporationId",
+      data: corporationList.value,
     },
   ];
 });
@@ -64,6 +108,12 @@ const config = computed(() => {
     {
       attrs: {
         label: "归属公司",
+        prop: "corporationName",
+      },
+    },
+    {
+      attrs: {
+        label: "客户名称",
         prop: "customerName",
       },
     },
@@ -136,13 +186,15 @@ const config = computed(() => {
 });
 const getDict = () => {
   proxy.post("/customer/page", { pageNum: 1, pageSize: 999 }).then((res) => {
-    customerList.value = res.rows.map((item) => {
-      return {
-        ...item,
-        label: item.name,
-        value: item.id,
-      };
-    });
+    if (res.rows && res.rows.length > 0) {
+      customerList.value = res.rows.map((item) => {
+        return {
+          ...item,
+          label: item.name,
+          value: item.id,
+        };
+      });
+    }
   });
   proxy
     .post("/dictTenantData/page", {
@@ -161,6 +213,17 @@ const getDict = () => {
         });
       }
     });
+  proxy.post("/corporation/page", { pageNum: 1, pageSize: 999 }).then((res) => {
+    if (res.rows && res.rows.length > 0) {
+      corporationList.value = res.rows.map((item) => {
+        return {
+          ...item,
+          label: item.name,
+          value: item.id,
+        };
+      });
+    }
+  });
 };
 getDict();
 const getList = async (req) => {
@@ -191,23 +254,111 @@ const formConfig = computed(() => {
   return [
     {
       type: "select",
+      label: "归属公司",
+      prop: "corporationId",
+      data: corporationList.value,
+      style: {
+        width: "100%",
+      },
+    },
+    {
+      type: "select",
       label: "发票类型",
       prop: "type",
       data: invoiceType.value,
+      style: {
+        width: "100%",
+      },
+    },
+    {
+      type: "select",
+      label: "客户名称",
+      prop: "customerId",
+      data: customerList.value,
+      style: {
+        width: "100%",
+      },
+      fn: (val) => {
+        if (val) {
+          proxy.post("/contract/page", { pageNum: 1, pageSize: 9999, customerId: val }).then((res) => {
+            if (res.rows && res.rows.length > 0) {
+              contractList.value = res.rows.map((item) => {
+                return {
+                  label: item.code,
+                  value: item.id,
+                };
+              });
+            } else {
+              contractList.value = [];
+            }
+          });
+        } else {
+          contractList.value = [];
+        }
+        formData.data.invoiceDetailsList = [
+          {
+            contractId: "",
+            money: undefined,
+            remark: "",
+          },
+        ];
+      },
+    },
+    {
+      type: "number",
+      prop: "money",
+      label: "发票金额",
+      precision: 2,
+      min: 0,
+      controls: false,
+      style: {
+        width: "100%",
+      },
+    },
+    {
+      type: "input",
+      label: "发票明细",
+      prop: "remark",
+      itemType: "textarea",
+    },
+    {
+      type: "slot",
+      slotName: "contract",
+      label: "关联合同",
     },
   ];
 });
 const rules = ref({
+  corporationId: [{ required: true, message: "请选择归属公司", trigger: "change" }],
   type: [{ required: true, message: "请选择发票类型", trigger: "change" }],
+  customerId: [{ required: true, message: "请选择客户名称", trigger: "change" }],
+  money: [{ required: true, message: "请输入金额", trigger: "blur" }],
+  contractId: [{ required: true, message: "请选择合同编号", trigger: "change" }],
 });
 const openModal = () => {
   formData.data = {
-    invoiceDetailsList: [],
+    invoiceDetailsList: [
+      {
+        contractId: "",
+        money: undefined,
+        remark: "",
+      },
+    ],
   };
   dialogVisible.value = true;
 };
 const submitForm = () => {
   submit.value.handleSubmit(() => {
+    if (!(formData.data.invoiceDetailsList && formData.data.invoiceDetailsList.length > 0)) {
+      return ElMessage("请添加关联合同");
+    }
+    for (let i = 0; i < formData.data.invoiceDetailsList.length; i++) {
+      for (let j = i + 1; j < formData.data.invoiceDetailsList.length; j++) {
+        if (formData.data.invoiceDetailsList[i].contractId === formData.data.invoiceDetailsList[j].contractId) {
+          return ElMessage("关联合同重复选择");
+        }
+      }
+    }
     submitLoading.value = true;
     proxy.post("/contractInvoice/add", formData.data).then(
       () => {
@@ -223,6 +374,19 @@ const submitForm = () => {
     );
   });
 };
+const clickAdd = () => {
+  if (!(formData.data.invoiceDetailsList && formData.data.invoiceDetailsList.length > 0)) {
+    formData.data.invoiceDetailsList = [];
+  }
+  formData.data.invoiceDetailsList.push({
+    contractId: "",
+    money: undefined,
+    remark: "",
+  });
+};
+const handleRemove = (index) => {
+  formData.data.invoiceDetailsList.splice(index, 1);
+};
 </script>
 
 <style lang="scss" scoped>