form.vue 5.14 KB
<template>
  <div class="form-container">
    <van-form @submit="onSubmit">
      <van-field
        class="field-form-item"
        readonly
        clickable
        required
        name="organName"
        :value="boxInfo.organName"
        label="机顶盒所属单位"
        placeholder="请选择组织单位"
        :right-icon="showOrg ? 'arrow-up' : 'arrow-down'"
        @click="showOrg = true"
        :rules="[
          { required: true, message: '请选择组织单位', trigger: 'change'}
        ]"
      />
      <van-popup v-model="showOrg" position="bottom">
        <van-picker
          show-toolbar
          :columns="orgNameList"
          @confirm="onConfirmOrg"
          @cancel="showOrg = false"
        />
      </van-popup>
      <van-field
        class="field-form-item"
        v-model="boxInfo.macURL"
        required
        name="macURL"
        label="机顶盒Mac地址"
        placeholder="请填写机顶盒Mac地址"
        :rules="[
          { required: true, message: '请填写机顶盒Mac地址', trigger: ['blur', 'change'] },
          { pattern: /^[A-Fa-f0-9]{2}([-:]?[A-Fa-f0-9]{2})([-:.]?[A-Fa-f0-9]{2})([-:]?[A-Fa-f0-9]{2})([-:.]?[A-Fa-f0-9]{2})([-:]?[A-Fa-f0-9]{2})$/, message: '请填写正确的Mac地址', trigger: ['blur', 'change']}
        ]"
      />
      <div class="form-page-button">
        <van-button type="default" native-type="submit" v-if="actived === '1'"
          >激活</van-button
        >
        <van-button type="default" native-type="submit" v-if="actived === '2'"
          >上报</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
export default {
  props: ["actived"],
  data() {
    return {
      boxInfo: {},
      orgNameList: [],
      orgList: [],
      showOrg: false,
      showUser: false,
    };
  },
  mounted() {
    this.getorganName();
  },
  methods: {
    // 获取所属单位
    getorganName() {
      let vm = this;
      vm.$https({
        url: "boxOperation/getList",
        method: "get",
        authType: this.backToken,
      })
        .then((res) => {
          if (res.data.resultCode === "200") {
            if(this.actived==='1'){
              this.orgList = res.data.data.filter(item=>item.status !==2)
            }
            if(this.actived==='2'){
              this.orgList = res.data.data.filter(item=>item.status===2)
            }
            vm.orgNameList = this.orgList.map((item) => item.organName);
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    onConfirmOrg(value, index) {
      this.boxInfo.organName = value;
      this.boxInfo.organId = this.orgList[index].organId;
      this.boxInfo.id = this.orgList[index].id;
      this.showOrg = false;
    },
    onSubmit() {
      if (this.actived === "1") {
        // 激活
        this.submitData("2");
      } else {
        // 上报
        this.submitData("3");
      }
    },
    submitData(status) {
      let vm = this;
      const param = {
        organName: this.boxInfo.organName,
        organId: this.boxInfo.organId,
        id: this.boxInfo.id,
        mac: this.boxInfo.macURL,
        status: status,
      };
      vm.$https(
        {
          url: "boxOperation/update",
          method: "put",
          authType: this.backToken,
        },
        vm.$qs.stringify(param)
      )
        .then((res) => {
          if (res.data.resultCode === "200") {
            if(status === '2'){
              this.$router.replace({path:"/success",query:{txt:'激活成功!机顶盒登录密码为'+res.data.data+',该密码为机顶盒登录密码,请妥善保存。',url:'/opt'}})
            }else{
              this.$router.replace({path:"/success",query:{txt:'上报成功',url:'/opt'}})
            }
          } else {
            this.$toast(res.data.message);
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="scss">
.form-container {
  .van-form {
    padding: 24px;
    background: #ffffff;
    border-radius: 0 0 4px 4px;
    .van-field {
      background: #f5f5f5;
      border-radius: 4px;
      .van-field__left-icon {
        margin-right: 12px;
      }
    }
    .van-cell--required::before {
      left: -10px;
      color:#A4151D;
    }
  }
  .form-page-button {
    text-align: center;
    background: #a4151d;
    border-radius: 4px;
    position: absolute;
    bottom: 40px;
    left: 24px;
    right: 24px;
    box-sizing: border-box;
    .van-button {
      font-size: 16px;
      color: #fff;
      background-color: transparent;
      border: none;
    }
  }
  .field-form-item.van-cell {
    display: block;
    padding: 8px 0 16px 0;
    background-color: transparent;
    border-bottom: none;
    .van-field__label {
      width: 100%;
      color: #333;
      font-size: 14px;
      font-weight: normal;
      margin-bottom: 16px;
    }
    .van-field__value {
      background: #f5f5f5;
      border-radius: 4px;
      padding: 8px 20px;
    }
    &::after {
      border: none;
    }
    .van-field__control {
      color: #333;
      font-size: 14px;
      font-weight: normal;
    }
  }
  .van-tabs__nav--card {
    margin: 0;
  }
}
</style>