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

<template>
    <view>
        <u-modal :show="showModal" ref="uModal" :asyncClose="false" showCancelButton @cancel="closeDialog"
            cancelColor="#909399" :confirmText="'确定'" confirmColor="#2979ff" @confirm="confirm" @close="closeDialog"
            :closeOnClickOverlay="false">
            <view class="title_wrap">
                <view class="title">
                    {{ title }}
                </view>
                <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>
            <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>
            <view class="price_wrap">
                <u--input v-if="editOrAdd === 'edit'" type="number" class="price" placeholder="价格" border="bottom" v-model="info.price"
                    clearable></u--input>
                <u--input v-if="editOrAdd === 'edit'" placeholder="备注" border="bottom" v-model="info.remark"
                    clearable></u--input>
            </view>
            <qiun-data-charts v-if="isShowChart" type="column" :chartData="chartData" canvasId="priceChart" :opts="opts" :ontouch="true"
                width="700rpx" height="600rpx" backgroundColor="#fff" />
            <view v-if="isShowHistory" class="history_wrap">
                <view class="title">
                    {{ type === 1 ? '询价历史' : '核价历史' }}
                </view>
                <u-cell v-for="(item, index) in historyList" :key="index" :title="(index+1)+'. ￥'+item.price" :value="'备注：'+ (item.remark || '无') "></u-cell>
                <u-empty v-if="historyList.length === 0"></u-empty>
            </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: ''// edit 编辑(有价格), editForm 编辑询价单(无价格), add 新增询价单, receptFormAdd 新增接收询价单   线索页面：第一次点击是新增（不需要回显），status传1，第二次点击是无价格编辑status传1；接单中心:第一次点击是新增（需要回显）status传1，第二次点击是无价格编辑status传1；只有edit是有价格编辑status传2
        },
        editInfo: {
            type: Object,
            default: () => { }
        },
        type: {
            type: Number,
            default: 1
        },
        isClue: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ''
        },
        isShowChart: {
            type: Boolean,
            default: false
        },
        isShowHistory: {
            type: Boolean,
            default: false
        }
    },
    emits: ['submitSuccess'],
    inject: {
        refreshData: {
            default: null
        }
    },
    data() {
        return {
            showModal: false,
            info: {
                model: '',
                code: '',
                id: '',
                price: '',
                dictLabel: '',
                dictValue: '',
                imgsUrl: [],
                remark: ''
            },
            historyList: [],
            rules: {
                brand: [
                    { required: true, message: '请输入品牌', trigger: 'blur' }
                ]
            },
            opts: {
                color: [this.getRandomColor()],
                padding: [15, 15, 0, 5],
                touchMoveLimit: 24,
                enableScroll: true,
                legend: {},
                xAxis: {
                    disableGrid: true,
                    scrollShow: true,
                    itemCount: 4
                },
                yAxis: {
                    data: [
                        {
                            min: 0
                        }
                    ]
                },
                extra: {
                    column: {
                        type: "group",
                        width: 30,
                        activeBgColor: "#000000",
                        activeBgOpacity: 0.08,
                        seriesGap: 5,
                        barBorderRadius: [6,6,6,6]
                    }
                }
            },
            chartData:{}

        }
    },
    watch: {
        show: {
            handler(newVal) {
                this.showModal = newVal;
            },
            immediate: true
        }
    },
    methods: {
        getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        },
        // 编辑回显
        initData() {
            this.$nextTick(() => {
                this.info = JSON.parse(JSON.stringify(this.editInfo))
                
                if(this.isShowChart){
                    this.chartData = {
                        categories: this.info.priceChart.map((item, index) => item.userName),
                        series: [
                            {
                                name: "价格",
                                data: this.info.priceChart.map(item => item.price)
                            }
                        ]
                    };
                }
                if(this.isShowHistory){
                    this.historyList = JSON.parse(this.info.myPriceHistory) || []
                }
                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,
                remark: this.info.remark
            }
            uni.$u.api.addInquiry(data).then(res => {
                uni.$u.toast('保存成功')
                this.closeDialog()
                this.$emit('submitSuccess')
                if (this.isClue && this.refreshData) 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>