322 lines
10 KiB
Vue
322 lines
10 KiB
Vue
<template>
|
||
<el-drawer
|
||
direction="rtl"
|
||
size="50%"
|
||
:title="isEdit ? '编辑店铺数据库配置' : '新增店铺数据库配置'"
|
||
:visible.sync="myVisible"
|
||
>
|
||
<div class="scrollable-content">
|
||
<el-form
|
||
ref="formRef"
|
||
label-width="120px"
|
||
:model="innerFormData"
|
||
:rules="rules"
|
||
>
|
||
<el-form-item label="店铺名字" prop="storeId" v-if="!isEdit">
|
||
<el-select v-model="innerFormData.storeId" placeholder="请选择店铺">
|
||
<el-option
|
||
v-for="item in storeIdOptions"
|
||
:key="item.store_id"
|
||
:label="item.store_name"
|
||
:value="item.store_id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="店铺名字" prop="storeName" v-if="isEdit">
|
||
<el-input v-model="innerFormData.storeName" :disabled="isEdit"/>
|
||
</el-form-item>
|
||
<el-form-item label="数据库IP地址" prop="dbIp" >
|
||
<el-input v-model="innerFormData.dbIp" placeholder="127.0.0.1" clearable/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="数据库类型" prop="dbType">
|
||
<el-select
|
||
v-model="innerFormData.dbType"
|
||
placeholder="请选择数据库类型"
|
||
>
|
||
<el-option label="SQL Server" value="sqlserver" />
|
||
<el-option label="MySQL" value="mysql" />
|
||
<el-option label="Oracle" value="oracle" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="数据库名称" prop="dbName">
|
||
<el-input v-model="innerFormData.dbName" placeholder="hbposv10" clearable/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="数据库端口" prop="dbPort">
|
||
<el-input v-model="innerFormData.dbPort" type="number" placeholder="1433"/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="数据库用户名" prop="dbUsername">
|
||
<el-input v-model="innerFormData.dbUsername" placeholder="sa" clearable/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="数据库密码" prop="dbPassword">
|
||
<el-input v-model="innerFormData.dbPassword" type="password" show-password/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="定时同步表达式" prop="cronExpression">
|
||
<el-input v-model="innerFormData.cronExpression" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="同步间隔时间" prop="shopGapTime">
|
||
<el-input v-model="innerFormData.shopGapTime" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="刷新时间" prop="refreshTime">
|
||
<el-date-picker
|
||
v-model="innerFormData.refreshTime"
|
||
placeholder="请选择刷新时间"
|
||
type="datetime"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
>
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="是否有外网访问" prop="hasInternet">
|
||
<el-radio-group v-model="innerFormData.hasInternet">
|
||
<el-radio :label="'1'">有</el-radio>
|
||
<el-radio :label="'0'">无</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="同步模式" prop="syncMode">
|
||
<el-radio-group v-model="innerFormData.syncMode">
|
||
<el-radio :label="'1'">定时同步</el-radio>
|
||
<el-radio :label="'2'">间隔同步</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="是否启用" prop="hasStart">
|
||
<el-radio-group v-model="innerFormData.hasStart">
|
||
<el-radio :label="'1'">是</el-radio>
|
||
<el-radio :label="'0'">否</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="是否双向同步" prop="isTowSync">
|
||
<el-radio-group v-model="innerFormData.isTowSync">
|
||
<el-radio :label="'1'">是</el-radio>
|
||
<el-radio :label="'0'">否</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="优先更新方式" prop="priorityMode">
|
||
<el-radio-group v-model="innerFormData.priorityMode">
|
||
<el-radio :label="'1'">手动</el-radio>
|
||
<el-radio :label="'2'">自动</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="允许负库存售卖" prop="isNegativeAllowed">
|
||
<el-radio-group v-model="innerFormData.isNegativeAllowed">
|
||
<el-radio :label="'1'">是</el-radio>
|
||
<el-radio :label="'0'">否</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="备注信息" prop="remark">
|
||
<el-input v-model="innerFormData.remark" type="textarea" />
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="drawer-footer">
|
||
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
||
<el-button @click="myVisible = false">取消</el-button>
|
||
</div>
|
||
</el-drawer>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
visible: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
formData: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
storeIdOptions: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
isEdit: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
// 创建表单数据的副本，避免直接修改props
|
||
innerFormData: this.initFormData(),
|
||
rules: {
|
||
storeId: [{ required: true, message: '请选择店铺', trigger: 'change' }],
|
||
// storeName: [{ required: true, message: '请输入店铺名字', trigger: 'blur' }],
|
||
dbIp: [
|
||
{ required: true, message: '请输入数据库IP地址', trigger: 'blur' },
|
||
{
|
||
pattern:
|
||
/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
|
||
message: '请输入有效的IP地址',
|
||
trigger: 'blur',
|
||
},
|
||
],
|
||
dbType: [
|
||
{ required: true, message: '请选择数据库类型', trigger: 'change' },
|
||
],
|
||
dbName: [
|
||
{ required: true, message: '请输入数据库名称', trigger: 'blur' },
|
||
],
|
||
dbPort: [
|
||
{ required: true, message: '请输入数据库端口', trigger: 'blur' },
|
||
],
|
||
dbUsername: [
|
||
{ required: true, message: '请输入数据库用户名', trigger: 'blur' },
|
||
],
|
||
dbPassword: [
|
||
{ required: true, message: '请输入数据库密码', trigger: 'blur' },
|
||
],
|
||
hasInternet: [
|
||
{
|
||
required: true,
|
||
message: '请选择是否有外网访问',
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
syncMode: [
|
||
{ required: true, message: '请选择同步模式', trigger: 'change' },
|
||
],
|
||
hasStart: [
|
||
{ required: true, message: '请选择是否启用', trigger: 'change' },
|
||
],
|
||
remark: [
|
||
{ required: true, message: '请输入备注信息', trigger: 'change' },
|
||
],
|
||
// refreshTime: [
|
||
// { required: true, message: '请选择刷新时间', trigger: 'change' },
|
||
// ],
|
||
isTowSync: [
|
||
{
|
||
required: true,
|
||
message: '请选择是否双向同步',
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
priorityMode: [
|
||
{
|
||
required: true,
|
||
message: '请选择优先更新方式',
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
isNegativeAllowed: [
|
||
{
|
||
required: true,
|
||
message: '请选择是否允许负库存售卖',
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
cronExpression: [
|
||
{
|
||
required: true,
|
||
message: '请输入定时同步表达式',
|
||
trigger: 'blur',
|
||
},
|
||
],
|
||
},
|
||
myVisible: false,
|
||
}
|
||
},
|
||
watch: {
|
||
// 监听props变化，更新内部表单数据
|
||
formData: {
|
||
handler(newVal) {
|
||
this.innerFormData = this.cloneData(newVal)
|
||
this.$nextTick(() => {
|
||
this.$refs.formRef && this.$refs.formRef.validate()
|
||
})
|
||
},
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
},
|
||
methods: {
|
||
// 打开抽屉
|
||
open() {
|
||
this.myVisible = true
|
||
},
|
||
|
||
// 初始化表单数据
|
||
initFormData() {
|
||
return {
|
||
storeId: '',
|
||
storeName:'',
|
||
dbIp: '',
|
||
dbType: '',
|
||
dbName: '',
|
||
dbPort: '',
|
||
dbUsername: '',
|
||
dbPassword: '',
|
||
hasInternet: '1',
|
||
syncMode: '1',
|
||
hasStart: '1',
|
||
cronExpression: '',
|
||
shopGapTime:'',
|
||
remark: '',
|
||
refreshTime: '',
|
||
isTowSync: '0',
|
||
priorityMode: '1',
|
||
isNegativeAllowed:'0',
|
||
}
|
||
},
|
||
|
||
// 深拷贝数据
|
||
cloneData(data) {
|
||
return JSON.parse(JSON.stringify(data))
|
||
},
|
||
|
||
// 重置表单
|
||
resetForm() {
|
||
this.innerFormData = this.isEdit
|
||
? this.cloneData(this.formData)
|
||
: this.initFormData()
|
||
this.$refs.formRef && this.$refs.formRef.resetFields()
|
||
},
|
||
|
||
handleSubmit() {
|
||
this.$refs.formRef.validate((valid) => {
|
||
if (valid) {
|
||
this.$emit('save', this.cloneData(this.innerFormData))
|
||
} else {
|
||
this.$message.error('请检查表单信息是否正确或者完整')
|
||
return false;
|
||
}
|
||
})
|
||
},
|
||
// 新增：供父组件调用，手动关闭抽屉
|
||
closeDrawer() {
|
||
this.myVisible = false;
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep .el-drawer__header {
|
||
margin-bottom: 15px !important;
|
||
}
|
||
.drawer-footer {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
padding: 15px 20px;
|
||
border-top: 1px solid #ebeef5;
|
||
}
|
||
|
||
.scrollable-content {
|
||
padding: 12px;
|
||
height: calc(100vh - 150px);
|
||
overflow-y: auto;
|
||
}
|
||
</style>
|