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="145px">
      <div class="flex">
        <!-------left------->
        <div class="flex flex-col mr-10">
          <el-form-item class="full-width" label="项目名称">
            <el-input
              v-model="form.projectName"
              placeholder="输入项目关键字"
              prefix-icon="Search"
              clearable
            />
          </el-form-item>
          <div class="flex flex-center">
            <el-form-item class="full-width" label="是否开工">
              <el-select v-model="form.isStart" style="width: 100%" clearable>
                <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%" clearable>
                <el-option
                  v-for="item in storage"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item class="full-width" label="计划(实际)开工时间">
              <el-date-picker
                v-model="time1"
                type="daterange"
                @visible-change="visibleTime($event, 1)"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
                clearable
              />
            </el-form-item>
          </div>
          <div>
            <el-form-item class="full-width" label="认定时间">
              <el-select v-model="form.projectYear" style="width: 100%">
                <el-option
                  v-for="item in years"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </div>
        </div>
        <!-------right------->
        <div class="flex flex-col ml-10">
          <div class="flex flex-center">
            <el-form-item class="full-width" label="省重点">
              <el-select
                v-model="form.isImportant"
                style="width: 100%"
                clearable
              >
                <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%"
                clearable
              >
                <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%"
                clearable
              >
                <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">
                {{ deptName }}
              </div>
            </el-form-item>
          </div>
          <div class="flex flex-center flex-justify-end"></div>
          <div>
            <el-form-item class="full-width" label="计划(实际)入库时间">
              <el-date-picker
                v-model="time2"
                type="daterange"
                @visible-change="visibleTime($event, 2)"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
                clearable
              />
            </el-form-item>
          </div>
          <div class="flex flex-align-center flex-justify-end">
            <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: 40vh; 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" @click="orgRefresh" />
        <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,
        projectYear: ''
      },
      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
        }
      ],
      years: [
        {
          value: 2023
        },
        {
          value: 2022
        },
        {
          value: 2021
        },
        {
          value: 2020
        },
        {
          value: 2019
        },
        {
          value: 2018
        },
        {
          value: 2017
        }
      ],
      typeList: [],
      showOrg: false,
      keyWords: '',
      checked: false,
      time1: null, // 计划 实际开工时间
      time2: null, // 计划 实际入库时间
      deptName: '机构选择'
    }
  },
  created() {
    this.getTypeList()
    this.form.projectYear = new Date().getFullYear()
  },
  methods: {
    getTypeList() {
      this.$api.project.typeList().then(res => {
        this.typeList = res.data.records
      })
    },
    sure() {
      if (this.time1 !== null && this.form.isStart.length === 0) {
        this.$message.error('请先选择是否开工')
        return
      } else if (this.time2 !== null && this.form.isStorage.length === 0) {
        this.$message.error('请先选择是否入库')
        return
      }
      if (this.form.isStart === 0) {
        this.form.planCommencementTime =
          this.time1 === null ? '' : this.time1.join(',')
        this.form.startTime = ''
      } else if (this.form.isStart === 1 && this.time1 !== null) {
        this.form.planCommencementTime = ''
        this.form.startTime = this.time1.join(',')
      } else {
        this.form.planCommencementTime = ''
        this.form.startTime = ''
      }

      if (this.form.isStorage === 0) {
        this.form.planStorageTime =
          this.time2 === null ? '' : this.time2.join(',')
        this.form.storageTime = ''
      } else if (this.form.isStorage === 1 && this.time2 !== null) {
        this.form.planStorageTime = ''
        this.form.storageTime = this.time2.join(',')
      } else {
        this.form.planStorageTime = ''
        this.form.storageTime = ''
      }
      this.$bus.emit('serach', this.form)
    },
    visibleTime(event, type) {
      if (event) {
        console.log(this.form.isStart)
        if (type === 1) {
          if (this.form.isStart.length === 0) {
            this.$message.error('请先选择是否开工')
            return
          }
        }
        if (type === 2) {
          if (this.form.isStorage.length === 0) {
            this.$message.error('请先选择是否入库')
          }
        }
      }
    },
    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.form.planCommencementTime = ''
      this.form.startTime = ''
      this.form.planStorageTime = ''
      this.form.storageTime = ''
      this.form.projectYear = ''
      this.time1 = null
      this.time2 = null
      this.deptName = '机构选择'
      this.$bus.emit('serach', this.form)
    },
    changeAmount() {
      const tmps = this.form.amount.split(',')
      this.form.totalAmountMin = tmps[0] === '-' ? '' : tmps[0]
      this.form.totalAmountMax = tmps[1] === '-' ? '' : tmps[1]
    },
    getOrg() {
      if (this.deptList.length > 0) {
        this.showOrg = true
        return
      }
      // const parentId = [0, 2].includes(this.user.info.viewStage) ? this.user.info.parentDeptId : this.user.info.deptId
      this.$api.common.deptList().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(',')
      const tmp = checked.map(e => e.deptName)
      if (tmp.length > 0) {
        this.deptName = tmp[0]
      }
      this.showOrg = false
    },
    orgRefresh() {
      this.deptList = this.deptList.map(sub => {
        sub.checked = false
        return sub
      })
    },
    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>