epmet-oper-pc-chengyang/epmet-oper-web/src/views/modules/customer/customize/MostList.vue

<template>
  <div class="m-body">

    <!--  项目外部系统流转设置-->
    <el-tag class="mh">
      <div class="h-left">
        <div class="line">项目外部系统流转设置</div>
      </div>
      <div class="h-right">
        <button class="h-right-two" @click="saveSys">保存设置</button>
        <button class="h-right-one" @click="resetSys">恢复默认</button>
        <el-button class="diaCancel" @click="diaCancel()">取消返回</el-button>
      </div>
    </el-tag>
    <div class="mh-child">
      <el-tag class="set-overtime">项目外部系统流转：</el-tag>
      <el-switch
        v-model="sendProjectSwitch"
        active-text="开启"
        inactive-text="关闭"
        element
        style="width: 200px"
      >
      </el-switch>
    </div>
    <div v-if="selectSys.length > 0" class="mh-child" style="display: flex;">
      <el-tag class="set-overtime">已选外部系统：</el-tag>
      <div class="sys-list">
        <div v-for="(item, index) in selectSys" :key="item.platformId" class="sys-list-item">
          <img :src="item.icon" />
          <span>{{ item.platformName }}</span>
          <el-button type="text" size="small" @click="handleEditSys(item)">编辑</el-button>
          <el-button type="text" style="color: red;" size="small" @click="handleSysDel(item, index)" >删除</el-button>
        </div>
      </div>
    </div>
    <div class="mh-child">
      <el-tag class="set-overtime">外部系统：</el-tag>
      <el-select v-model="sysOptions" multiple placeholder="请选择" @remove-tag="handlesysTag" @change="handleSys" class="overtime-input">
        <el-option
          v-for="item in sysList"
          :key="item.platformId"
          :label="item.platformName"
          :value="item.platformId"
        >
        </el-option>
      </el-select>
      <el-tag
        style="
          font-size: 14px;
          background-color: white;
          border: white;
          color: black;
        "
        >（可多选）</el-tag>
    </div>

    <!-- 项目滞留超期提醒	-->
    <el-tag class="mh">
      <div class="h-left">
        <div class="line">项目滞留超期提醒</div>
      </div>
      <div class="h-right">
        <button class="h-right-two" @click="saveRemind()">保存设置</button>
        <button class="h-right-one" @click="defaultRemind()">恢复默认</button>
      </div>
    </el-tag>
    <el-form
      :inline="false"
      :model="remindForm"
      ref="remindForm"
      :label-width="'200px'"
    >
      <el-form-item
        class="mh-child"
        label="设定核算单位天/日起止时间："
        prop="startTime"
      >
        <el-time-picker
          class="overtime-input"
          arrow-control
          prefix-icon="el-icon-date"
          v-model="remindForm.startTime"
          :picker-options="{
            selectableRange: '00:00:00' + '-' + '23:59:59'
          }"
          placeholder="任意时间点"
          value-format="HH:mm:ss"
        >
        </el-time-picker>
        <span style="padding: 20px">至</span>
        <el-time-picker
          class="overtime-input"
          arrow-control
          prefix-icon="el-icon-date"
          v-model="remindForm.endTime"
          :picker-options="{
            selectableRange: remindForm.startTime + '-' + '23:59:59'
          }"
          placeholder="任意时间点"
          value-format="HH:mm:ss"
        >
        </el-time-picker>
      </el-form-item>
      <el-form-item
        class="mh-child"
        label="设定滞留超期时间："
        prop="detentionDays"
      >
        <el-input-number
          class="overtime-input"
          v-model="remindForm.detentionDays"
        ></el-input-number>
        <span style="padding: 25px">/</span>
        <el-select
          v-model="remindForm.calculation"
          placeholder="请选择"
          class="overtime-input"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 设定即将超期时间提醒 -->
      <el-form-item
        class="mh-child"
        label="设定即将超期时间提醒："
        prop="remindTime"
      >
        <el-input-number
          class="overtime-input"
          v-model="remindForm.remindTime"
        ></el-input-number>
        <span style="padding: 25px">单位天</span>
      </el-form-item>
      <!-- 统一定时消息推送时间 -->
      <el-form-item
        class="mh-child"
        label="统一定时消息推送时间："
        prop="pushTime"
      >
        <el-time-select
          class="overtime-input"
          v-model="remindForm.pushTime"
          :picker-options="{
            start: '00:00',
            step: '00:5',
            end: '23:59'
          }"
          placeholder="选择时间"
        >
        </el-time-select>
      </el-form-item>
    </el-form>

    <!-- 议题发布前经网络员审核 -->
    <el-tag class="mh">
      <div class="h-left">
        <div class="line">议题发布前经网络员审核</div>
      </div>
      <div class="h-right">
        <button class="h-right-two" @click="saveReview()">保存设置</button>
        <button class="h-right-one" @click="defaultReview()">恢复默认</button>
      </div>
    </el-tag>

    <el-form
      :inline="false"
      :model="reviewForm"
      ref="reviewForm"
      :label-width="'200px'"
    >
      <el-form-item
        class="mh-child"
        label="议题发布前经网络员审核："
        prop="auditSwitch"
      >
        <el-switch
          v-model="auditSwitchShow"
          active-text="开启"
          inactive-text="关闭"
          class="overtime-input"
        >
        </el-switch>
      </el-form-item>
    </el-form>

    <!-- 待办事项短信通知	 -->
    <el-tag class="mh">
      <div class="h-left">
        <div class="line">待办事项短信通知</div>
      </div>
      <div class="h-right">
        <button class="h-right-two">保存设置</button>
        <button class="h-right-one" @click="daibanshi()">恢复默认</button>
      </div>
    </el-tag>

    <el-form
      :inline="false"
      :model="msgForm"
      ref="msgForm"
      :label-width="'200px'"
    >
      <el-form-item
        class="mh-child"
        label="待办事项发送短信通知："
        prop="switch"
      >
        <el-switch
          v-model="msgForm.switchShow"
          active-text="开启"
          inactive-text="关闭"
          class="overtime-input"
        >
        </el-switch>
      </el-form-item>

      <el-form-item class="mh-child" label="剩余短信数量：" prop="remindTime">
        <el-input-number
          class="overtime-input"
          v-model="msgForm.remain"
        ></el-input-number>
        <span style="padding: 25px">单位条</span>
      </el-form-item>
    </el-form>

    <!-- 小组审核机制-->
    <el-tag class="mh">
      <div class="h-left">
        <div class="line">小组审核机制</div>
      </div>
      <div class="h-right">
        <button class="h-right-two">保存设置</button>
        <button class="h-right-one">恢复默认</button>
      </div>
    </el-tag>
    <el-form
      :inline="false"
      :model="groupForm"
      ref="groupForm"
      :label-width="'200px'"
    >
      <el-form-item
        class="mh-child"
        label="新建小组进组需小组审核："
        prop="switch"
      >
        <el-switch
          v-model="reviewForm.switchShow"
          active-text="开启"
          inactive-text="关闭"
          class="overtime-input"
        >
        </el-switch>
      </el-form-item>
    </el-form>

    <!-- 其他设置-->
    <el-tag class="mh">
      <div class="h-left">
        <div class="line">其他设置</div>
      </div>
      <div class="h-right">
        <button class="h-right-two">保存设置</button>
        <button class="h-right-one">恢复默认</button>
      </div>
    </el-tag>

     <editSys ref="edit-sys" />

  </div>
</template>
<script>
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'

import editSys from './editSys.vue'
let loading // 加载动画

export default {
  components: {
    editSys
  },
  data () {
    return {
      options: [
        {
          value: 'work',
          label: '工作日'
        },
        {
          value: 'calendar',
          label: '日历天'
        }
      ],
      customerId: '',
      customerName: '',

      remindForm: {
        startTime: '10:10:10',
        endTime: '12:15:16',
        detentionDays: '', // 可滞留天数
        calculation: 'calendar', // 计算方式 工作日work  日历天calendar
        remindTime: '', // 即将超期提醒时间
        pushTime: '08:00' // 推送时间 默认 上午8点
      },
      reviewForm: {
        auditSwitch: 'open' // 已开启审核：open； 无需审核：close
      },
      auditSwitchShow: true, // 已开启审核：open； 无需审核：close

      msgForm: {
        switch: 'open',
        switchShow: true,
        remain: 3 // 剩余短信数量
      },

      groupForm: {
        switch: 'open',
        switchShow: true
      },
      sysVisible: true,
      sendProjectSwitch: false,
      sysList: [],
      sysOptions: [],
      selectSys: []
    }
  },
  props: {},
  watch: {},
  mounted () {
    // this.init()
  },

  methods: {
    // 配置初始化
    async initData (customerId, customerName) {
      this.customerId = customerId
      this.customerName = customerName
      this.startLoading()
      await this.initRemind()
      await this.initReview()
      this.endLoading()
      this.initSysList()
    },
    handleSys (e) {
      console.log('eeeeww', e)
      this.sysOptions.forEach(item => {
        this.sysList.forEach(n => {
          if (item === n.platformId) {
            this.selectSys.push(n)
          }
        })
      })
    },
    handleEditSys (item) {
      this.$refs['edit-sys'].initData(item, this.customerId)
    },
    handleSysDel (item, index) {
      this.selectSys.splice(index, 1)
      this.sysOptions.forEach((n, i) => {
        if (n === item.platformId) this.sysOptions.splice(i, 1)
      })
    },
    handlesysTag (n) {
      this.sysOptions.forEach((item, i) => {
        if (n === item) this.sysOptions.splice(i, 1)
      })
      this.selectSys.forEach((item, i) => {
        if (n === item.platformId) this.selectSys.splice(i, 1)
      })
    },
    initSysList () {
      let params = {
        customerId: this.customerId,
        actionKey: 'PROJECT_ASSIST'
      }
      this.$http
        .post('/third/thirdplatform/customer/list-selectable-platforms-by-action', params)
        .then(({ data: res }) => {
          if (res.code === 0) {
            this.sysList = res.data
          }
        })
      this.$http
        .post('/gov/project/parameter/load-thirdplatform-config', { customerId: this.customerId })
        .then(({ data: res }) => {
          if (res.code === 0) {
            this.selectSys = res.data.customerSelectedPlatformList
            this.sendProjectSwitch = Number(res.data.sendProjectSwitch) === 1 || false
            this.sysOptions = res.data.customerSelectedPlatformList.map(item => item.platformId)
          }
        })
    },
    saveSys () {
      // if (!this.sendProjectSwitch) {
      //   return this.$message.warning('流转外部按钮必须开启')
      // }
      let params = {
        customerId: this.customerId,
        sendProjectSwitch: this.sendProjectSwitch ? 1 : 0,
        customerSelectedPlatformList: this.selectSys.map(item => {
          return {
            ...item,
            customerId: this.customerId
          }
        })
      }
      this.$http
        .post('/gov/project/parameter/save-thirdplatform-config', params)
        .then(({ data: res }) => {
          if (res.code === 0) {
            this.$message.success('保存成功')
          }
        })
    },
    resetSys () {
      this.selectSys = []
      this.sysOptions = []
      this.sendProjectSwitch = false
    },
    // 滞留提醒初始化
    async initRemind () {
      // const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/project/parameter/remindinit"
      const url = '/gov/project/parameter/remindinit'

      const params = {
        customerId: this.customerId
      }
      const { data, code, msg, internalMsg } = await requestPost(url, params)
      if (code === 0) {
        this.remindForm = data
      } else {
        this.$message.error(msg + '：' + internalMsg)
      }
    },

    // 议题发布审核初始化
    async initReview () {
      this.startLoading()
      // const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/issue/parameter/reviewinit"
      const url = '/gov/issue/parameter/reviewinit'

      const params = {
        customerId: this.customerId
      }
      const { data, code, msg, internalMsg } = await requestPost(url, params)
      if (code === 0) {
        this.reviewForm = data
        if (data.auditSwitch === 'open') {
          this.auditSwitchShow = true
        } else {
          this.auditSwitchShow = false
        }
      } else {
        this.$message.error(msg + '：' + internalMsg)
      }
    },

    // 保存滞留提醒
    async saveRemind () {
      this.startLoading()
      // const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/project/parameter/remindsave"
      const url = '/gov/project/parameter/remindsave'

      const params = {
        customerId: this.customerId,
        ...this.remindForm
      }
      const { data, code, msg, internalMsg } = await requestPost(url, params)
      if (code === 0) {
        this.$message.success('保存成功')
      } else {
        this.$message.error(msg + '：' + internalMsg)
      }
      this.endLoading()
    },

    // 保存议题发布审核
    async saveReview () {
      this.startLoading()
      // const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/issue/parameter/reviewsave"
      const url = '/gov/issue/parameter/reviewsave'
      this.reviewForm.auditSwitch = this.auditSwitchShow ? 'open' : 'close'
      const params = {
        customerId: this.customerId,
        ...this.reviewForm
      }
      const { data, code, msg, internalMsg } = await requestPost(url, params)
      if (code === 0) {
        this.$message.success('保存成功')
      } else {
        this.$message.error(msg + '：' + internalMsg)
      }
      this.endLoading()
    },
    // 恢复滞留提醒
    async defaultRemind () {
      this.startLoading()
      await this.setDefaultRemind()
      await this.initRemind()
      this.endLoading()
    },
    async setDefaultRemind () {
      // const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/project/parameter/reminddefault"
      const url = '/gov/project/parameter/reminddefault'

      const params = {
        customerId: this.customerId
      }
      const { data, code, msg, internalMsg } = await requestPost(url, params)
      if (code === 0) {
      } else {
        this.$message.error(msg + '：' + internalMsg)
      }
    },
    async defaultReview () {
      this.startLoading()
      await this.setDefaultReview()
      await this.initReview()
      this.endLoading()
    },
    // 恢复议题发布审核
    async setDefaultReview () {
      // const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/issue/parameter/reviewdefault"
      const url = '/gov/issue/parameter/reviewdefault'

      const params = {
        customerId: this.customerId
      }
      const { data, code, msg, internalMsg } = await requestPost(url, params)
      if (code === 0) {
      } else {
        this.$message.error(msg + '：' + internalMsg)
      }
    },
    diaCancel () {
      this.$emit('cancleBack')
    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.line {
  position: relative;

  width: 120px;
  border-bottom: 3px solid #17b3a3;
}
.el-card__body {
  padding: 0px;
}
.m-body {
  width: 100%;
  padding-top: 0px;
}
.select-date {
  margin-left: 100px;
}

.mh {
  width: 100%;
  height: 50px;
  display: flex;
  background-color: white;
  border-color: white;
  color: black;
  padding: 0px;
  border-bottom: 2px solid #eeeeee;
}
.mh-child {
  margin-top: 30px;
  position: relative;
}
/* div.el-switch.is-checked{

		} */
div.el-switch {
  margin-left: 60px;
}
.el-switch__core {
  height: 25px;
  width: 50px;
  border-radius: 25px;
}
.el-switch__core:after {
  width: 20px;
  height: 20px;
}
.el-switch.is-checked .el-switch__core::after {
  margin-left: -20px;
}

.h-left {
  padding: 9px;
  margin: auto 0;
  font-size: 15px;
  position: relative;
  width: 70%;
  padding-left: 0px;
  padding-top: 15px;
  padding-bottom: 2px;
}
.h-right {
  padding-bottom: 2px;
  padding-top: 8px;
  font-size: 15px;
  position: relative;
  width: 30%;
}
.h-right-one {
  background-color: #d4d2ce;
  color: black;
  border: 0px;
  width: 30%;
  height: 30px;
  text-align: center;
  padding-left: 2px;
  padding-right: 2px;
  border-radius: 4px;
  float: right;
}
.h-right-one:hover {
  background-color: #deddda;
  color: black;
  border: 0px;
  width: 30%;
  height: 30px;
  text-align: center;
  padding-left: 2px;
  padding-right: 2px;
  border-radius: 4px;
  float: right;
}
.h-right-two {
  background-color: #17b3a3;
  color: white;
  width: 30%;
  height: 30px;
  border: 0px;
  margin-left: 10px;
  text-align: center;
  padding-left: 2px;
  padding-right: 2px;
  border-radius: 4px;
  float: right;
}
.h-right-two:hover {
  background-color: #18bfac;
}

.diaCancel {
  float: right;
  margin-right: 10px;
  width: 30%;
  height: 30px;
  padding: 0px;
  font-size: 15px;
}

.set-accont {
  width: 250px;
  text-align: right;
  font-size: 15px;
  padding-right: 30px;
  background-color: white;
  color: black;
  border-color: white;
}
.set-overtime {
  width: 250px;
  text-align: right;
  font-size: 16px;
  padding-right: 30px;
  background-color: white;
  color: black;
  border-color: white;
}
.overtime-input {
  width: 230px;
  border-radius: 0px;
}
.el-input--medium {
  text-align: center;
}
input.el-input__inner {
  border-radius: 0px;
  text-align: center;
  padding-right: 5px;
}
.btn {
  background-color: #f1f1f1;
  border: 1px solid #dcdfe6;
}
.el-from-item :hover {
  background-color: #f7f7f7 !important;
  border: 1px solid #dcdfe6;
}
.btn-add {
  font-size: 20px;
  height: 36px;
  padding-top: 2px;
  padding-left: 8px;
  padding-right: 22px;
  padding-bottom: 6px;
  border-radius: 0px;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  width: 10px;
}
.btn-delet {
  font-size: 20px;
  height: 36px;
  padding-top: 2px;
  padding-left: 12px;
  padding-right: 18px;
  padding-bottom: 6px;
  border-radius: 0px;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  width: 10px;
}

div.set-overtime.el-input.el-input--medium.el-input--suffix {
  padding-right: 0px;
}

.sys-list {
  .sys-list-item {
    display: flex;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
    img {
      width: 30px;
      height: 30px;
    }
    span {
      margin: 0 20px;
    }
  }
}
</style>