123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 |
- <template>
- <div class='input-dialog'>
- <div
- @click='show'
- style='color: #c3c7cb;cursor: pointer;position:absolute;right:32px;z-index:9999'
- :class='`top:${type === 1 ? "40px" : "0"};`'
- >
- <img src='@/assets/imgs/select.png' />
- 筛选
- </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;right:0px;'
- >
- <el-form style=' padding:20px 24px;' v-if='type==1'>
- <p style='margin:0 0 8px 0'>生产厂商</p>
- <el-input
- placeholder='搜索生产厂商'
- style='width:192px;margin-right:12px'
- size='small'
- prefix-icon='el-icon-search'
- v-model='inputForm.manufacturer'
- ></el-input>
- <p style='margin:16px 0 8px 0'>服务商</p>
- <el-input placeholder='搜索服务商' style='width:192px;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='搜索任务编号' size='small' prefix-icon='el-icon-search' v-model='inputForm.gzglid' style='width:192px;'></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='搜索工单编号' size='small' prefix-icon='el-icon-search' v-model='inputForm.wonum' style='width:192px;'></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:220px'>
- <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:220px'
- 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:20px;right:47px;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() {
- this.dialogFormVisible = false
- 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)
- }
- }
- },
- mounted() {}
- }
- </script>
- <style lang="less" scoped>
- .input-diadlog {
- position: relative;
- }
- </style>
|