dvcp_v2_webapp/project/fengdu/AppOutSource/AppRateManage/components/RuleManage.vue

<template>
  <div>
    <ai-list>
      <template #content>
        <div class="card_list">
          <div class="card" v-for="(item,index) in cardList" :key="index">
            <h2>{{ item.label }}</h2>
            <p class="color1">{{ item.value || 0 }}</p>
          </div>
        </div>
        <ai-title title="评分列表"></ai-title>
        <ai-search-bar>
          <template #left>
            <el-button type="primary" icon="iconfont iconAdd" @click="handleAdd">添加</el-button>
            <ai-select
                v-model="search.applyItemId"
                @change="(search.current = 1), getList()"
                placeholder="请选择事件类型"
                :selectList="dictList">
            </ai-select>
            <ai-select
                v-model="search.applyItemId"
                @change="(search.current = 1), getList()"
                placeholder="请选择自定义事件"
                :selectList="dictList">
            </ai-select>
            <ai-select
                v-model="search.applyItemId"
                @change="(search.current = 1), getList()"
                placeholder="请选择状态"
                :selectList="dictList">
            </ai-select>
            <ai-select
                v-model="search.applyItemId"
                @change="(search.current = 1), getList()"
                placeholder="有效地区"
                :selectList="dictList">
            </ai-select>
          </template>
        </ai-search-bar>
        <ai-table
            :tableData="tableData"
            :col-configs="colConfigs"
            :total="total"
            style="margin-top: 6px;"
            :current.sync="search.current"
            :size.sync="search.size"
            @getList="getList">

          <el-table-column
              label="状态"
              slot="state">
            <template v-slot="{ row }">
              <span class="start">启用</span>
            </template>
          </el-table-column>

          <el-table-column slot="options" width="180px" fixed="right" label="操作" align="center">
            <template slot-scope="{ row }">
              <div class="table-options">
                <el-button type="text">停用</el-button>
                <el-button type="text">编辑</el-button>
                <el-button type="text">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <ai-dialog title="评分规则" :visible.sync="dialog" width="800px">
      <el-form ref="formRef" :model="form" label-width="120px">
        <el-form-item label="事件类型：">
          <ai-select
              v-model="form.applyItemId"
              placeholder="请选择事件类型"
              :selectList="dictList">
          </ai-select>
        </el-form-item>
        <el-form-item label="自定义事件：">
          <ai-select
              v-model="form.applyItemId"
              placeholder="请选择自定义事件"
              :selectList="dictList">
          </ai-select>
        </el-form-item>
        <el-form-item label="规则：">常规</el-form-item>
        <el-form-item label="分值：">
          <el-input v-model="form.num" size="small" placeholder="请输入分值"></el-input>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </div>

</template>

<script>
export default {
  name: "RuleManage",
  data() {
    return {
      search:{},
      dictList:[],
      cardList: [
        {
          label: '规则总数量',
          value: 122
        },
        {
          label: '正向事件规则项',
          value: 122
        },
        {
          label: '正向事件总分数',
          value: 122
        },
        {
          label: '负向事件规则项',
          value: 122
        },
        {
          label: '负向事件总分数',
          value: 122
        },
      ],
      total: 10,
      colConfigs: [
        {type: "selection"},
        { prop: 'integralUserName',  label: '类型', align: 'center' },
        { prop: 'areaName',  label: '事件', align: 'center' },
        { prop: 'girdName',  label: '规则', align: 'center' },
        { prop: 'createTime',  label: '分值', align: 'center' },
        { slot: 'state',  label: '状态', align: 'center' },
      ],
      tableData: [],
      dialog:false,
      form:{}
    }
  },
  methods: {
    handleAdd(){
      this.dialog = true
    },
    getList() {

    }
  },
}
</script>

<style lang="scss" scoped>
.card_list {
  display: flex;

  .card {
    flex: 1;
    height: 96px;
    background: #F9F9F9;
    border-radius: 2px;
    margin-right: 20px;
    padding: 16px 24px;
    box-sizing: border-box;

    h2 {
      color: #888888;
      font-weight: 600;
      font-size: 16px;
    }

    p {
      margin-top: 8px;
      font-size: 24px;
      font-weight: 600;
    }

    .color1 {
      color: #2891FF;
    }

    .color2 {
      color: #22AA99;
    }

    .color3 {
      color: #F8B425;
    }
  }

  .start{
    font-size: 14px;
    color: #2EA222;
  }

  .stop{
    font-size: 14px;
    color: #FF4466;
  }

  .card:last-child {
    margin-right: 0;
  }
}
</style>