thoth-frontend-test/src/views/workbench/components/createDialog.vue

<template>
  <div class="dialog-main">
    <el-dialog
      :title="title"
      :visible.sync="show"
      width="262px"
      :modal-append-to-body="false"
      :close-on-click-modal="true"
      :class="{'bizId-dialog':bizSelect}"
      top="15vh"
      @close="cancel()"
    >
      <article>
        <div v-show="!bizSelect" class="select-section">
          <div class="select-schedule" @click="create('schedule')">
            <span class="select-icon">
              <i class="el-icon-document" />
            </span>
            新建排期
          </div>
          <div class="select-calendar" @click="create('calendar')">
            <span class="select-icon">
              <i class="el-icon-date" />
            </span>
            新建日程
          </div>
        </div>
        <div v-show="bizSelect" class="select-bizId">
          <i class="el-icon-arrow-left" @click="bizSelect = false;title = '请选择'" />
          <el-select v-model="bizId" size="medium" placeholder="业务线（必选）" style="width:100%" filterable>
            <el-option-group v-for="group in bizList" :key="group.code" :label="group.name">
              <el-option v-for="item in group.options" :key="item.code" :label="item.name" :value="item.code" />
            </el-option-group>
          </el-select>
        </div>
      </article>
      <span v-show="bizSelect" slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancel()">取 消</el-button>
        <el-button type="primary" size="small" @click="confirm()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { settingGetMyAndOtherBizList } from '@/api/projectIndex'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      show: this.visible,
      title: '请选择',
      bizSelect: false,
      bizList: [],
      bizId: null
    }
  },
  watch: {
    visible: {
      handler(newV, old) {
        this.show = newV
      },
      immediate: true
    },
    bizSelect: {
      handler(newV) {
        this.title = newV ? '新建排期' : '请选择'
      },
      immediate: true
    }
  },
  created() {
    this.settingGetBizList()
  },
  methods: {
    async settingGetBizList() { // 获取业务线列表
      const res = await settingGetMyAndOtherBizList()
      if (res.code === 200) {
        this.$nextTick(() => {
          const biz = res.data.filter(item => item.length > 0)
          this.bizId = biz[0].code
        })
        this.bizList = [{
          name: '我的业务线',
          options: res.data[0] || []
        }, {
          name: '其他业务线',
          options: res.data[1] ? res.data[1].filter(item => item.isSecret !== 1) : []
        }]
      }
    },
    create(type) {
      if (type === 'calendar') {
        this.$emit('change')
      } else if (type === 'schedule') {
        this.bizSelect = true
      }
    },
    confirm() {
      if (!this.bizId) {
        this.$message({ type: 'warning', message: '请选择业务线!' })
        return false
      }
      const list = this.bizList.reduce((pre, cur) => {
        return [...pre.options, ...cur.options]
      })
      this.$emit('change', list.find(item => item.code === this.bizId))
    },
    cancel() { // 关闭弹框
      this.show = false
      this.bizSelect = false
      this.bizId = null
      this.$emit('update:visible', this.show)
    }
  }
}
</script>
<style lang="scss" scoped>
>>>.el-dialog__header {
  padding: 20px !important;
}
>>>.el-dialog__body {
  padding: 0;
}
>>>.el-dialog__title{
  padding-left: 10px;
  position: relative;
}
>>>.el-dialog__title::before {
  content:" ";
  display: inline-block;
  position: absolute;
  top: 2px;
  left: 0;
  width: 5px;
  height: 20px;
  background-color: rgb(64, 158, 255);
}
.bizId-dialog {
  >>>.el-dialog__title::before {
    content:"";
    background-color: #FFFFFF;
  }
}
.el-icon-arrow-left {
  position: absolute;
  top: 24px;
  left: 10px;
  font-size: 18px;
}
.select-bizId {
  margin-bottom: 25px;
  padding: 0 20px;
}
.select-section {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #333B4A;
  .select-icon {
    height: 30px;
    width: 30px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: rgba(64, 158, 255,1);
    color: #FFFFFF;
  }
  .select-schedule,.select-calendar {
    cursor: pointer;
    border-radius: 4px;
    font-size: 18px;
    height: 50%;
    width: 100%;
    display: flex;
    padding-left: 32px;
    align-items: center;
  }
  .select-calendar {
    .select-icon {
      background-color: #61D3B8;
    }
  }
  .select-schedule:hover{
    color:rgb(64, 158, 255);
    background-color: #EDEDED;
  }
  .select-calendar:hover{
    color:rgb(64, 158, 255);
    background-color: #EDEDED;
  }
}
</style>