123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228 |
- <template>
- <div class='input-dialog'>
- <div
- @click='show'
- style='color: #1F2429;cursor: pointer;position:absolute;z-index:9999;'
- :style='`right:${type === 1 ? "30px" : "12px"};top:${type === 1 ? "77px" : "0px"};`'
- >
- <img style='margin-right:4px;' 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:10000;
- position:absolute;'
- :style='`right:${type === 1 ? "40px" : "0"};height:${type === 6 || type === 5? "420px":"250px"}`'
- >
- <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
- clearable
- 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>
- <el-form style=' padding: 20px 24px;' v-if='type==5'>
- <p style='margin:16px 0 8px 0'>要求完成日期</p>
- <el-date-picker
- clearable
- style='width:232px'
- v-model='inputForm.reportdate'
- value-format='yyyyMMdd'
- type='daterange'
- size='small'
- range-separator='-'
- start-placeholder
- end-placeholder
- ></el-date-picker>
- <p style='margin:16px 0 8px 0'>实际完工日期</p>
- <el-date-picker
- clearable
- style='width:232px'
- v-model='inputForm.real'
- value-format='yyyyMMdd'
- type='daterange'
- size='small'
- range-separator='-'
- start-placeholder
- end-placeholder
- ></el-date-picker>
- <p style='margin:16px 0 8px 0'>位置名称编号</p>
- <el-input
- placeholder='搜索位置名称编号'
- size='small'
- clearable
- prefix-icon='el-icon-search'
- v-model='inputForm.locationName'
- style='width:232px;margin-right:12px'
- ></el-input>
- <!-- 日常维保,执行搜索人放入筛选 -->
- <p style='margin:16px 0 8px 0'>搜索执行人</p>
- <el-input
- placeholder='搜索执行人'
- size='small'
- clearable
- prefix-icon='el-icon-search'
- v-model='inputForm.people'
- style='width:232px;margin-right:12px'
- ></el-input>
- </el-form>
- <el-form style=' padding: 20px 24px;' v-if='type==6'>
- <p style='margin:16px 0 8px 0'>任务完成日期</p>
- <el-date-picker
- clearable
- style='width:232px'
- v-model='inputForm.complete'
- value-format='yyyyMMdd'
- type='daterange'
- size='small'
- range-separator='-'
- start-placeholder
- end-placeholder
- ></el-date-picker>
- <p style='margin:16px 0 8px 0'>异常工单编号</p>
- <p>
- <el-input clearable placeholder='异常工单编号' size='small' prefix-icon='el-icon-search' v-model='inputForm.bill' style='width:232px;'></el-input>
- </p>
- <p style='margin:16px 0 8px 0'>异常工单填报日期</p>
- <el-date-picker
- clearable
- value-format='yyyyMMdd'
- type='daterange'
- size='small'
- v-model='inputForm.ycgdtbsj'
- style='width:232px'
- range-separator='-'
- start-placeholder
- end-placeholder
- ></el-date-picker>
- <p style='margin:16px 0 8px 0'>异常工单验收日期</p>
- <el-date-picker
- clearable
- value-format='yyyyMMdd'
- type='daterange'
- size='small'
- style='width:232px'
- range-separator='-'
- start-placeholder
- end-placeholder
- v-model='inputForm.ycgdyssj'
- ></el-date-picker>
- </el-form>
- <div style='position:absolute;bottom:24px;right:24px;z-index:10000'>
- <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: '1',
- yssjwcsj: '',
- //6
- complete: '',
- bill: '',
- ycgdtbsj: '',
- ycgdyssj: '',
- //5
- reportdate: '',
- real: '',
- locationName: '',
- people: '',
- },
- }
- },
- 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)
- } else if (this.type == 6) {
- this.$emit('confirm', this.inputForm.complete, this.inputForm.bill, this.inputForm.ycgdtbsj, this.inputForm.ycgdyssj)
- } else if (this.type == 5) {
- this.$emit('confirm', this.inputForm.reportdate, this.inputForm.real, this.inputForm.locationName, this.inputForm.people)
- }
- this.dialogFormVisible = false
- // TODO: 删除清空栏位值
- // this.inputForm.status = ''
- // this.inputForm.yssjwcsj = ''
- // this.inputForm.complete = ''
- // this.inputForm.bill = ''
- // this.inputForm.ycgdtbsj = ''
- // this.inputForm.ycgdyssj = ''
- // this.inputForm.reportdate = ''
- // this.inputForm.real = ''
- // this.inputForm.locationName = ''
- },
- },
- mounted() {},
- }
- </script>
- <style lang="less" scoped>
- .input-diadlog {
- position: relative;
- }
- </style>
|