119 lines
3.5 KiB
Vue
119 lines
3.5 KiB
Vue
<!--
|
||
* @Descripttion: (物流公司/tb_logistics_company 添加弹窗)
|
||
* @version: (1.0)
|
||
* @Author: (lwh)
|
||
* @Date: (2023-06-18)
|
||
* @LastEditors: (lwh)
|
||
* @LastEditTime: (2023-06-18)
|
||
-->
|
||
<template>
|
||
<el-dialog v-model="props.modelValue" title="添加物流公司信息" width="700px" @closed="closeDialog" @open="openDialog">
|
||
<el-form ref="formRef" :model="formData" :rules="rules">
|
||
<el-row :gutter="20">
|
||
|
||
|
||
<el-col :lg="24">
|
||
<el-form-item :label-width="labelWidth" label="物流公司名称" prop="logisticsCompanyName">
|
||
<el-input v-model="formData.logisticsCompanyName" placeholder="请输入物流公司名称" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :lg="24">
|
||
<el-form-item :label-width="labelWidth" label="物流公司编码" prop="logisticsCompanyCode">
|
||
<el-input v-model="formData.logisticsCompanyCode" placeholder="请输入物流公司编码" />
|
||
<div style="color:#8c8c8c;font-size: 11px;">用于快递100API查询物流信息，请参照 <el-link style="font-size: 11px;" type="primary"
|
||
@click="goTokuaidi100()">物流公司编码表</el-link> </div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :lg="12">
|
||
<el-form-item :label-width="labelWidth" label="排序" prop="logisticsCompanySort">
|
||
<el-input-number v-model.number="formData.logisticsCompanySort" controls-position="right" :min="0" />
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
</el-row>
|
||
</el-form>
|
||
|
||
<template #footer>
|
||
<div key="dialog-footer">
|
||
<el-button type="primary" @click="handleAddClick(formRef)">添加</el-button>
|
||
<el-button @click="handleResetClick(formRef)">重置</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
|
||
<script setup>
|
||
import { reactive, ref, watch } from "vue";
|
||
import { ElMessage } from 'element-plus'
|
||
import modal from '@/plugins/modal.js'
|
||
import { addOrUpdateLogisticsCompany } from '@/api/business/LogisticsManage/LogisticsCompanys/logisticsCompany.js';
|
||
|
||
|
||
// 打开弹窗时回调
|
||
const openDialog = async () => {
|
||
|
||
|
||
}
|
||
|
||
// -业务参数
|
||
|
||
|
||
// -业务方法
|
||
const goTokuaidi100 = () => {
|
||
window.open("https://api.kuaidi100.com/manager/v2/express-company")
|
||
}
|
||
|
||
|
||
// -基础参数
|
||
const labelWidth = 120;
|
||
const formRef = ref();
|
||
const { proxy } = getCurrentInstance()
|
||
const emits = defineEmits(["update:modelValue"]);
|
||
const formData = reactive({
|
||
logisticsCompanySort: 100
|
||
});
|
||
const props = defineProps({
|
||
modelValue: Boolean,
|
||
done: Function,
|
||
});
|
||
const imgData = ref({
|
||
fileDir: "LogisticsCompany"
|
||
})
|
||
|
||
// 验证
|
||
const rules = reactive({
|
||
logisticsCompanyGuid: [{ required: true, message: "不能为空", trigger: "blur", type: "number" }],
|
||
logisticsCompanyName: [{ required: true, message: "物流公司名称不能为空", trigger: "blur" }],
|
||
logisticsCompanyCode: [{ required: true, message: "物流公司编码不能为空", trigger: "blur" }],
|
||
logisticsCompanySort: [{ required: true, message: "排序不能为空", trigger: "blur", type: "number" }],
|
||
});
|
||
|
||
// -基础方法
|
||
|
||
// 提交
|
||
const handleAddClick = async (formEl) => {
|
||
if (!formEl) return;
|
||
formEl.validate(async (valid) => {
|
||
if (!valid) {
|
||
return;
|
||
}
|
||
|
||
|
||
const { code } = await addOrUpdateLogisticsCompany(formData);
|
||
if (code == 200) {
|
||
modal.msgSuccess('添加成功')
|
||
closeDialog();
|
||
}
|
||
});
|
||
};
|
||
const closeDialog = () => {
|
||
handleResetClick(formRef.value);
|
||
props.done();
|
||
emits("update:modelValue", false);
|
||
};
|
||
const handleResetClick = async (formEl) => {
|
||
if (!formEl) return;
|
||
formEl.resetFields();
|
||
};
|
||
</script> |