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 @blur="handleModelBlur"></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>
            <view class="charts_box" v-show="chartShow">
                <qiun-data-charts type="line" :chartData="chartData" canvasId="trendChart" :opts="opts" :ontouch="true"
                    width="700rpx" height="200rpx" backgroundColor="#ffffff" />
            </view>
        </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: () => {}
        },
        type: {
            type: Number,
            default: 1
        },
	},
    emits: ['submitSuccess'],
	data() {
		return {
			showModal: false,
            info: {
                model:'',
                code:'',
                id:'',
                price:'',
                dictLabel:'',
                dictValue:'',
                imgsUrl:[]
            },
            rules: {
                brand: [
                    { required: true, message: '请输入品牌', trigger: 'blur' }
                ]
            },
            chartData:{},
            opts: {
                color: ["#f9ae3d"],
                padding: [10, 10, 0, 0],
                dataLabel: false,
                dataPointShape: false,
                enableScroll: true,
                legend: {
                    show: false
                },
                xAxis: {
                    disableGrid: true,
                    scrollShow: true,
                    itemCount: 7
                },
                yAxis: {
                    gridType: "dash",
                    dashLength: 7,
                    axisLabel:{
                        show: false
                    }
                },
                extra: {
                    line: {
                        type: "curve",
                        width: 3,
                        activeType: "hollow",
                        linearType: "custom",
                        onShadow: true,
                        animation: "horizontal"
                    }
                }
            },
            chartShow: false
		}
	},
	watch: {
		show: {
			handler(newVal) {
				this.showModal = newVal;
			},
			immediate: true
		}
	},
	methods: {
        // 编辑回显
        initData() {
            this.$nextTick(()=>{
                if (this.editOrAdd === 'edit') {
                    this.info = JSON.parse(JSON.stringify(this.editInfo))
                    this.showModal = true;
                    if(this.info.model && this.info.dictValue){
                        this.getChartData()
                    }
                }
            })
        },
        // 获取删除图片信息
        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,
                status: this.editOrAdd === 'edit' ? '2' : '1',
                type: this.type
            }
            uni.$u.api.addInquiry(data).then(res => {
                if (res.code == 200) {
                    uni.showToast({
                        title: '添加成功',
                        icon: 'success'
                    })
                    this.closeDialog()
                    this.$emit('submitSuccess')
                }
            })
        },
        showDialog() {
            if (this.editOrAdd === 'edit') {
                this.initData();
            }else{
                this.clearForm()
                this.showModal = true;
            }
        },
        clearForm() {
            this.info = {
                dictLabel:'',
                dictValue:'',
                model:'',
                code:'',
                id:'',
                price:'',
                imgsUrl:[]
            }
        },
        closeDialog() {
            this.showModal = false;
            this.chartShow = false
            this.chartData = {}
        },
        handleModelBlur() {
            if (this.info.model !== ''){
                this.getChartData()
            }
        },
        getChartData() {
            uni.$u.api.inquiryChart({
                dictValue: this.info.dictValue,
                model: this.info.model,
            }).then(res => {
                if (res.code == 200) {
                    
                    let data = {
                        categories: res.data.map(item=>item.recycleTime),
                        series: [
                            {
                                name: this.info.model+'价格趋势',
                                data: res.data.map(item=>item.costPrice),
                                setShadow: [
                                    3,
                                    8,
                                    15,
                                    "#f9ae3d"
                                ],
                            }
                        ]
                    }
                    this.chartData = JSON.parse(JSON.stringify(data))
                    this.chartShow = true
                }
            })
            
        },
	}
};
</script>

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