delivery-depot-vue/src/views/DeliveryWarehouse/DeliveryWarehouseSelect/compontents/CreateForm.vue

<template>
  <Dialog v-model="dialogVisible" :defineFullscreen="true" :fullscreen="false" :title="dialogTitle"
          width="800">
    <!--    <a-select  >-->
    <!--      <a-option :index="0" :value="true">是</a-option>-->
    <!--      <a-option :value="false">否</a-option>-->
    <!--    </a-select>-->
    <template #title>
      <MyRadio v-model="active">
        <my-radio-item name="单位信息">
          <template #name>
            单位信息
          </template>
        </my-radio-item>
        <my-radio-item name="库区信息">
          <template #name>
            库区信息
          </template>
        </my-radio-item>
        <my-radio-item name="仓房信息">
          <template #name>
            仓房信息
          </template>
        </my-radio-item>
        <my-radio-item name="财务信息">
          <template #name>
            财务信息
          </template>
        </my-radio-item>
      </MyRadio>
    </template>
    <ContentWrap>
      <el-form v-if="active === '单位信息'" ref="formRef1" :model="dwxxReqVO" :rules="formRules1"
               label-width="180">
        <el-row>
          <el-col :span="8">
            <el-form-item label="单位名称" prop="dwmc">
              <el-input v-model="dwxxReqVO.dwmc" placeholder="请输入单位名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="统一信用代码" prop="tyxydm">
              <el-input v-model="dwxxReqVO.tyxydm" placeholder="请输入统一信用代码"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法定代表人" prop="fddbr">
              <el-input v-model="dwxxReqVO.fddbr" placeholder="请输入法定代表人"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号" prop="sfzh">
              <el-input v-model="dwxxReqVO.sfzh" placeholder="请输入身份证号"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系方式" prop="lxfs">
              <el-input v-model="dwxxReqVO.lxfs" placeholder="请输入联系方式"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="注册日期" prop="zcrq">
              <el-date-picker
                v-model="dwxxReqVO.zcrq"
                type="date"
                placeholder="请选择注册日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="注册地址" prop="zcdz">

              <el-input v-model="dwxxReqVO.zcdz" placeholder="请输入注册地址"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮政编码" prop="yzbm">
              <el-input v-model="dwxxReqVO.yzbm" placeholder="请输入邮政编码"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="企业性质" prop="qyxz">
              <el-input v-model="dwxxReqVO.qyxz" placeholder="请选择企业性质"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="上传营业执照" prop="resid">
              <el-input v-model="dwxxReqVO.resid" placeholder="上传营业执照"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form v-if="active === '库区信息'" ref="formRef2" :model="kqxxReqVO" :rules="formRules2"
               label-width="180">
        <el-row>
          <el-col :span="8">
            <el-form-item label="库区名称" prop="kqmc">
              <el-input v-model="kqxxReqVO.kqmc" placeholder="请输入库区名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="库区统一编码" prop="kqmc">
              <el-input v-model="kqxxReqVO.kqdm" placeholder="请输入库区统一编码"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮政编码" prop="kqmc">
              <el-input v-model="kqxxReqVO.yzbm" placeholder="请输入邮政编码"/>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="行政区划">
              <div style="width:100%;display: flex;justify-content: space-around">
                <el-select v-model="kqxxReqVO.sheng" placeholder="省">
                  <el-option v-for="item in shengList" :key="item.areaCode" :label="item.areaName"
                             :value="item.areaCode"/>
                </el-select>
                <el-select v-model="kqxxReqVO.shi" placeholder="市区">
                  <el-option v-for="item in shiList" :key="item.areaCode" :label="item.areaName"
                             :value="item.areaCode"/>
                </el-select>
                <el-select v-model="kqxxReqVO.xian" placeholder="区县">
                  <el-option v-for="item in xianList" :key="item.areaCode" :label="item.areaName"
                             :value="item.areaCode"/>
                </el-select>
              </div>

            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="具体地址" prop="jtdz">
              <el-input v-model="kqxxReqVO.jtdz" placeholder="请输入具体地址"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="库区负责人(实际产权人)" prop="kqfzr">
              <el-input v-model="kqxxReqVO.kqfzr" placeholder="请输入库区负责人"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话" prop="lxdh">
              <el-input v-model="kqxxReqVO.lxdh" placeholder="请选择注册日期"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="占地面积(m²)" prop="zdmj">
              <el-input v-model="kqxxReqVO.zdmj" placeholder="请输入占地面积"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="库区状态" prop="kqzt">
              <el-input v-model="kqxxReqVO.kqzt" placeholder="请选择库区状态"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="租仓参考价(元)" prop="zcckj">
              <el-input v-model="kqxxReqVO.zcckj" placeholder="租仓参考价"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="委托保管参考价:(元/吨)" prop="wtbgckj">
              <el-input v-model="kqxxReqVO.wtbgckj" placeholder="租仓参考价"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经纬度" prop="jd">
              <div style="display: flex;justify-content: space-around">
                <el-input v-model="kqxxReqVO.jd" placeholder="经度"/>
                <div>
                  -
                </div>
                <el-input v-model="kqxxReqVO.wd" placeholder="纬度"/>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="上传库区图" prop="resid">
              <!--                <el-image-->
              <el-input v-model="kqxxReqVO.resid" placeholder="上传库区图"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form v-if="active === '仓房信息'" ref="formRef3" :model="caxxReqVOList"
               :rules="formRules3"
               label-width="180">
        <a-table :columns="tableColumns" :data="caxxReqVOList">
          <template #index="{  rowIndex  }">
            {{ rowIndex + 1 }}
          </template>
          <template #cfName="{ record  }">
            <a-input v-model="caxxReqVOList[record.index].cfmc"/>
          </template>
          <template #cfType="{ record  }">
            <a-select v-model="caxxReqVOList[record.index].cflx">
              <a-option v-for="item in getIntDictOptions('system_cflx')" :key="item.value"
                        :value="item.value">{{ item.label }}
              </a-option>
            </a-select>
          </template>
          <template #cfCode="{ record  }">
            <a-input v-model="caxxReqVOList[record.index].cfbm"/>
          </template>
          <template #cfState="{ record  }">
            <a-select v-model="caxxReqVOList[record.index].cazt">
              <a-option v-for="item in getIntDictOptions('system_cazt')" :key="item.value"
                        :value="item.value">{{ item.label }}
              </a-option>
            </a-select>
          </template>
          <template #sjcr="{ record  }">
            <a-input v-model="caxxReqVOList[record.index].sjcr"/>
          </template>
          <template #qtcxsysm="{ record  }">
            <a-input v-model="caxxReqVOList[record.index].qtcxsm"/>
          </template>
          <template #edit="{ record  }">
            <a-button style="font-size: 16px" @click="deleteItem(record)">
              -
            </a-button>
          </template>
          <template #editHeader>
            <a-button class="" style="font-size: 16px" @click="addItem()">
              +
            </a-button>
          </template>
        </a-table>
      </el-form>
      <el-form v-if="active === '财务信息'" ref="formRef3" :model="cwxxReqVO" :rules="formRules4"
               label-width="180">
        <el-row>
          <el-col :span="8">
            <el-form-item label="是否国有及国有控股:">
              <el-radio-group v-model="cwxxReqVO.sfgykg">
                <el-radio :value="0">是</el-radio>
                <el-radio :value="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <span style="display: none"></span>
          </el-col>
          <el-col :span="8">
            <el-form-item label="上一年总资产">
              <el-input v-model="cwxxReqVO.syndzzc"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="display: flex;justify-content: space-between">
          <el-col v-for="(item,index) in cwxxReqVO.cwxxYearList" :key="index" :span="8">
            <el-card style="width: 95%;margin: 0 auto">
              <template #header>
                {{ item.cn }}年财务情况
              </template>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="总负债" label-width="80px">
                    <el-input v-model="item.zfz" class="w-[85%]!"/> &nbsp; &nbsp; 万元
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="营业收入" label-width="80px">
                    <el-input v-model="item.yysr" class="w-[85%]! "/> &nbsp; &nbsp; 万元
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="净利润" label-width="80px">
                    <el-input v-model="item.jlr" class="w-[85%]! "/> &nbsp; &nbsp; 万元
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-form>
    </ContentWrap>
    <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 MyRadio from "@/components/MyRadio/index.vue";
import MyRadioItem from "@/components/MyRadio/MyRadioItem.vue";
import {
  DeliveryWarehouseSelectApi
} from "@/api/DeliveryWarehouse/DeliveryWarehouseSelect";

import {FormRules} from "element-plus";
import {
  CaxxSaveReqVO
} from "@/api/DeliveryWarehouse/DeliveryWarehouseSelect/interface/CaxxSaveReqVO";
import {CwxxRespVO} from "@/api/DeliveryWarehouse/DeliveryWarehouseSelect/interface/CwxxRespVO";
import {
  KqxxSaveReqVO
} from "@/api/DeliveryWarehouse/DeliveryWarehouseSelect/interface/KqxxSaveReqVO";
import {
  DwxxSaveReqVO
} from "@/api/DeliveryWarehouse/DeliveryWarehouseSelect/interface/DwxxSaveReqVO";
import {AdministrativeDivisionApi} from "@/api/system/administrativeDivision";
import {getIntDictOptions} from "@/utils/dict";
import {
  DeliverySaveVO
} from "@/api/DeliveryWarehouse/DeliveryWarehouseSelect/interface/DeliverySaveVO";

defineOptions({name: 'SystemUserForm'})
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 formData: Ref<DeliverySaveVO> = ref({
  dwxxReqVO: {
    dwmc: '',
  },
  kqxxReqVO: {},
  caxxReqVOList: [],
  cwxxReqVO: {},

});
console.log(getIntDictOptions('system_cazt'), 1111)
const dwxxReqVO: Ref<DwxxSaveReqVO> = ref({})
const kqxxReqVO: Ref<KqxxSaveReqVO> = ref({})
const caxxReqVOList: Ref<CaxxSaveReqVO[]> = ref([])
const cwxxReqVO: Ref<CwxxRespVO> = ref({
  cwxxYearList: [

    {
      cn: '2023',
      zfz: '',
      yysr: '',
      jlr: '',
    },
    {
      cn: '2022',
      zfz: '',
      yysr: '',
      jlr: '',
    },
    {
      cn: '2021',
      zfz: '',
      yysr: '',
      jlr: '',
    },
  ],
  sfgykg: 0,
  syndzzc: '',
})
const tableColumns = ref([
  {
    title: "序号",
    dataIndex: "index",
    slotName: "index",
    align: "center",
    width: "60"
  },
  {
    title: "仓房名称",
    dataIndex: "cfName",
    slotName: "cfName",
    align: "center",
  },
  {
    title: "仓房类型",
    dataIndex: "cfType",
    slotName: "cfType",
    align: "center",
  },
  {
    title: "仓房编号",
    dataIndex: "cfCode",
    slotName: "cfCode",
    align: "center",
  },
  {
    title: "仓房状态",
    dataIndex: "cfState",
    slotName: "cfState",
    align: "center",
  },
  {
    title: "设计仓容（吨）",
    dataIndex: "sjcr",
    slotName: "sjcr",
    align: "center",
  },
  {
    title: "其他仓型使用说明",
    dataIndex: "qtcxsysm",
    slotName: "qtcxsysm",
    align: "center",
  },
  {
    title: "+",
    dataIndex: "edit",
    slotName: "edit",
    titleSlotName: 'editHeader',
    align: "center",
  },
]);
const deleteItem = (record) => {
  caxxReqVOList.value = caxxReqVOList.value.filter(item => item.index !== record.index)
  caxxReqVOList.value.forEach((item, index) => {
    item.index = index
  })
}
const addItem = () => {
  console.log()
  caxxReqVOList.value.unshift({})
  caxxReqVOList.value.forEach((item, index) => {
    item.index = index
  })
}
const rules = ref({});
let active = ref('单位信息')
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  // dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      // 获取数据
    } finally {
      formLoading.value = false
    }
  }
}
const resetForm = () => {
  // list.value = []
}
defineExpose({open}) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调


const formRef1 = ref();
const formRef2 = ref();
const formRef3 = ref();
const formRef4 = ref();
const formRules1 = reactive<FormRules>({
  dwmc: [{required: true, message: '请输入', trigger: 'blur'}],
  tyxydm: [{required: true, message: '请输入', trigger: 'blur'}],
  fddbr: [{required: true, message: '请输入', trigger: 'blur'}],
  sfzh: [{required: true, message: '请输入', trigger: 'blur'}],
  lxfs: [{required: true, message: '请输入', trigger: 'blur'}],
  zcrq: [{required: true, message: '请输入', trigger: 'blur'}],
  zcdz: [{required: true, message: '请输入', trigger: 'blur'}],
  yzbm: [{required: true, message: '请输入', trigger: 'blur'}],
  qyxz: [{required: true, message: '请选择', trigger: 'blur'}],
  resid: [{required: true, message: '请选择', trigger: 'blur'}],
})
const formRules2 = reactive<FormRules>({
  kqmc: [{required: true, message: '请输入', trigger: 'blur'}],
  kqdm: [{required: true, message: '请输入', trigger: 'blur'}],
  yzbm: [{required: true, message: '请输入', trigger: 'blur'}],
  sheng: [{required: true, message: '请输入', trigger: 'blur'}],
  shi: [{required: true, message: '请输入', trigger: 'blur'}],
  xian: [{required: true, message: '请输入', trigger: 'blur'}],
  jtdz: [{required: true, message: '请输入', trigger: 'blur'}],
  kqfzr: [{required: true, message: '请输入', trigger: 'blur'}],
  lxdh: [{required: true, message: '请输入', trigger: 'blur'}],
  zdmj: [{required: true, message: '请输入', trigger: 'blur'}],
  kqzt: [{required: true, message: '请输入', trigger: 'blur'}],
  kqmc: [{required: true, message: '请输入', trigger: 'blur'}],
  wtbgckj: [{required: true, message: '请输入', trigger: 'blur'}],
  jd: [{required: true, message: '请输入', trigger: 'blur'}],
  wd: [{required: true, message: '请输入', trigger: 'blur'}],
  resid: [{required: true, message: '请输入', trigger: 'blur'}],
})
const formRules3 = reactive<FormRules>({
  // jd:[{required: true, message: '请输入', trigger: 'blur'}],
})
const formRules4 = reactive<FormRules>({})
const submitForm = async () => {
  // if(!formRef1.value.validate() || !formRef2.value.validate() || !formRef3.value.validate() || !formRef4.value.validate()){
  //   return
  // }


  // 校验表单
  // 提交请求
  formLoading.value = true
  try {
    if (formType.value === 'create') {
      formData.value.dwxxReqVO = dwxxReqVO.value;
      formData.value.kqxxReqVO = kqxxReqVO.value;
      formData.value.caxxReqVOList = caxxReqVOList.value;
      formData.value.cwxxReqVO = cwxxReqVO.value;

      // console.log(formData.value, '提交的表单')
      // return
      await DeliveryWarehouseSelectApi.createByAll(formData.value)
      Message.success(t('common.createSuccess'))
      // message.success(t('common.createSuccess'))
    } else {
      Message.success(t('common.updateSuccess'))
      // message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}
const getDivision = async (areaCode?: number) => {
  try {
    return await AdministrativeDivisionApi.getList({areaCode});
  } catch (err) {
    throw err
  }
}


const shengList = ref([])
const shiList = ref([])
const xianList = ref([])
watch(() => kqxxReqVO.value.sheng, async (newValue) => {
  kqxxReqVO.value.shi = ''
  kqxxReqVO.value.xian = ''
  if (newValue) {
    shiList.value = await getDivision(newValue)
  } else {
    shiList.value = []
  }
});
watch(() => kqxxReqVO.value.shi, async (newValue) => {
  kqxxReqVO.value.xian = ''
  if (newValue) {
    xianList.value = await getDivision(newValue)
  } else {
    xianList.value = []
  }
});
onMounted(async () => {
  shengList.value = await getDivision()
})
/** 重置表单 */

</script>
<style>

.arco-trigger-popup {
  z-index: 2400 !important;
}
.el-date-editor.el-input, .el-date-editor.el-input__wrapper {
  height: var(--el-input-height, var(--el-component-size));
  width: var(--el-date-editor-width);
  width: 100%;
}
</style>