crm-app-vue3/components/add-inquiry-dialog/index.vue

<template>
	<view>
		<u-modal :show="showModal" ref="uModal" :title="editOrAdd === 'edit' ? '编辑' : '新增'" :asyncClose="false" showCancelButton @cancel="closeDialog" cancelColor="#909399" :confirmText="'确定'" confirmColor="#2979ff"@confirm="confirm" @close="closeDialog" :closeOnClickOverlay="false">
            <view class="modal_wrap">
                <text @click="handleBrandClick" class="item" :class="info.dictLabel ? 'brand' : 'brand placeholder'">{{ info.dictLabel || '品牌' }}</text>
                <text class="divider">|</text>
                <u--input placeholder="型号" class="item" border="none" v-model="info.model" clearable></u--input>
                <text class="divider">|</text>
                <u--input class="code-input item" placeholder="编码" border="none" v-model="info.code" clearable></u--input>
            </view>
            <view class="img_wrap">
                <imgs-row-scroll v-if="info.imgsUrl.length > 0" :isShowDeleteIcon="true" @deleteImgInfo="getDeleteImgInfo" imgMode="aspectFill" :totalWidth="400" :images="info.imgsUrl" :previewEnabled="true" :imageWidth="150" :imageHeight="150"></imgs-row-scroll>
                <u-upload
                    @afterRead="afterRead"
                    name="3"
                    multiple
                    :maxCount="10"
                ></u-upload>
            </view>
            <u--input v-if="editOrAdd === 'edit'" class="price" placeholder="价格" border="bottom" v-model="info.price" clearable></u--input>
        </u-modal>
        <brandList ref="brandListRef" @selectedBrand="handleSelectedBrand"></brandList>
	</view>
</template>

<script>
import imgsRowScroll from '@/components/imgs-row-scroll/index.vue'
import brandList from '@/components/brand-list/index.vue'
export default {
	name: 'AddInquiryDialog',
    components: {
        imgsRowScroll,
        brandList
    },
	props: {
        clueId: {
            type: String,
            default: ''
        },
		show: {
			type: Boolean,
			default: false
		},
        editOrAdd: {
            type: String,
            default: ''
        },
        editInfo: {
            type: Object,
            default: () => {}
        },

	},
	data() {
		return {
			showModal: false,
            info: {
                model:'',
                code:'',
                id:'',
                price:'',
                dictLabel:'',
                dictValue:'',
                imgsUrl:[]
            },
            rules: {
                brand: [
                    { required: true, message: '请输入品牌', trigger: 'blur' }
                ]
            },
		}
	},
	watch: {
		show: {
			handler(newVal) {
				this.showModal = newVal;
			},
			immediate: true
		}
	},
	methods: {
        // 编辑回显
        initData() {
            if (this.editOrAdd === 'edit') {
                this.info = JSON.parse(JSON.stringify(this.editInfo))
            }
        },
        // 获取删除图片信息
        getDeleteImgInfo(info) {
            this.info.imgsUrl = info.newImages
        },
        handleBrandClick() {
            this.$refs.brandListRef.showBrandList();
        },
        handleSelectedBrand(info) {
            this.info.dictLabel = info.dictLabel
            this.info.dictValue = info.dictValue
        },
        // 上传图片
        afterRead(info) {
            info.file.forEach(item=>{
                uni.$u.api.uploadFile(item.url).then((res) => {
                    this.info.imgsUrl.push(res.data.url);
                    uni.$u.toast("文件上传成功");
                }).catch(() => {
                    uni.$u.toast("上传文件失败");
                })
            })
        },
        // 确认添加
        confirm() {
            if (!this.info.dictLabel || !this.info.dictValue) {
                uni.showToast({
                    title: '请选择品牌',
                    icon: 'none'
                })
                return
            }
            if (!this.info.model) {
                uni.showToast({
                    title: '请输入型号',
                    icon: 'none'
                })
                return
            }
            if (!this.info.code) {
                uni.showToast({
                    title: '请输入编码',
                    icon: 'none'
                })
                return
            }
            if(this.info.imgsUrl.length == 0){
                uni.showToast({
                    title: '请上传图片',
                    icon: 'none'
                })
                return
            }
            const data = {
                clueId: this.clueId,
                dictValue: this.info.dictValue,
                dictLabel: this.info.dictLabel,
                model: this.info.model,
                code: this.info.code,
                id: this.editOrAdd === 'edit' ? this.info.id : '',
                price: this.editOrAdd === 'edit' ? this.info.price : '',
                imgsUrl:this.info.imgsUrl
            }
            uni.$u.api.addInquiry(data).then(res => {
                if (res.code == 200) {
                    uni.showToast({
                        title: '添加成功',
                        icon: 'success'
                    })
                    this.closeDialog()
                    this.$emit('addSuccess')
                }
            })
        },
        showDialog() {
            this.showModal = true;
            if (this.editOrAdd === 'edit') {
                this.initData();
            }else{
                this.clearForm()
            }
        },
        clearForm() {
            this.info = {
                dictLabel:'',
                dictValue:'',
                model:'',
                code:'',
                id:'',
                price:'',
                imgsUrl:[]
            }
        },
        closeDialog() {
            this.showModal = false;
        },
	}
};
</script>

<style lang="scss" scoped>
    @import './index.scss'
</style>