wanda-bm-guide/src/views/equipment/table/inputDIalog.vue

<template>
    <div class='input-dialog'>
        <div
            @click='show'
            style='color: #1F2429;cursor: pointer;position:absolute;z-index:9999;'
            :style='`right:${type === 1 ? "48px" : "12px"};top:${type === 1 ? "102px" : "0px"};`'
            
        >
            <img src='@/assets/imgs/select.png' />
            <span>筛选</span>
        </div>
        <div
            v-if='dialogFormVisible'
            style='width:280px;height:250px;background:rgba(255,255,255,1);margin-top:40px;
            box-shadow:0px 2px 10px 0px rgba(31,35,41,0.1);border:1px solid rgba(228,229,231,1);z-index:9999;
            position:absolute;'
             :style='`right:${type === 1 ? "40px" : "0"};`'
        >
            <el-form style=' padding:20px 24px;' v-if='type==1'>
                <p style='margin:0 0 8px 0'>生产厂商</p>
                <el-input
                    placeholder='搜索生产厂商'
                    style='width:232px;margin-right:12px'
                    size='small'
                    clearable
                    prefix-icon='el-icon-search'
                    v-model='inputForm.manufacturer'
                ></el-input>
                <p style='margin:16px 0 8px 0'>服务商</p>
                <el-input
                    placeholder='搜索服务商'
                    clearable
                    style='width:232px;margin-right:12px'
                    size='small'
                    prefix-icon='el-icon-search'
                    v-model='inputForm.fws'
                ></el-input>
            </el-form>
            <el-form style=' padding: 20px 24px;' v-if='type==2'>
                <p style='margin:0 0 8px 0'>任务编号</p>
                <el-input placeholder='搜索任务编号' clearable size='small' prefix-icon='el-icon-search' v-model='inputForm.gzglid' style='width:232px;'></el-input>
            </el-form>
            <el-form style=' padding: 20px 24px;' v-if='type==3'>
                <p style='margin:0 0 8px 0'>工单编号</p>
                <el-input placeholder='搜索工单编号' clearable size='small' prefix-icon='el-icon-search' v-model='inputForm.wonum' style='width:232px;'></el-input>
            </el-form>
            <el-form style=' padding: 20px 24px;' v-if='type==4'>
                <p style='margin:0 0 8px 0'>验收结果</p>
                <el-select v-model='inputForm.status' placeholder='请选择' size='small' style='width:232px'>
                    <el-option v-for='item in statusOption' :key='item.id' :label='item.name' :value='item.id'></el-option>
                </el-select>
                <p style='margin:16px 0 8px 0'>验收日期</p>
                <el-date-picker
                    style='width:232px'
                    v-model='inputForm.yssjwcsj'
                    value-format='yyyyMMdd'
                    type='daterange'
                    size='small'
                    range-separator='-'
                    start-placeholder
                    end-placeholder
                ></el-date-picker>
            </el-form>
            <div style='position:absolute;bottom:24px;right:24px;z-index:9999'>
                <el-button @click='dialogFormVisible = false' size='small'>取 消</el-button>
                <el-button type='primary' @click='confirm' size='small'>确 定</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogFormVisible: false,
            form: {},
            formLabelWidth: '232px',
            inputForm: {
                fws: '',
                manufacturer: '',
                gzglid: '',
                wonum: '',
                ssfasm: '',
                status: '',
                yssjwcsj: ''
            }
        }
    },
    props: ['type', 'statusOption'],
    methods: {
        show() {
            this.dialogFormVisible = !this.dialogFormVisible
        },
        confirm() {
            if (this.type == 1) {
                this.$emit('confirm', this.inputForm.fws, this.inputForm.manufacturer)
            } else if (this.type == 2) {
                this.$emit('confirm', this.inputForm.gzglid)
            } else if (this.type == 3) {
                this.$emit('confirm', this.inputForm.wonum)
            } else if (this.type == 4) {
                this.$emit('confirm', this.inputForm.status, this.inputForm.yssjwcsj)
            }
            this.dialogFormVisible = false
            this.inputForm.status = ''
            this.inputForm.yssjwcsj = ''
        }
    },
    mounted() {}
}
</script>

<style lang="less" scoped>
.input-diadlog {
    position: relative;
}
</style>