You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
3.7 KiB
150 lines
3.7 KiB
<template>
|
|
<div>
|
|
<a-drawer title="新增預製卡" :destroyOnClose="true" :visible="visible" :body-style="{ paddingBottom: '80px' }"
|
|
@close="onClose">
|
|
<a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
|
|
<a-form-model-item label="名稱" prop="name" :rules="{
|
|
required: true,
|
|
message: '必填',
|
|
trigger: 'blur',
|
|
}">
|
|
<a-input v-model="form.name" />
|
|
</a-form-model-item>
|
|
<a-form-model-item label="數量" prop="number" :rules="{
|
|
required: true,
|
|
message: '必填',
|
|
trigger: 'blur',
|
|
}">
|
|
<a-input v-model="form.number" />
|
|
</a-form-model-item>
|
|
<a-form-model-item label="使用天數" prop="days" :rules="{
|
|
required: true,
|
|
message: '必填',
|
|
trigger: 'blur',
|
|
}">
|
|
<a-input v-model="form.days" />
|
|
</a-form-model-item>
|
|
<!-- <a-form-model-item label="代理" ref="agent" prop="agent">
|
|
<a-select v-model="form.agent_id" placeholder="請選擇">
|
|
<a-select-option :value="v.id" v-for="v of agentList" :key="v.id">
|
|
{{v.name}}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-model-item> -->
|
|
<a-form-model-item label="開卡到期日" prop="expire">
|
|
<a-date-picker @change="onChange" :value="expire" />
|
|
</a-form-model-item>
|
|
|
|
<!-- <a-form-model-item label="是否有效">
|
|
<a-switch default-checked v-model="form.status" />
|
|
</a-form-model-item> -->
|
|
|
|
</a-form-model>
|
|
<div :style="{
|
|
position: 'absolute',
|
|
right: 0,
|
|
bottom: 0,
|
|
width: '100%',
|
|
borderTop: '1px solid #e9e9e9',
|
|
padding: '10px 16px',
|
|
background: '#fff',
|
|
textAlign: 'right',
|
|
zIndex: 1,
|
|
}">
|
|
<a-button :style="{ marginRight: '8px' }" @click="onClose">
|
|
關閉
|
|
</a-button>
|
|
<a-button type="primary" @click="onSubmit">
|
|
送出
|
|
</a-button>
|
|
</div>
|
|
</a-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from 'moment'
|
|
|
|
import { addPrecard } from '@/services/card'
|
|
|
|
import { getAgents } from '@/services/site'
|
|
|
|
export default {
|
|
name: 'AddForm',
|
|
data() {
|
|
return {
|
|
labelCol: { span: 8 },
|
|
wrapperCol: { span: 16 },
|
|
roleList: [],
|
|
form: {
|
|
name: '',
|
|
number: null,
|
|
days: null,
|
|
expire_time: null
|
|
},
|
|
rules: {
|
|
},
|
|
agentList: []
|
|
}
|
|
},
|
|
props: {
|
|
visible: Boolean
|
|
},
|
|
async mounted() {
|
|
//取得代理
|
|
let res = await getAgents()
|
|
this.agentList = res.data
|
|
},
|
|
computed: {
|
|
expire() {
|
|
if (this.form.expire_time) {
|
|
return moment.unix(this.form.expire_time)
|
|
} else {
|
|
return null
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
onChange(date, dateString) {
|
|
if (date) {
|
|
this.form.expire_time = date.format('X')
|
|
} else {
|
|
this.form.expire_time = 0
|
|
}
|
|
},
|
|
onClose() {
|
|
this.$refs.ruleForm.resetFields();
|
|
this.$emit('close', true)
|
|
},
|
|
onSubmit() {
|
|
this.$refs.ruleForm.validate(async valid => {
|
|
if (valid) {
|
|
let res = await addPrecard(this.form)
|
|
if (res.code === 200) {
|
|
this.$refs.ruleForm.resetFields();
|
|
this.$emit('add', true)
|
|
} else {
|
|
this.$message.error('新增失敗')
|
|
}
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.ant-drawer-header {
|
|
background-color: #87e8de !important;
|
|
|
|
.ant-drawer-title {
|
|
color: #FFF !important;
|
|
}
|
|
}
|
|
|
|
.ant-drawer-content-wrapper {
|
|
width: 50% !important;
|
|
}
|
|
</style> |