<template>
|
<Modal
|
:model-value="modelValue"
|
title="Common Modal dialog box title"
|
class-name="data-table-add"
|
@update:model-value="(v) => this.$emit('update:modelValue', v)"
|
>
|
<Form :model="form" :label-width="110">
|
<template v-if="model != 'info'">
|
<FormItem label="仓库编码：">
|
<Input v-model="form.code" size="small"></Input>
|
</FormItem>
|
<FormItem label="仓库名称：">
|
<Input v-model="form.name" size="small"></Input>
|
</FormItem>
|
<FormItem label="仓库负责人：">
|
<Input v-model="form.leader" size="small"></Input>
|
</FormItem>
|
<FormItem label="仓库电话：">
|
<Input v-model="form.tel" size="small"></Input>
|
</FormItem>
|
<FormItem label="上级仓库编码：">
|
<Input v-model="form.topCode" size="small"></Input>
|
</FormItem>
|
<FormItem label="地址：">
|
<Input v-model="form.address" size="small"></Input>
|
</FormItem>
|
<FormItem>
|
<Checkbox v-model="form.isThisLevel" size="small">是否本级</Checkbox>
|
</FormItem>
|
<FormItem>
|
<Checkbox v-model="form.isEscrow" size="small">是否代管</Checkbox>
|
</FormItem>
|
<FormItem>
|
<Checkbox v-model="form.isEnable" size="small">是否启用</Checkbox>
|
</FormItem>
|
</template>
|
<template v-else>
|
<FormItem label="仓库编码："> {{ this.form.code }} </FormItem>
|
<FormItem label="仓库名称："> {{ this.form.name }} </FormItem>
|
<FormItem label="仓库负责人："> {{ this.form.leader }} </FormItem>
|
<FormItem label="仓库电话："> {{ this.form.tel }} </FormItem>
|
<FormItem label="上级仓库编码："> {{ this.form.topCode }} </FormItem>
|
<FormItem label="地址："> {{ this.form.address }} </FormItem>
|
<FormItem>
|
<Checkbox v-model="form.isThisLevel" size="small" disabled
|
>是否本级</Checkbox
|
>
|
</FormItem>
|
<FormItem>
|
<Checkbox v-model="form.isEscrow" size="small" disabled
|
>是否代管</Checkbox
|
>
|
</FormItem>
|
<FormItem>
|
<Checkbox v-model="form.isEnable" size="small" disabled
|
>是否启用</Checkbox
|
>
|
</FormItem>
|
</template>
|
<Spin fix :show="loading" />
|
</Form>
|
<template #footer>
|
<template v-if="model != 'info'">
|
<Space>
|
<Button type="text" @click="onCancel">取消</Button>
|
<Button type="primary" @click="onOk" :loading="loading">确定</Button>
|
</Space>
|
</template>
|
<template v-else>
|
<Button type="primary" @click="onClose">关闭</Button>
|
</template>
|
</template>
|
</Modal>
|
</template>
|
|
<script>
|
export default {
|
name: "ExampleDataTableAdd",
|
props: {
|
modelValue: Boolean,
|
model: {
|
type: String,
|
default: () => "info",
|
},
|
dataId: String,
|
},
|
data() {
|
return {
|
form: {
|
code: "",
|
name: "",
|
leader: "",
|
tel: "",
|
topCode: "",
|
address: "",
|
isThisLevel: false,
|
isEscrow: false,
|
isEnable: false,
|
},
|
loading: false,
|
};
|
},
|
methods: {
|
onOk() {
|
this.loading = true;
|
setTimeout(() => {
|
this.loading = false;
|
this.onClose();
|
}, 2000);
|
},
|
onCancel() {
|
this.onClose();
|
},
|
onClose() {
|
this.$emit("update:modelValue", false);
|
},
|
loadData() {
|
if (!this.dataId) this.clear();
|
else this.loadFormData();
|
},
|
loadFormData() {
|
let data = this.$parent.data.find((d) => d.code == this.dataId);
|
Object.assign(this.form, data);
|
},
|
clear() {
|
this.form.code = "";
|
this.form.name = "";
|
this.form.leader = "";
|
this.form.tel = "";
|
this.form.topCode = "";
|
this.form.address = "";
|
this.form.isThisLevel = false;
|
this.form.isEscrow = false;
|
this.form.isEnable = false;
|
},
|
},
|
watch: {
|
modelValue(visible) {
|
if (visible) {
|
this.loadData();
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="less">
|
.data-table-add {
|
.ivu-modal {
|
top: 40px;
|
}
|
.ivu-checkbox-input[disabled] {
|
cursor: default;
|
}
|
.ivu-checkbox-disabled .ivu-checkbox-inner {
|
border-color: #666;
|
background-color: #fff;
|
}
|
.ivu-checkbox-disabled.ivu-checkbox-checked .ivu-checkbox-inner:after {
|
border-color: #666;
|
}
|
.ivu-checkbox-disabled + span {
|
color: #666;
|
}
|
}
|
</style>
|
