qa-prevention-gwj-vue/src/views/threeSystems/safetyOperationRegulations/components/condition.vue

<template>
  <el-drawer
    v-if="visible"
    ref="drawer"
    :visible.sync="visible"
    :before-close="close"
    title="搜索条件"
    size="50%">
    <div style="margin-left: 30px">
      <el-form ref="form" label-width="200px">
        <el-form-item label="规程属性:" prop="CATEGORY_LIST">
          <multiple-choice :dynamic-tags.sync="form.CATEGORY_LIST" :labels="categoryList" :row-key="key.categoryKey" :row-name="key.categoryName" title="选择"/>
        </el-form-item>
        <el-form-item label="类型:" prop="TYPES">
          <multiple-choice :dynamic-tags.sync="form.TYPES" :labels="typeList" :row-key="key.typeKey" :row-name="key.typeName" title="选择"/>
        </el-form-item>
        <el-form-item label="国民经济行业类型:" prop="SPECIFICATION_TYPES">
          <multiple-choice :dynamic-tags.sync="form.SPECIFICATION_TYPES" :labels="industryTypeList" :row-key="key.specificationTypeKey" :row-name="key.specificationTypeName" lazy title="选择"/>
        </el-form-item>
        <el-form-item label="标签:" prop="LABELS">
          <multiple-choice :dynamic-tags.sync="form.LABELS" :row-key="key.labelsKey" :row-name="key.labelsName" title="选择"/>
        </el-form-item>
        <el-form-item v-if="false" label="企业:">
          <el-select
            v-model="form.CORPINFO_ID"
            :remote-method="searchCorp"
            :loading="selectLoading"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词">
            <el-option
              v-for="item in corp_list"
              :key="item.CORPINFO_ID"
              :label="item.CORP_NAME"
              :value="item.CORPINFO_ID"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="closePanel">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="submit">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import waves from '@/directive/waves' // waves directive
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import multipleChoice from '../../../util/multipleChoice.vue'
import { requestFN } from '@/utils/request'
export default {
  components: { multipleChoice, Pagination, videoPlayer },
  directives: { waves },
  props: {
    haveCorpFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      key: {
        typeKey: 'DICTIONARIES_ID',
        typeName: 'NAME',
        specificationTypeKey: 'DICTIONARIES_ID',
        specificationTypeName: 'NAME',
        categoryKey: 'DICTIONARIES_ID',
        categoryName: 'NAME',
        labelsKey: 'BUS_LABEL_FACTORY_ID',
        labelsName: 'NAME'
      },
      typeList: [],
      industryTypeList: [],
      categoryList: [],
      form: {
        CATEGORY_LIST: [''],
        TYPES: [''],
        SPECIFICATION_TYPES: [''],
        LABELS: [''],
        CORPINFO_ID: ''
      },
      corp_list: [],
      selectLoading: false
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getDic()
  },
  methods: {
    init(tags) {
      this.visible = true
    },
    close(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.form = {
            CATEGORY_LIST: [''],
            TYPES: [''],
            SPECIFICATION_TYPES: [''],
            LABELS: ['']
          }
          done()
        })
        .catch(e => {})
    },
    closePanel() {
      this.visible = false
      this.form = {
        CATEGORY_LIST: [''],
        TYPES: [''],
        SPECIFICATION_TYPES: [''],
        LABELS: ['']
      }
    },
    submit() {
      this.$emit('getResult', this.form)
      this.visible = false
    },
    getDic() {
      // 安全操作规程类型
      requestFN(
        'dictionaries/getLevels', { DICTIONARIES_ID: 'ca4e4a7597f8485d8be323bd6876c40b' }
      ).then((data) => {
        this.typeList = data.list
      }).catch((e) => {
        this.loading = false
      })
      // 操作规程行业类型
      requestFN(
        'dictionaries/getLevels', { DICTIONARIES_ID: 'f2598ba72e864eadabf0ca4b664d26b9' }
      ).then((data) => {
        this.industryTypeList = data.list
      }).catch((e) => {
        this.loading = false
      })
      // 行业类别
      requestFN(
        'dictionaries/getLevels', { DICTIONARIES_ID: '99543742b79b473480617191f7ac256e' }
      ).then((data) => {
        this.categoryList = data.list
      }).catch((e) => {
        this.loading = false
      })
    },
    clear() {
      this.form = {
        CATEGORY_LIST: [''],
        TYPES: [''],
        SPECIFICATION_TYPES: [''],
        LABELS: [''],
        TTRIBUTE_LIST: [''],
        CORPINFO_ID: ''
      }
    },
    searchCorp(query) {
      if (query !== '') {
        this.selectLoading = true
        requestFN(
          'corpinfo/list', { KEYWORDS: query }
        ).then((data) => {
          this.corp_list = data.varList
          this.selectLoading = false
        }).catch((e) => {
          console.log(e)
          this.selectLoading = false
        })
      }
    }
  }
}

</script>

<style scoped>
.information >>> .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>