|
@@ -0,0 +1,295 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <a-modal
|
|
|
+ class="modalBox"
|
|
|
+ :title="titleText"
|
|
|
+ v-model="isshow"
|
|
|
+ :footer="null"
|
|
|
+ @cancle="cancel"
|
|
|
+ :width="800"
|
|
|
+ :centered="true">
|
|
|
+ <a-form :form="form" @submit="handleSubmit">
|
|
|
+ <!-- 箱体类型名称 -->
|
|
|
+ <a-form-item label="箱体类型" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
|
|
|
+ <a-input
|
|
|
+ placeholder="请输入箱体类型名称(最多30个字符)"
|
|
|
+ allowClear
|
|
|
+ :maxLength="30"
|
|
|
+ id="roleModal-name"
|
|
|
+ v-decorator="['formData.name', {
|
|
|
+ initialValue: formData.name,getValueFromEvent: $filterEmpty,
|
|
|
+ rules: [{ required: true, message: '请输入箱体类型名称(最多30个字符)!' }] }]" />
|
|
|
+ </a-form-item>
|
|
|
+ <!-- 内置箱体数量 -->
|
|
|
+ <a-form-item
|
|
|
+ label="内置箱体数量"
|
|
|
+ :label-col="{ span: 5 }"
|
|
|
+ :wrapper-col="{ span: 16 }"
|
|
|
+ >
|
|
|
+ <a-select
|
|
|
+ allowClear
|
|
|
+ @change="handleNumChange"
|
|
|
+ placeholder="请选择"
|
|
|
+ v-decorator="['formData.num', {
|
|
|
+ initialValue: formData.num,
|
|
|
+ rules: [{ required: true, message: '请选择箱体类型!' }] }]">
|
|
|
+ <a-select-option v-for="item in numList" :value="item" :key="item">
|
|
|
+ {{ item }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ <!-- 箱体限投 -->
|
|
|
+ <a-row
|
|
|
+ type="flex"
|
|
|
+ align="middle"
|
|
|
+ v-for="(k, index) in keys"
|
|
|
+ :key="k">
|
|
|
+ <a-col span="12">
|
|
|
+ <!-- 投放开始时间 -->
|
|
|
+ <a-form-item
|
|
|
+ :label=" '内置'+(index+1)+'号箱限投(kg)'"
|
|
|
+ :required="true"
|
|
|
+ :label-col=" { span: 10 }"
|
|
|
+ :wrapper-col=" { span: 14 }"
|
|
|
+ >
|
|
|
+ <a-input
|
|
|
+ type="number"
|
|
|
+ placeholder="请输入数字(最大1000)"
|
|
|
+ v-decorator="[
|
|
|
+ `formData.settings[${k}].limitNum`,
|
|
|
+ {
|
|
|
+ validateTrigger: ['change', 'blur'],
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true, message: '请输入限投数量(最大1000)!'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ validator: limitNumChange
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-form-item ><span class="linenums">至</span></a-form-item>
|
|
|
+ <a-col span="9">
|
|
|
+ <!-- 请选择分类 -->
|
|
|
+ <a-form-item
|
|
|
+ :label="''"
|
|
|
+ :required="false"
|
|
|
+ :wrapper-col="{ span: 18 }">
|
|
|
+ <v-select
|
|
|
+ ref="orderStatus"
|
|
|
+ id="addBoxModal-status"
|
|
|
+ code="SETTLE_STATUS_ALL"
|
|
|
+ placeholder="请选择分类"
|
|
|
+ allowClear
|
|
|
+ v-decorator="[
|
|
|
+ `formData.settings[${k}].type`,
|
|
|
+ {
|
|
|
+ validateTrigger: ['change', 'blur'],
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true, message: '请选择分类!'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ]">
|
|
|
+ </v-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-form-item :wrapper-col="{ span: 24, offset: 10 }">
|
|
|
+ <a-button type="primary" @click="handleSubmit()" id="roleModal-handleSubmit" :style="{ marginRight: '15px' }">
|
|
|
+ 保存
|
|
|
+ </a-button>
|
|
|
+ <a-button :style="{ marginLeft: '15px' }" @click="handleCancel()" id="roleModal-handleCancel">
|
|
|
+ 取消
|
|
|
+ </a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ STable,
|
|
|
+ VSelect
|
|
|
+} from '@/components'
|
|
|
+import {
|
|
|
+ saveRolePower
|
|
|
+} from '@/api/power-role.js'
|
|
|
+import moment from 'moment'
|
|
|
+import numberToFixed from '@/utils/util.js'
|
|
|
+export default {
|
|
|
+ name: 'RoleModal',
|
|
|
+ components: {
|
|
|
+ STable,
|
|
|
+ VSelect
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ visible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ type: Object,
|
|
|
+ default: function () {
|
|
|
+ return {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ id: 0,
|
|
|
+ titleText: '新增',
|
|
|
+ isshow: this.visible,
|
|
|
+ formLayout: 'horizontal',
|
|
|
+ form: this.$form.createForm(this, {
|
|
|
+ name: 'AddBoxModal'
|
|
|
+ }),
|
|
|
+ numList: [2, 4, 5], // 内置箱体数量选择
|
|
|
+ formData: {
|
|
|
+ name: '',
|
|
|
+ num: '',
|
|
|
+ settings: []
|
|
|
+ },
|
|
|
+ keys: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ numberToFixed,
|
|
|
+ cancel (e) {
|
|
|
+ this.clear()
|
|
|
+ this.$emit('close')
|
|
|
+ },
|
|
|
+ // 校验
|
|
|
+ limitNumChange (rule, value, callback) {
|
|
|
+ console.log('value', value, rule)
|
|
|
+ const times = this.form.getFieldValue('times')
|
|
|
+ if ((value <= 0 || value > 1000) && value !== '') {
|
|
|
+ callback(new Error('请输入1到1000以内的数字'))
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+ },
|
|
|
+ handleChange (e) {
|
|
|
+ console.log(e, e.target.value, 'eeeeeee')
|
|
|
+ const value = e.target.value
|
|
|
+ const ret = this.numberToFixed(value, 2, 1000)
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.formData.settings[num][key] = Number(ret)
|
|
|
+ })
|
|
|
+ // this.value = this.numberToFixed(value, 2, this.max)
|
|
|
+ // this.$emit('change', this.value)
|
|
|
+ },
|
|
|
+ // 内置箱体选择修改
|
|
|
+ handleNumChange (v) {
|
|
|
+ console.log(v, 'vvvvvvvvvv')
|
|
|
+ const arr = []
|
|
|
+ const setting = []
|
|
|
+ for (let x = 0; x < v; x++) {
|
|
|
+ arr.push(x)
|
|
|
+ const p = {
|
|
|
+ limitNum: '',
|
|
|
+ type: ''
|
|
|
+ }
|
|
|
+ setting.push(p)
|
|
|
+ }
|
|
|
+ this.formData.settings = setting
|
|
|
+ this.keys = arr
|
|
|
+ console.log(this.keys, 'this.keys')
|
|
|
+ },
|
|
|
+ // 小数点后两位
|
|
|
+ // numberToFixed (key, index) {
|
|
|
+ // console.log(index, key, 'eeeeeeeee')
|
|
|
+ // const val = this.form.getFieldValue('settings')
|
|
|
+ // console.log(val, 'val')
|
|
|
+ // const ret = numberToFixed(val, 2, 1000)
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // this.formData.settings[num][key] = Number(ret)
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ // 保存提交
|
|
|
+ handleSubmit () {
|
|
|
+ const _this = this
|
|
|
+ this.form.validateFields((err, values) => {
|
|
|
+ console.log(values, ' formData.type222222222')
|
|
|
+ if (!err) {
|
|
|
+ saveRolePower(Object.assign(this.formData, values.formData)).then(res => {
|
|
|
+ console.log(res, 'res--save')
|
|
|
+ if (res.status + '' === '200') {
|
|
|
+ this.$message.success(res.message ? res.message : '保存成功')
|
|
|
+ this.$emit('refresh')
|
|
|
+ setTimeout(function () {
|
|
|
+ _this.cancel()
|
|
|
+ }, 300)
|
|
|
+ } else {
|
|
|
+ // this.$message.error(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 取消
|
|
|
+ handleCancel () {
|
|
|
+ this.cancel()
|
|
|
+ },
|
|
|
+ clear () {
|
|
|
+ this.form.resetFields()
|
|
|
+ delete this.formData.id
|
|
|
+ this.formData.name = ''
|
|
|
+ this.formData.isEnable = ''
|
|
|
+ this.formData.remarks = ''
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted () {},
|
|
|
+ beforeCreate () {
|
|
|
+ this.form = this.$form.createForm(this, {
|
|
|
+ name: 'AddBoxModal'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ visible (newValue, oldValue) {
|
|
|
+ this.isshow = newValue
|
|
|
+ },
|
|
|
+ isshow (newValue, oldValue) {
|
|
|
+ if (newValue) {
|
|
|
+ this.form.getFieldDecorator('keys', {
|
|
|
+ initialValue: [],
|
|
|
+ preserve: true
|
|
|
+ })
|
|
|
+ this.id = 0
|
|
|
+ if (this.data.id) { // 编辑
|
|
|
+ this.titleText = '编辑'
|
|
|
+ this.formData = Object.assign({}, this.data)
|
|
|
+ delete this.formData.no
|
|
|
+ this.formData.isEnable = Number(this.formData.isEnable)
|
|
|
+ console.log(this.formData, 'this.formData')
|
|
|
+ } else {
|
|
|
+ this.titleText = '新增'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.cancel()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .modalBox {}
|
|
|
+
|
|
|
+ .ant-modal-footer {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .dynamic-delete-button {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .linenums{
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+</style>
|