detail.vue

<!-- 定制包管理/详情 -->
<template>
  <div>
    <el-dialog
      title="查看详情"
      :visible.sync="showDialog"
      width="50%"
      :before-close="handleClose">
      <el-form :model="item" label-width="180px">
          <el-col :offset="3" :span="21">
              <div class="model-title">
              <span class="title">目标设置</span>
              <span class="info">
                Tips：这里将会影响您的私有数据模型算法，<span>准确填写</span>有助于提升生成人群包的质量和后续模型优化。
              </span>
            </div>
          </el-col>
          <el-col :offset="3" :span="21">
              <el-form-item label="投放目标应用名：" required>
                    {{ item && item.appName }}
                  </el-form-item>
                  <el-form-item prop="appLink" label="应用市场下载链接：" required>
            {{ item && item.appLink }}
            </el-form-item>
          </el-col>
          <el-col :offset="3" :span="21">
            <div class="model-title">
              <span class="title">选择数据源</span>
            </div>
            <el-form-item prop="dataSource" label="" label-width="80px">
              <el-radio-group v-model="item.dataSource">
                  <el-radio v-for="obj in RADIOS.dataSource"
                         :label="obj.value"
                         :key="obj.value"
                         :disabled="obj.value !== item.dataSource"
                         class="m-r-20">{{obj.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

                <el-col :offset="3" :span="21">
            <div class="model-title">
              <span class="title">基础标签</span>
            </div>
            <el-form-item prop="userTag"
                      label="用户属性："
                      required>
               <ul v-if="filterUserTag">
                  <li v-for="obj in filterUserTag">{{obj.name}}</li>
              </ul>
            </el-form-item>
            <el-form-item label="操作系统：" required>
              <el-radio-group v-model="item.baseTag && item.baseTag.platform">
                  <el-radio v-for="obj in RADIOS.platform"
                         :label="obj.value"
                         :disabled="item.baseTag ? item.baseTag.platform !== obj.value : true"
                         :key="obj.value">{{obj.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop="" label="排除关键字：">
              {{ item.baseTag && item.baseTag.excludeKeywords }}
            </el-form-item>
            <el-form-item prop="" label="定制活跃用户数量：">
              {{ item.baseTag && item.baseTag.activeUserNum }}
            </el-form-item>
          </el-col>

          <el-col :offset="3" :span="21">
            <div class="model-title">
              <span class="title">高级标签</span>
            </div>
            <el-form-item prop="active" label="活跃度：">
              <el-radio-group v-model="item.highTag && item.highTag.active">
                  <el-radio v-for="obj in RADIOS.active"
                         :label="obj.value"
                         :disabled="item.baseTag ? item.baseTag.platform !== obj.value : true"
                         :key="obj.value">{{obj.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop="gameNum" label="游戏频次：">
              <el-radio-group v-model="item.highTag && item.highTag.gameNum">
                  <el-radio v-for="obj in RADIOS.gameNum"
                         :label="obj.value"
                         :disabled="item.baseTag ? item.baseTag.platform !== obj.value : true"
                         :key="obj.value">{{obj.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop="gameStick" label="游戏粘性：">
              <el-radio-group v-model="item.highTag && item.highTag.gameStick">
                  <el-radio v-for="obj in RADIOS.gameStick"
                         :label="obj.value"
                         :disabled="item.baseTag ? item.baseTag.platform !== obj.value : true"
                         :key="obj.value">{{obj.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :offset="3" :span="21">
            <div class="model-title">
              <span class="title">人群包设置</span>
            </div>
            <el-form-item prop="audienceName" label="人群包名称：" required>
               {{ item.audienceName }}
            </el-form-item>
            <el-form-item prop="remark" label="人群包描述：">
                     {{ item.remark }}
            </el-form-item>
          </el-col>
          <el-col :offset="3" :span="21">
            <div class="model-title">
              <span class="title">投放设置</span>
            </div>
            <el-form-item prop="accountInfos"
                      label="选择投放媒体和账号："
                      required>
            <ul v-if="item.accountInfos"
                    v-for="account in item.accountInfos">
                <li v-for="obj in account.mediaAccountNames">{{obj}}</li>
            </ul>
            </el-form-item>
          </el-col>

        </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script type="text/javascript">
import { RADIOS } from './data'
import { queryUserTagApi } from '@/api/audience/featured'
export default {
    components: {},
    mixins: [],
    props: {
      show: {
        type: Boolean,
        default: false
      },
      item: {
          type: Object,
            default: () => ({})
      }
    },
    data() {
        return {
            showDialog: this.show || false,
            RADIOS,
            userTagList: []
        }
    },
    methods: {
        handleClose() {
        this.showDialog = false
      },
      queryUserTag() {
          queryUserTagApi().then(res => {
              let { code, message, data } = res
              if (code === 200) {
                  this.userTagList = data
              } else {
                  this.$message({
                      type: 'error',
                      message
                  })
              }
          })
      }
    },
    computed: {
        filterUserTag() {
            if(!(this.item && this.item.baseTag && this.item.baseTag.userTag)){
                return []
            } else {
                let tags = this.item.baseTag.userTag.split(',')
                return this.userTagList && this.userTagList.filter(i => {
                    return tags.includes(i.code)
                })
            }
        }
    },
    created() {
    },
    mounted() {
    },
        watch: {
      show(val) {
        this.showDialog = val
        if (val) this.queryUserTag()
      },
      showDialog(val) {
        this.$emit('update:show', val)
      }
    }
}
</script>
<style scope>
.model-title {
    margin: 30px 0;
}
.model-title .title {
    font-weight: 600;
    color: #4f9aff;
    font-size: 16px;
    margin-right: 30px;
    width: 90px;
    text-align: right;
    display: inline-block;
}
.model-title .info {
    color: #aaa;
}
.model-title .info span {
    color: red;
}
ul {
    list-style: none;
    margin: 0px;
    padding-left: 0px;
}
</style>