<script setup> 
 | 
import { ref, nextTick, watch } from 'vue'; 
 | 
import { get, post, postBlob, postForm } from '@/utils/request.js' 
 | 
import { formatMessage } from '@/utils/localeUtils.js'; 
 | 
import { message } from 'ant-design-vue'; 
 | 
  
 | 
const formTable = ref(null); 
 | 
const submitButton = ref(null); 
 | 
const isSave = ref(true); 
 | 
const open = ref(false); 
 | 
const initFormData = {} 
 | 
let formData = ref(initFormData); 
 | 
  
 | 
let treeData = ref(null); 
 | 
  
 | 
const emit = defineEmits(['tableReload']) 
 | 
  
 | 
const handleOk = (e) => { 
 | 
    nextTick(() => { 
 | 
        setTimeout(() => { 
 | 
            submitButton.value.$el.click(); 
 | 
        }, 100); 
 | 
    }); 
 | 
}; 
 | 
  
 | 
const onFinish = values => { 
 | 
    // console.log('Success:', values); 
 | 
    open.value = false; 
 | 
    formData.value.contain = JSON.stringify(locTypeSelected.value); 
 | 
    if(locTypeSelected.value.length == 0) { 
 | 
        formData.value.contain = ""; 
 | 
    } 
 | 
    post(isSave.value ? '/api/locType/save' : '/api/locType/update', formData.value).then((resp) => { 
 | 
        let result = resp.data; 
 | 
        if (result.code === 200) { 
 | 
            message.success(isSave.value ? formatMessage('page.add.success', '新增成功') : formatMessage('page.update.success', '更新成功')); 
 | 
        } else { 
 | 
            message.error(result.msg); 
 | 
        } 
 | 
        emit('tableReload', 'reload') 
 | 
        nextTick(() => { 
 | 
            formTable.value.resetFields() 
 | 
        }) 
 | 
    }) 
 | 
}; 
 | 
const onFinishFailed = errorInfo => { 
 | 
    console.log('Failed:', errorInfo); 
 | 
}; 
 | 
  
 | 
const userQueryList = ref(null); 
 | 
userQuery(); 
 | 
function userQuery() { 
 | 
    postForm('/api/user/query', {}).then(resp => { 
 | 
        let result = resp.data; 
 | 
        userQueryList.value = result.data; 
 | 
    }) 
 | 
} 
 | 
  
 | 
const locTypeQueryList = ref(null); 
 | 
const locTypeSelected = ref([]); 
 | 
locTypeQuery(); 
 | 
function locTypeQuery() { 
 | 
    post('/api/locType/tree', {}).then(resp => { 
 | 
        let result = resp.data; 
 | 
        locTypeQueryList.value = result.data; 
 | 
    }) 
 | 
} 
 | 
  
 | 
watch(formData, (newVal, oldVal) => { 
 | 
    if(formData.value.contain == null) { 
 | 
        locTypeSelected.value = []; 
 | 
        return 
 | 
    } 
 | 
  
 | 
    if(formData.value.contain.length == 0) { 
 | 
        locTypeSelected.value = []; 
 | 
    }else { 
 | 
        let contain = JSON.parse(formData.value.contain); 
 | 
        locTypeSelected.value = contain; 
 | 
    } 
 | 
}) 
 | 
  
 | 
defineExpose({ 
 | 
    open, 
 | 
    formData, 
 | 
    initFormData, 
 | 
    isSave, 
 | 
    treeData, 
 | 
}) 
 | 
  
 | 
</script> 
 | 
  
 | 
<script> 
 | 
export default { 
 | 
    name: '库位类型-edit' 
 | 
} 
 | 
</script> 
 | 
  
 | 
<template> 
 | 
    <div> 
 | 
        <a-modal v-model:open="open" 
 | 
            :title="isSave ? formatMessage('page.add', '添加') : formatMessage('page.edit', '编辑')" @ok="handleOk" 
 | 
            style="width: 600px;"> 
 | 
            <a-form :model="formData" ref="formTable" name="formTable" :label-col="{ span: 8 }" 
 | 
                :wrapper-col="{ span: 16 }" style="display: flex;justify-content: space-between;flex-wrap: wrap;" 
 | 
                autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed"> 
 | 
                <a-form-item :label="formatMessage('db.man_loc_area_type.parent_id', '上级类型')" name="parentId" 
 | 
                    style="width: 250px;" :rules="[{ required: true, message: '上级区域不能为空!' }]"> 
 | 
                    <a-tree-select v-model:value="formData.parentId" show-search style="width: 100%" 
 | 
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" 
 | 
                        :placeholder="formatMessage('page.input', '请输入')" allow-clea tree-data-simple-mode 
 | 
                        :tree-data="treeData" tree-node-filter-prop="name" :field-names="{ 
 | 
                            children: 'children', 
 | 
                            label: 'name', 
 | 
                            value: 'id', 
 | 
                        }"> 
 | 
                        <template #title="{ value: id, name }"> 
 | 
                            {{ name }} 
 | 
                        </template> 
 | 
                    </a-tree-select> 
 | 
                </a-form-item> 
 | 
                <a-form-item :label="formatMessage('db.man_loc_type.name', '名称')" name="name" style="width: 250px;"> 
 | 
                    <a-input v-model:value="formData.name" /> 
 | 
                </a-form-item> 
 | 
                <a-form-item :label="formatMessage('db.man_loc_type.flag', '库位类型')" name="flag" style="width: 250px;"> 
 | 
                    <a-input v-model:value="formData.flag" /> 
 | 
                </a-form-item> 
 | 
                <a-form-item :label="formatMessage('db.man_loc_type.contain', '包含关系')" name="contain" 
 | 
                    style="width: 250px;"> 
 | 
                    <a-tree-select v-model:value="locTypeSelected" style="width: 100%" 
 | 
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" 
 | 
                        :placeholder="formatMessage('page.input', '请输入')" tree-checkable tree-default-expand-all 
 | 
                        :tree-data="locTypeQueryList" tree-node-filter-prop="name" :field-names="{ 
 | 
                            children: 'children', 
 | 
                            label: 'name', 
 | 
                            value: 'id', 
 | 
                        }"> 
 | 
                        <template #title="{ value: id, name }"> 
 | 
                            {{ name }} 
 | 
                        </template> 
 | 
                    </a-tree-select> 
 | 
                </a-form-item> 
 | 
                <a-form-item :label="formatMessage('db.man_loc_type.type', '类型')" name="type" style="width: 250px;"> 
 | 
                    <a-select v-model:value="formData.type" :options="[ 
 | 
                        { label: '大类', value: 1 }, 
 | 
                        { label: '小类', value: 2 }, 
 | 
                    ]"> 
 | 
                    </a-select> 
 | 
                </a-form-item> 
 | 
                <a-form-item :label="formatMessage('db.man_loc_type.uuid', '编号')" name="uuid" style="width: 250px;"> 
 | 
                    <a-input v-model:value="formData.uuid" /> 
 | 
                </a-form-item> 
 | 
                <a-form-item :label="formatMessage('db.man_loc_type.status', '状态')" name="status" style="width: 250px;"> 
 | 
                    <a-select v-model:value="formData.status" :options="[ 
 | 
                        { label: '正常', value: 1 }, 
 | 
                        { label: '禁用', value: 0 }, 
 | 
                    ]"> 
 | 
                    </a-select> 
 | 
                </a-form-item> 
 | 
                <a-form-item :label="formatMessage('db.man_loc_type.create_time', '添加时间')" name="createTime" 
 | 
                    style="width: 250px;"> 
 | 
                    <a-date-picker v-model:value="formData.createTime" show-time format="YYYY-MM-DD HH:mm:ss" 
 | 
                        value-format="YYYY-MM-DD HH:mm:ss" /> 
 | 
                </a-form-item> 
 | 
                <a-form-item :label="formatMessage('db.man_loc_type.create_by', '添加人员')" name="createBy" 
 | 
                    style="width: 250px;"> 
 | 
                    <a-select v-model:value="formData.createBy" :placeholder="formatMessage('common.select', '请选择')" 
 | 
                        style="width: 100%" show-search :options="userQueryList" optionFilterProp="label" 
 | 
                        optionLabelProp="label"> 
 | 
                    </a-select> 
 | 
                </a-form-item> 
 | 
                <a-form-item :label="formatMessage('db.man_loc_type.update_time', '修改时间')" name="updateTime" 
 | 
                    style="width: 250px;"> 
 | 
                    <a-date-picker v-model:value="formData.updateTime" show-time format="YYYY-MM-DD HH:mm:ss" 
 | 
                        value-format="YYYY-MM-DD HH:mm:ss" /> 
 | 
                </a-form-item> 
 | 
                <a-form-item :label="formatMessage('db.man_loc_type.update_by', '修改人员')" name="updateBy" 
 | 
                    style="width: 250px;"> 
 | 
                    <a-select v-model:value="formData.updateBy" :placeholder="formatMessage('common.select', '请选择')" 
 | 
                        style="width: 100%" show-search :options="userQueryList" optionFilterProp="label" 
 | 
                        optionLabelProp="label"> 
 | 
                    </a-select> 
 | 
                </a-form-item> 
 | 
                <a-form-item :label="formatMessage('db.man_loc_type.memo', '备注')" name="memo" style="width: 250px;"> 
 | 
                    <a-input v-model:value="formData.memo" /> 
 | 
                </a-form-item> 
 | 
  
 | 
                <a-form-item> 
 | 
                    <a-button type="primary" html-type="submit" ref="submitButton" 
 | 
                        style="visibility: hidden;">Submit</a-button> 
 | 
                </a-form-item> 
 | 
            </a-form> 
 | 
        </a-modal> 
 | 
    </div> 
 | 
</template> 
 | 
  
 | 
<style></style> 
 |