前端工作总结270-发布逻辑处理

简介: 前端工作总结270-发布逻辑处理
<template>
  <el-dialog
      title="发布"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose">
    <el-form label-width="80px">
      <el-form-item label="项目名">
        <el-input v-model="project_name" placeholder="请输入项目名"></el-input>
      </el-form-item>
      <el-form-item v-for="item in AweMepro" :label="item.name">
        <el-input v-if="item.widget.type == 'input'" v-model="form[item.key]" placeholder="名称"></el-input>
        <!--          <el-select v-else-if="item.widget.type == 'category-select'" v-model="form[item.key]" placeholder="">-->
        <!--            <el-option v-for="row in item.widget.categories" :label="row.title" :value="row.value"></el-option>-->
        <!--          </el-select>-->
        <!--          <el-cascader-->
        <!--            v-else-if="item.widget.type == 'category-select'"-->
        <!--            v-model="form[item.key]"-->
        <!--            :options="item.widget.categories"-->
        <!--            @change="handleChange"-->
        <!--          >-->
        <!--          </el-cascader>-->
        <el-cascader v-else-if="item.widget.type == 'category-select'" v-model="categoryValue"
                     :options="item.widget.categories" @change="handleChange">
          <template slot-scope="{ node, data }">
            <span>{{ data.title }}</span>
          </template>
        </el-cascader>
        <el-switch v-else-if="item.widget.type == 'boolean-select'" v-model="form[item.key]" text="是否原创"></el-switch>
        <el-tag v-else-if="item.widget.type == 'tag-input'" v-for="row in form[item.key]" size="medium" closable>{{
            row
          }}
        </el-tag>
        <el-date-picker
            v-else-if="item.widget.type == 'date-time'"
            v-model="form[item.key]"
            type="datetime"
            placeholder="选择日期时间"
            value-format="timestamp"
        >
        </el-date-picker>
        <el-upload :action="action"
            v-else-if="item.widget.type == 'picture'"
            disabled>
          <img v-if="form[item.key]" :src="form[item.key]" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-upload :action="action"
            v-else-if="item.widget.type == 'cover-pictures'"
            disabled>
          <img v-if="form[item.key]" :src="form[item.key]" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <!-- <div v-for="(item,index) in this.itemsBian">
       <el-input v-if="item.widget.type='input'"  type="item.widget.type" placeholder="请输入名称" v-model="item.name"></el-input>
     </div>-->
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="ListAccept">确 定</el-button>
  </span>
  </el-dialog>
</template>
<script>
import
  EditTags from "@/views/content/ContentComponents/EditTags";
import EditUploads from "@/views/content/ContentComponents/EditUploads";
import MyInput from "@/views/order/accoutTask/MyInput";
import {getAction, postActionXing, putAction} from "@/api";
export default {
  name: "ContentPublish",
  components: {
    EditTags,
    EditUploads,
    MyInput
  },
  data() {
    return {
      value: '',
      categoryValue: [],
      /*品牌名*/
      brand_id: null,
      project_id: 0,
      scope_id: 0,
      /*content_id*/
      content_type: 0,
      /*项目名*/
      project_name: '',
      dialogVisible: false,
      form: {},
      UserToken: {},
      info: null,
      /*视频上传地址*/
      VedioUrl: '',
      /*图片上传地址*/
      ImageUrl: '',
      /*用来存储account的数值*/
      accountListPro: {},
      /*存放despro的数值*/
      differentPro: {},
      /*存放AME的数值*/
      AweMepro: [],
      /*存放accountlist数值*/
      accountListBrand: {},
      /*存放detail*/
      detailPro: {},
      /*存放user*/
      userPro: {},
      itemsBian: {},
    };
  },
  methods: {
    publish(id) {
      this.dialogVisible = true;
      /*任务详情的一个数据接口  {{host}}/task/1*/
      getAction("/task/" + id + "/release").then(res => {
        console.log(res, 8888)
        if (res.code == 404) {
          this.$message({
            message: res.msg,
            type: 'error'
          });
          this.dialogVisible = false;
        }
        /*存储accout的数据*/
        /*  this.accountListPro = res.data.account*/
        /*返回的示例数据brand_id: "12305"
        name: "123"
        pavg: null
        plugin_icon_url: "https://fenfa1.csztv.com/testapi/imgs/bilibili.png"
        plugin_key: "bilibili"
        plugin_name: "Bilibili"
        remote_account_id: "302970"
        status: true*/
        /*存储account_brand的数值*/
        this.accountListBrand = res.data.account_brand
        /*返回对应的实例值
        * videoAuditUsers: Array(3)
        wordAuditUsers: Array(3)*/
        this.AweMepro = res.data.account_plugins
        /*返回对应的实例值
      * description: null
        key: "name"
        name: "名称"
        unified: true
        value_schema: Object
        widget: Object
      * */
        this.differentPro = res.data.different_catalogs
        /*
        * 302970: Object
          category: ""
          intro: ""
          name: ""
          original: ""
          quiz-publish: ""
          tags: ""
          trans_reason: ""
          upload-image: ""
          * */
        this.detailPro = res.data.account_detail
        /*
          * account_name: (...)
        avatar_url: (...)
          brand_id: (...)
          brand_name: (...)
          default_categories: (...)
      d efault_category_names: (...)
        error_code: (...)
          error_message: (...)
          extensions: (...)
          form_items: (...)
          id: (...)
          plugin_icon_url: (...)
          plugin_key: (...)
          plugin_name: (...)
          type: (...)*/
        /*
       */
        this.userPro = res.data.users
        /*返回示例代码
        * access_token: (...)
        account: (...)
        business_module: (...)
        column: (...)
        department_id: (...)
        expire_time: (...)
        ff_login_time: (...)
      ff_open_id: (...)
      ff_time: (...)
      ff_token: (...)
        id: (...)
        login_at: (...)
        name: (...)
        role: (...)*/
        this.info = res.data;
        /*本id1用来判断是数据接口或者是图文数据接口*/
        this.content_type = res.data.content_type
        /*本id表示的是多少行的一个数据id*/
        this.scope_id = id
        /*存入的数值是所需要的一个品牌id的数据值*/
        this.brand_id = res.data.account.brand_id/*
        getActionXing("/internal/plugins/" + this.detailPro.plugin_key + "/catalog-items/different").then(res => {
          console.log(res)
          this.itemsBian = res.data.bilibili
          console.log(this.itemsBian)
          this.itemsBian.map((value, index) => {
            console.log(value.widget.type)
          })
        })*/
        this.form = {
          "name": res.data.title,
          "tags": res.data.tag,
          "upload-image": res.data.thumbnail,
          "cover-pictures": res.data.thumbnail,
        }
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭?')
          .then(_ => {
            this.dialogVisible = false
          })
          .catch(_ => {
            this.dialogVisible = false
          });
    },
    ListAccept() {
      //如果当前是视频资源
      if (this.content_type == 1) {   //视频
        this.form['quiz-publish'] = this.form['quiz-publish'] / 1000;
        this.info.different_catalogs[this.info.account.remote_account_id] = this.form;
        var url = "/internal/users/current/video-url/distribute";
        var data = {
          "brand_id": this.info.account.brand_id,
          "name": this.info.name,
          "video_url": this.info.resource,
          "account_ids": [this.info.account.remote_account_id],
          "unify_catalogs": {},
          "different_catalogs": this.info.different_catalogs,
        }
        postActionXing(url, data).then(res => {
          if (res.data) {
            putAction("/task/" + this.scope_id + "/project", {
              project_id: res.data
            }).then(res => {
              if (res.code == 0) {
                this.$message({
                  message: '发布成功!',
                  type: 'success'
                });
                putAction('/task/' + this.scope_id + '/status', {status: 4}).then(res => {
                })
                this.$emit("ok")
                this.dialogVisible = false;
              }
            })
          }
        });
      }
      /*如果当前是图文资源*/
      else if (this.content_type == 2) {  //图文
        /*cover-pictures*/
        var wordAuditUsers = [];
        for (var i = 0; i < this.info.account_brand.wordAuditUsers.length; i++) {
          wordAuditUsers.push(this.info.account_brand.wordAuditUsers[i].id);
        }
        this.form['quiz-publish'] = this.form['quiz-publish'] / 100;
        this.info.different_catalogs[this.info.account.remote_account_id] = this.form;
        var url = "/internal/users/current/word-projects/distribute";
        var data = {
          "brand_id": this.info.account.brand_id,
          "title": this.info.title,
          "name": this.info.name,
          "body": this.info.resource,
          /*"video_url": this.info.resource,*/
          "account_ids": [this.info.account.remote_account_id],
          "unify_catalogs": {},
          "different_catalogs": this.info.different_catalogs,
          /* "brand_id": this.brand_id,
           "title": this.project_name,
           "body": this.info.resource,
           "account_ids": [this.info.account.remote_account_id],
           "audit_user_ids": wordAuditUsers,
           "unify_catalogs": {},
           "different_catalogs": this.different_catalogs*/
        }
        postActionXing(url, data).then(res => {
          if (res.data) {
            putAction("/task/" + this.scope_id + "/project", {
              project_id: res.data
            }).then(res => {
              console.log(res)
              putAction('/task/' + this.scope_id + '/status', {status: 4}).then(res => {
              })
            })
          }
        })
      }
      /*创建我的视频接口 第一个参数自己手动录入 第二个参数取值任务详情的接口接口*/
      // postActionXing("/internal/users/current/video-projects",{
      //   brand_id:this.account.brand_id,name:this.project_name
      // }).then(
      //     res=>{
      //       this.project_id=res.data
      //       console.log(this.project_id)
      //       /*传入四个个参数 传入title icon_path transcode paths 设置传入的参数 */
      //       postActionXing("/internal/users/current/video-projects/"+this.project_id+"/videos",{
      //         title: this.content.title,
      //         icon_path:this.content.resource,
      //         transcode: true,
      //         paths: [this.content.thumbnail]
      //       })
      //     }
      // )
      /*创建我的图文接口 进行数据的传输*/
      // postActionXing("/internal/users/current/word-projects",{
      //   brand_id:this.account.brand_id,name:this.project_name,body:this.content.resource
      // }).then(
      //     res=>{
      //       this.project_id=res.data
      //       console.log(this.project_id)
      //     }
      // )
      /*获取图文详情*/
      // getActionXing("/internal/users/current/brands/word-projects/"+this.project_id).then(res=>{
      //   console.log(res)
      // })
      /*图文详情 图文修改 图文分发接口*/
      // getActionXing("/internal/users/current/word-projects").then(res=>{
      //   console.log(res)
      //   this.dialogVisible=false
      // })
    },
    handleChange(e) {
      this.form.category = e;
    }
  }
};
</script>
相关文章
|
前端开发 芯片
【芯片前端】关于门控电路和逻辑做在D端还是EN端的思考
【芯片前端】关于门控电路和逻辑做在D端还是EN端的思考
|
前端开发 芯片
【芯片前端】基于DC综合的逻辑深度与cell count汇总:乘法器
【芯片前端】基于DC综合的逻辑深度与cell count汇总:乘法器
184 0
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
|
4月前
|
JavaScript 前端开发
前端 JS 经典:统一 Vite 中图片转换逻辑
前端 JS 经典:统一 Vite 中图片转换逻辑
69 0
|
前端开发 芯片
【芯片前端】基于DC综合的逻辑深度与cell count汇总:加法器
【芯片前端】基于DC综合的逻辑深度与cell count汇总:加法器
130 0
|
前端开发 NoSQL Redis
项目实战典型案例5——发送调查问卷流程图例子(将不必要的逻辑放入前端)
项目实战典型案例5——发送调查问卷流程图例子(将不必要的逻辑放入前端)
118 0
|
前端开发 NoSQL Redis
案例05-将不必要的逻辑放到前端(发送调查问卷)
案例05-将不必要的逻辑放到前端(发送调查问卷)
|
前端开发 JavaScript API
web前端面试高频考点——Vue3.x响应式(Composition API的逻辑复用、Proxy实现响应式)
web前端面试高频考点——Vue3.x响应式(Composition API的逻辑复用、Proxy实现响应式)
152 0
|
存储 小程序 前端开发
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.4 逻辑层文件
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.4 逻辑层文件
115 0
|
前端开发
前端知识案例90-javascript基础语法-区间 逻辑和界定符
前端知识案例90-javascript基础语法-区间 逻辑和界定符
60 0
前端知识案例90-javascript基础语法-区间 逻辑和界定符
下一篇
无影云桌面