boss/components/works/works_config.vue

<template>
  <div>
    <el-drawer
      size="800px"
      :append-to-body="true"
      :destroy-on-close="true"
      :visible="true"
      :modal="false"
      title="作品设置"
      :modal-append-to-body="true"
      :before-close="handleClose"
      :wrapperClosable="false"
      ref="drawer_close">
      <el-form  style="padding-top: 20px;padding-right: 20px;" label-width="100px" v-loading="loading" class="qs-form-add">
        <el-form-item label="轻识收录">
          <el-radio-group v-model="ruleForm.is_lanchbox">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="轻识收录">
          <el-input style="width: 300px;" v-model="ruleForm.qs_user_title" placeholder="请输入收录的名称"></el-input>
          <el-input style="width: 350px;" v-model="ruleForm.qs_user_link" placeholder="请输入收录的链接"></el-input>
        </el-form-item>
        <el-form-item label="共创用户">
          <el-button @click="add_user" size="small" type="primary">添加用户</el-button>
          <div v-for="(item,index) in ruleForm.qs_g_user" style="display: flex;justify-content: space-between;margin-bottom: 10px;align-items: center;">
            <el-input style="width: 200px;" v-model="item.name" placeholder="用户昵称"></el-input>
            <el-input style="width: 450px;" v-model="item.link" placeholder="用户链接"></el-input>
            <i class="el-icon-close" style="cursor: pointer" @click="del_user(index)"></i>
          </div>
        </el-form-item>
        <el-form-item label="相关报道">
          <div style="display: flex;justify-content: space-between;margin-bottom: 10px;align-items: center;">
            <el-input style="width: 300px;" v-model="ruleForm.qs_news_title" placeholder="请输入相关报道标题"></el-input>
            <el-input style="width: 350px;" v-model="ruleForm.qs_news_link" placeholder="请输入相关报道链接"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <div class="ccf_modal"></div>
  </div>
</template>
<script>
  export default {
    components: {},
    props: {
      value: {
        type: Number,
        default: 0
      },
      back:{
        type:Object
      }
    },
    async mounted() {
      await this.get_config();
    },
    data() {
      return {
        loading:false,
        ruleForm:{
          qs_g_user:[],
          is_lanchbox:0
        },
      };
    },
    methods: {
      async get_config(){
        this.loading=true;
        let res = await this.$post("/uapi/admin/user/user_works_config/get_works_config",{wid:this.value});
        if (res.status == 1) {
          this.ruleForm=res.data;
        }
        this.loading=false;
      },
      handleClose()
      {
        this.back.child_page.type="";
      },
      async del_user(index)
      {
        this.ruleForm.qs_g_user.splice(index, 1);
      },
      async add_user()
      {
        let user=this.ruleForm.qs_g_user;
        user.push({});
      },
      async save(){
        let data=this.ruleForm;
        let res = await this.$post("/uapi/admin/user/user_works_config/save",{wid:this.value,data:JSON.stringify(data)});
        if (res.status == 1) {
          this.$message.success("设置成功");
          await this.get_config();
        }
      }
    }
  }
</script>
<style scoped>
  .action{
    margin-bottom: 20px;
    display: flex;
    margin-left: 100px;
  }
  .action span{
    margin-right: 20px;
  }
  .box{
    max-width: 800px;
    margin: 0px auto;
  }
</style>