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

<template>
	<view>
		<u-modal :show="showModal" ref="uModal" :title="(editOrAdd === 'add' || editOrAdd === 'receptFormAdd') ? '新增' : '编辑'" :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: ''// edit 编辑(有价格), editForm 编辑询价单(无价格), add 新增询价单, receptFormAdd 新增接收询价单   线索页面：第一次点击是新增（不需要回显），status传1，第二次点击是无价格编辑status传1；接单中心:第一次点击是新增（需要回显）status传1，第二次点击是无价格编辑status传1；只有edit是有价格编辑status传2
        },
        editInfo: {
            type: Object,
            default: () => {}
        },
        type: {
            type: Number,
            default: 1
        },
	},
    emits: ['submitSuccess'],
    inject: ['refreshData'],
	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() {
            this.$nextTick(()=>{
                this.info = JSON.parse(JSON.stringify(this.editInfo))
                this.showModal = true;
            })
        },
        // 获取删除图片信息
        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
            }
            if(this.editOrAdd === 'edit' && !this.info.price){
                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.editOrAdd === 'editForm') ? this.info.id : '',
                price: this.editOrAdd === 'edit' ? this.info.price : '',
                imgsUrl:this.info.imgsUrl,
                status: this.editOrAdd === 'edit' ? '2' : '1',
                type: this.type
            }
            uni.$u.api.addInquiry(data).then(res => {
                uni.$u.toast(this.type == 1 ? "询价成功" : "核价成功")
                this.closeDialog()
                this.$emit('submitSuccess')
                if(this.type == 1 && this.clueId !== '') this.refreshData.resetData(); //线索公海页面需要刷新列表
            }).catch((err) => {
                uni.$u.toast(err)
            })
        },
        showDialog() {
            if (this.editOrAdd === 'edit' || this.editOrAdd === 'editForm' || this.editOrAdd === 'receptFormAdd') {
                this.initData();
            }else if(this.editOrAdd === 'add'){
                this.clearForm()
                this.showModal = true;
            }
        },
        clearForm() {
            this.info = {
                dictLabel:'',
                dictValue:'',
                model:'',
                code:'',
                id:'',
                price:'',
                imgsUrl:[]
            }
        },
        closeDialog() {
            this.showModal = false;
        },
        
	}
};
</script>

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