index.vue

<template>
  <div>
    <el-dialog
      title="添加媒体账号"
      :visible.sync="shows"
      :show-close="!1"
      :close-on-click-modal="!1"
      width="1150px"
    >
      <!-- 操作区域 -->
      <el-form >
          <el-form-item label="综合查询">
        <el-input
          v-model="form.name"
          placeholder="请输入用户名/媒体账号ID"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="getLists"
        />  <el-button type="primary" icon="el-icon-search" size="mini" @click="getLists">搜索</el-button>
      </el-form-item>
      </el-form>
      <el-form ref="form" :rules="rules" :model="queryParams" :inline="true">
        <el-form-item label="媒体平台" prop="mediaCode">
          <el-select v-model="queryParams.mediaCode" clearable size="small" style="width: 100px">
            <el-option
              v-for="(item,index) in customerOptions"
              :key="index"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="登录用户名" prop="loginName">
          <el-input
            v-model="queryParams.loginName"
            placeholder="请输入用户名"
            clearable
            size="small"
            style="width: 130px"
          />
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input
            show-password
            v-model="queryParams.password"
            placeholder="请输入密码"
            clearable
            size="small"
            style="width: 130px"
          />
        </el-form-item>
          <el-form-item label="媒体账号ID" prop="advertiserId" v-if="queryParams.mediaCode === 'gdt'">
          <el-input
            v-model="advertiserId"
            placeholder="请输入媒体账号ID"
            clearable
            size="small"
            style="width: 120px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addMedia">添加</el-button>
          <el-button @click="Download">模板下载</el-button>
        </el-form-item>
        <el-form-item>
          <el-upload
            class="upload-demo"
            action="#"
            accept=".xlsx"
            :http-request="beforeUpload"
            multiple
            :limit="1"
          >
            <el-button size="small" type="primary" :loading="buttonLoading">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- 数据区域 -->
      <el-table v-loading="loading" :data="customerList" style="width: 100%" border>
        <el-table-column label="登录用户名" prop="loginName" width="180">
          <template slot-scope="scope">
            <div v-if="scope.row.updateStatus">
              <el-input
                v-model="scope.row['loginName']"
                placeholder="请输入用户名"
                @change="updateChange(scope.row)"
                clearable
                size="small"
              />
            </div>
            <div v-else>{{scope.row['loginName']}}</div>
          </template>
        </el-table-column>
        <el-table-column label="登录密码" prop="password">
          <template slot-scope="scope">
            <div v-if="scope.row.updateStatus">
              <el-input
               
                v-model="scope.row['password']"
                placeholder="请输入密码"
                @change="updateChange(scope.row)"
                clearable
                size="small"
              />
            </div>
            <div v-else>•••••••••</div>
            <!-- {{scope.row['password']}} -->
          </template>
        </el-table-column>
            <el-table-column label="媒体平台" prop="password">
          <template slot-scope="scope">
            <div v-if="scope.row.updateStatus">
              <!-- <el-input
                show-password
                v-model="scope.row['mediaCodeValue']"
                placeholder="请输入密码"
                @change="updateChange(scope.row)"
                clearable
                size="small"
              /> -->
              <el-select v-model="scope.row['mediaCode']"   clearable size="small" style="width: 100px">
            <el-option
              v-for="(item,index) in customerOptions"
              :key="index"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
            </div>
            <div v-else>{{customerOptions.filter((item)=>{ return item.value==scope.row['mediaCode']})[0].name}}</div>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item,index) in STATICSDATA.table.head"
          :key="index"
          :label="item.label"
          :prop="item.prop"
        />
        <el-table-column label="ads绑定状态" prop="bindStatus">
          <template slot-scope="scope">
            <div>{{scope.row['bindStatus'] === 'SUCCESS' ? '成功': '失败'}}</div>
          </template>
        </el-table-column>
        <el-table-column label="媒体返回状态" prop="loginStatus">
          <template slot-scope="scope">
            <div v-if="scope.row['loginStatus'] === 'SUCCESS'">成功</div>
            <div v-else>
              失败
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row['errorMsg']"
                placement="bottom-end"
              >
                <i class="el-icon-warning-outline"></i>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
         <el-table-column label="云镜功能状态" prop="bindStatus">
          <template slot-scope="scope">
            <div>{{scope.row['status'] === 'DISABLE' ? '不可用': '可用'}}</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="100" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleUpdate(scope.row)" type="text" size="small">修改</el-button>
            <!-- <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination
        v-show="form.total>0"
        :total="form.total"
        :page.sync="form.current"
        :limit.sync="form.size"
        @pagination="getLists"
      />
      <!-- 底部区域 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import bus from "../bus";
import STATICSDATA from "./index.json";
import {
  addMedia,
  Downloads,
  getLists,
  updateMedia,
  deleteMedia,
  trackUpload,
  hackDownloadFile
} from "@/api/cloud/pack";
export default {
  watch: {
    customerId: {
      handler(va) {
        if (va) this.getLists();
      },
      deep: true
    }
  },
  data() {
    return {
      form: {
        total: 1,
        current: 1,
        size: 10
      },
      buttonLoading:false,
      loading: false,
      customerList: [],
      STATICSDATA,
      // 表单校验
      rules: {
        mediaCode: [
          { required: true, message: "平台不能为空", trigger: "blur" }
        ],
        loginName: [
          { required: true, message: "登录名不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "登录密码不能为空", trigger: "blur" }
        ]
      },
      queryParams: {
        mediaCode: null,
        loginName: null,
        password: null
      },
      advertiserId: null,
      shows: false,
      customerOptions: [
        { name: "头条", value: "toutiao" },
        { name: "快手", value: "kuaishou" },
        { name: "广点通", value: "gdt" }
      ],
      fileList: [],
      // 客户ID
      customerId: null
    };
  },
  mounted() {
    // 响应组件状态
    bus.$on("media-shows", va => {
      this.shows = va;
    });
  },
  methods: {
    // 上传文件
    beforeUpload(file) {
      this.buttonLoading = true
      var formData = new FormData()
      formData.append('file', file.file)
      formData.append('customerId', this.customerId)
      trackUpload(formData).then(res=>{
        this.msgSuccess("上传成功");
        this.getLists()
        this.buttonLoading = false
      }).catch(err=>{
        console.error(err+'文件类型或内容错误')
      })
    },
    // 快速修改
    updateChange(value) {
     // alert(1)
      let { id, loginName, password ,mediaCode ,advertiserId} = value;
      updateMedia({
        id: id,
        loginName: loginName,
        password: password,
        mediaCode :mediaCode ,
        advertiserId:advertiserId
      })
        .then(res => {
          this.msgSuccess("修改成功");
          this.getLists();
        })
        .catch(err => {
          console.error(err);
        });
    },
    //账号-列表
    getLists() {
      this.loading = true;
      let { current, size ,name} = this.form;
      getLists({
        customerId: Number(this.customerId),
        current: current,
        size: size, 
        name:name,
        mediaCode:''
      })
        .then(res => {
          res.data.records.filter(item => {
            item.updateStatus = false;
          });
          this.customerList = res.data.records;
          this.form.total = res.data.total;
          this.loading = false;
        })
        .catch(err => {
          console.error(err);
        });
    },
    // 修改-账号
    handleUpdate(row) {
      this.customerList.map(item => {
        if (item.loginName === row.loginName) {
          item.updateStatus = !item.updateStatus;
          if( !item.updateStatus){
            this.updateChange(row)
          }
        }
      });
    },
    // 删除-账号
    handleDelete(row) {
      let { id } = row;
      deleteMedia({
        id: id
      })
        .then(res => {
          this.msgSuccess("删除成功");
          this.getLists();
        })
        .catch(err => {
          console.error(err);
        });
    },
    // 添加-账号
    addMedia() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let o = { ...this.queryParams };
          o.customerId = this.customerId;
          if(this.queryParams.mediaCode === 'gdt' && this.advertiserId){
            o.advertiserId = this.advertiserId
          }
          addMedia(o)
            .then(res => {
              this.msgSuccess("添加成功");
              this.queryParams = {
                mediaCode: null,
                loginName: null,
                password: null
              };
              this.advertiserId = null
              this.getLists();
            })
            .catch(err => {
              console.error(err);
              this.msgError("添加失败");
            });
        }
      });
    },
    // 模板下载
    Download() {
      Downloads({})
        .then(res => {
          let filename = undefined
          try {
          if (res.headers && res.headers['content-disposition'] &&
              res.headers['content-disposition'].match(/filename=([\w-]+\.xlsx|xls)/)) {
             filename = res.headers['content-disposition'].match(/filename=([\w-]+\.xlsx|xls)/)[1]
          }
          } catch(e) {
            console.error(e)
          }
          hackDownloadFile(res.data, filename);
        })
        .catch(err => {
          // console.error(err);
        });
    },
    // 清空
    clear() {
      this.queryParams = {
        mediaCode: null,
        loginName: null,
        password: null
      };
      this.advertiserId = null
      this.customerId = null;
    },
    // 关闭
    cancel() {
      this.shows = false;
      this.$emit("refresh", true);
      this.clear();
    }
  }
};
</script>

<style>
</style>