wt_project_web_bak/src/views/home/component/owner_serach.vue

<template>
  <div class="flex flex-center padding white-bg ">
    <el-form v-model="form" class="lab mt-20 full-width" label-width="120px">
      <div class="flex">
        <div class="flex flex-col mr-15">
          <el-form-item class="full-width" label="项目名称">
            <el-input
                v-model="form.projectName"
                placeholder="输入项目关键字"
                prefix-icon="Search"
            />
          </el-form-item>
          <div class="flex flex-center">
            <el-form-item class="full-width" label="是否开工">
              <el-select
                  v-model="form.isStart"
                  style="width: 100%">
                <el-option
                    v-for="item in start"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="full-width" label="是否入库">
              <el-select
                  v-model="form.isStorage"
                  style="width: 100%">
                <el-option
                    v-for="item in storage"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="flex flex-col ml-20 mr-15">
          <!--          <el-form-item class="full-width" label="分类筛选">-->
          <!--            <el-select-->
          <!--                v-model="form.typeId"-->
          <!--                clearable-->
          <!--                placeholder="选择项目分类"-->
          <!--                style="width: 100%">-->
          <!--              <el-option-->
          <!--                  v-for="item in typeList"-->
          <!--                  :key="item.id"-->
          <!--                  :label="item.name"-->
          <!--                  :value="item.id"-->
          <!--              />-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <div class="flex flex-center ">
            <el-form-item class="full-width" label="省重点">
              <el-select
                  v-model="form.isImportant"
                  style="width: 100%">
                <el-option
                    v-for="item in isimport"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="full-width" label="省集中开工">
              <el-select
                  v-model="form.isFocusStart"
                  style="width: 100%">
                <el-option
                    v-for="item in isfocus"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="flex flex-center flex-justify-between">
            <el-form-item class="full-width " label="总投资额">
              <el-select
                  v-model="form.amount"
                  @change="changeAmount"
                  style="width: 100%"
              >
                <el-option
                    v-for="item in totalAmount"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="full-width" label="机构选择">
              <div class="grey-9 pointer chose-box nowrap" @click="getOrg">
                选择机构
              </div>
            </el-form-item>
          </div>
          <div class="flex flex-center flex-justify-end">
          </div>
        </div>
        <div class="flex flex-col flex-justify-between">
          <div></div>
          <div class="flex  flex-align-center  flex-justify-end ml-10" style="margin-bottom: 18px">
            <base-button class="pointer " icon="Delete" title="清空" type="0" width="130" @click="clear"/>
            <base-button class="pointer ml-20" width="130" @click="sure"/>
          </div>
        </div>
      </div>
    </el-form>
    <!----机构选择----->
    <el-dialog v-model='showOrg'
               append-to-body
               center
               title="机构选择"
               width="45%">
      <div class="flex flex-col">
        <el-input
            v-model="keyWords"
            clearable
            placeholder="机构快速搜索"
            prefix-icon="Search"
            @blur='change'
        />
      </div>
      <el-divider/>
      <div class="hide-scrollbar full-width" style="height: 20vh;overflow-x: scroll">
        <!--        <div v-if='attaches.length === 0' class='full-width flex flex-center '>-->
        <!--          <el-empty image-size='100'/>-->
        <!--        </div>-->
        <div class="flex flex-justify-between flex-center">
          <span class="bold font-15 grey ml-5 ">部门</span>
        </div>
        <div class="grid radius mt-15 padding" style="border: 1px solid #DDDFE6">
          <div v-for="(item,index) in deptList" :key='item.id' class="flex flex-center  pointer padding"
               :class="item.search ? 'org-search' : item.checked ? 'org-s' : 'org'" @click='changeChecked(index)'>
            <div :class="item.checked ? 'dot-checked' : 'dot'"></div>
            <div class='ml-5 full-width' :class="item.checked || item.search  ? 'white' : ''">{{ item.deptName }}</div>
          </div>
        </div>
      </div>
      <div class="flex flex-center mt-20 mb-5">
        <base-button title="重置" type="0" icon="Refresh"/>
        <base-button class="ml-20" title="确定" icon="Check" @click='orgCheck'/>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import baseButton from '../../../components/base-button.vue'
import { useStore } from '@/store/user.js'

export default {
  name: 'owner_serach',
  components: { baseButton },
  watch: {
    keyWords: {
      handler (val) {
        setTimeout(() => {
          this.change()
        }, 500)
      },
      immediate: true
    }
  },
  setup () {
    const user = useStore()
    return { user }
  },
  data () {
    return {
      deptList: [],
      form: {
        projectName: '', // 项目名称/关键字
        typeId: '', // 项目分类
        isStart: '', // 是否开工
        isStorage: '', // 是否入库
        amount: '',
        isImportant: '', // 是否省重点
        isFocusStart: '', // 是否集中开工
        deptIds: '', // 机构id，多选
        type: true
      },
      totalAmount: [
        {
          name: '5000万以下',
          value: '0,4999' // 0 max 1 min
        },
        {
          name: '5000-9999万',
          value: '5000,9999'
        },
        {
          name: '1 亿以上',
          value: '10000,-'
        }
      ],
      start: [
        {
          label: '否',
          value: 0
        },
        {
          label: '是',
          value: 1
        }
      ],
      storage: [
        {
          label: '否',
          value: 0
        },
        {
          label: '是',
          value: 1
        }
      ],
      isimport: [
        {
          label: '否',
          value: 0
        },
        {
          label: '是',
          value: 1
        }
      ],
      isfocus: [
        {
          label: '否',
          value: 0
        },
        {
          label: '是',
          value: 1
        }
      ],
      typeList: [],
      showOrg: false,
      keyWords: '',
      checked: false
    }
  },
  created () {
    this.getTypeList()
  },
  methods: {
    getTypeList () {
      this.$api.project.typeList().then(res => {
        this.typeList = res.data.records
      })
    },
    sure () {
      this.form.type = true
      console.log(this.form)
      this.$bus.emit('serach', this.form)
    },
    clear () {
      this.form.projectName = ''
      this.form.typeId = ''
      this.form.isStorage = ''
      this.form.isStart = ''
      this.form.amount = ''
      this.form.isFocusStart = ''
      this.form.isImportant = ''
      this.form.deptIds = ''
      this.form.type = false
      this.$bus.emit('serach', this.form)
    },
    changeAmount () {
      const tmps = this.form.amount.split(',')
      console.log(tmps)
      this.form.totalAmountMin = tmps[0] === '-' ? '' : tmps[0]
      this.form.totalAmountMax = tmps[1] === '-' ? '' : tmps[1]
    },
    getOrg () {
      const parentId = [1, 2].includes(this.user.info.viewStage) ? this.user.info.parentDeptId : this.user.info.deptId
      this.$api.system.getDeptLazy({ parentId }).then(res => {
        if (res.code === 200) {
          this.showOrg = true
          this.deptList = res.data.map(e => {
            e.checked = false
            return e
          })
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    changeChecked (index) {
      this.deptList[index].checked = !this.deptList[index].checked
    },
    orgCheck () {
      const checked = this.deptList.filter(sub => sub.checked)
      this.form.deptIds = checked.map(sub => sub.id).join(',')
      this.showOrg = false
    },
    change () {
      if (this.keyWords.length === 0) {
        this.deptList.forEach(sub => sub.search = false)
        return
      }
      const tmp = this.deptList.filter(sub => sub.deptName.indexOf(this.keyWords) > -1).map(sub => sub.id)
      tmp.forEach(sub => {
        const index = this.deptList.findIndex(ele => ele.id === sub)
        this.deptList[index].search = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.lab {
  :deep(.el-form-item__label) {
    color: #707070;
    font-size: 15px;
    font-weight: 500;
  }
}

.chose-box {
  width: 100%;
  border: 1px solid #DDDFE6;
  border-radius: 5px;
}

.grid {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

.org {
  border-radius: 8px;
  width: 150px;
  margin: 10px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  border: 4px solid #eeeeee;
}

.dot-checked {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  border: 4px solid #ECAB56;

  .title {
    color: white;
  }
}

.org-search {
  border-radius: 8px;
  background: #4E637F;
  width: 150px;
  margin: 10px;
}

.org-s {
  border-radius: 8px;
  background: #4E637F;
  width: 150px;
  margin: 10px;
}
</style>