JiangningUrbanManagePc/src/views/components/personageTask/index.vue

<template>
  <!-- 选择事件，及派发按钮 -->
  <dia-log ref="taskDialog" width="30%" :title="title">
    <el-form :inline="true" :model="taskForm" class="demo-form-task" ref="formTask" :rules="rules">
      <el-row>
        <el-col :span="24">
          <el-form-item>
            <template slot="label">
              <div class="new-event-form">
                <div class="ball"></div>
                <span>人员名称：</span>
              </div>
            </template>
            <div class="form-div">{{ info ? info.userName : "" }}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item>
            <template slot="label">
              <div class="new-event-form">
                <div class="ball"></div>
                <span>当前地址：</span>
              </div>
            </template>
            <div class="form-div">{{ info ? info.address : "" }}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="task">
            <template slot="label">
              <div class="new-event-form">
                <div class="ball"></div>
                <span>事件名称：</span>
              </div>
            </template>
            <el-select v-model="taskForm.task" placeholder="请选择事件">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="btns">
            <div class="btn" @click="cancel('formTask')">取消</div>
            <div class="btn btnTwo" @click="confirm('formTask')">确定</div>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </dia-log>
</template>
<script>
import diaLog from "../../components/dialog/index.vue"
import { ViewListPage, autoSubmit, getBpmOperateVo, distributeSaveData } from "@/api/bigScreenApi/robot.js"
export default {
  components:{diaLog},
  data() {
    return {
      title:"任务派发",
      taskForm:{
        task:"",
      },
      options:[],
      rules:{
        task:[
          {required:true,message:"请选择事件",trigger:"change"}
        ]
      },
      info:null,
    }
  },
  mounted() {
    this.getViewListPageList();
  },
  methods:{
    open(info){
      this.info = info;
      this.$refs.taskDialog.open();
    },
    getViewListPageList(){
      let data = {'queryValue' : [], "myInstanceClassify" : "all"}
      ViewListPage({viewCode:'event-all-list',pageNo:"1",pageSize:"50"}, data).then(res => {
        console.log(res,"获取的事件列表");
        if(res.code == 200) {
          res.result.records.forEach(item => {
            let obj = {};
            obj["label"] = item.name;
            obj["value"] = item.id;
            this.options.push(obj);
          })
        }
        
      })

    },
    // 取消按钮
    cancel(refForm){
      this.$refs[refForm].resetFields();
      this.$refs.dialog5.Close();
    },
    // 确定按钮
    confirm(refForm){
      autoSubmit().then(res=>{
        
      })
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .demo-form-task {
  .btns {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    .btn {
      width: 91px;
      height: 30px;
      background: rgba(0, 60, 116, 0.6);
      box-shadow: inset 0px 0px 6px 0px #00c2ff;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      border: 1px solid rgba(181, 207, 255, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: "Source Han Sans CN-Regular";
      font-weight: 400;
      color: #d3eef2;
      line-height: 20px;
      cursor: pointer;
    }
    .btnTwo {
      margin-left: 15px;
    }
  }
  .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    content: ' ';
    width: 0px;
    margin-right: 0px;
  }
  .new-event-form {
    display: flex;
    align-items: center;
    .ball {
      width: 4px;
      height: 4px;
      background: #daebff;
      box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25),
        0px 0px 5px 0px rgba(229, 241, 255, 0.25);
      border-radius: 20px 20px 20px 20px;
      margin-right: 15px;
    }
    span {
      font-size: 14px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      color: #CCCCCC;
      line-height: 35px;
    }
  }
  .el-form-item__content {
    // background-image: url("../../../assets/images/timebg.png");
    .form-div {
      font-size: 14px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      color: #CCCCCC;
      line-height: 35px;
    }
    background-size: 100% 100%;
    width: 250px;
    height: 35px;
    .el-input__prefix {
      display: none;
    }
    // .el-input--medium {
    //   background-color: transparent;
    //   width: 250px;
    // }
    .el-select {
      background-color: transparent;
      background-image: url("../../../assets/images/timebg.png");
      background-size: 100% 100%;
      width: 400px;
      height: 35px;
      .el-input
        .el-input__suffix
        .el-input__suffix-inner
        .el-icon-arrow-up {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      .el-input
        .el-input__suffix
        .el-input__suffix-inner
        .el-icon-arrow-up::before {
        content: "";
        background: url("~@/assets/images/pull-down.png") center center
          no-repeat;
        background-size: 100% 100%;
        // position: absolute;
        width: 100%;
        height: 22px;
        // top: 50%;
        // left: 50%;
        // transform: translate(-50%, -50%);
        transform: rotate(180deg);
      }
      .el-input__suffix .el-input__suffix-inner .el-select__caret {
        width: 22px;
      }
      .el-input__suffix {
        margin-right: 5px;
      }
      .el-input__inner {
        background-color: transparent;
        border: none;
        width: 100%;
        height: 35px;
        font-size: 14px;
        font-family: "Source Han Sans CN-Medium";
        font-weight: 500;
        color: #e9f4ff;
      }
      .el-input__inner::placeholder {
        /* 在这里添加你想要修改的 placeholder 样式 */
        font-size: 14px;
        font-family: "Source Han Sans CN-Regular";
        font-weight: 400;
        color: #d3eef2;
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
      }
    }
  }
}
</style>