add.vue 11.3 KB
Newer Older
qzhxx's avatar
qzhxx committed
1
<template>
2
  <div class="info">
3
    <div class="info-header">{{ type === 'Update'?'修改':'新建'}}视频版权方</div>
4 5 6 7 8 9
    <div class="info-container">
      <div class="info-wrapper">
          <div class="pageTips">
              <strong>页面说明:</strong>
              可新建版权方信息。“*”为必填项。预设视频分类中没有合适的选项,可点击“新建视频分类”在弹框中新建分类
           </div>
qzhxx's avatar
qzhxx committed
10
        <el-form
11
          :model="ruleForm"
qzhxx's avatar
qzhxx committed
12
          :rules="rules"
13 14
          ref="ruleForm"
          label-width="140px"
qzhxx's avatar
qzhxx committed
15 16 17
          class="demo-form-inline party-form"
          :inline="true"
          label-position="top"
qzhxx's avatar
qzhxx committed
18
        >
qzhxx's avatar
qzhxx committed
19
          <el-form-item label="版权方名称" prop="name" class="w50">
qzhxx's avatar
qzhxx committed
20
            <el-input oninput="value = value.trim()" v-model="ruleForm.name"></el-input>
21
          </el-form-item>
qzhxx's avatar
qzhxx committed
22
          <el-form-item label="版权方有效期" prop="value1">
23 24
            <el-date-picker
              value-format="yyyy-MM-dd"
qzhxx's avatar
qzhxx committed
25
              v-model="ruleForm.value1"
26 27 28 29 30 31
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
qzhxx's avatar
qzhxx committed
32
          <el-form-item class="w50" label="请选择视频分类" prop="videoContentCatIdList">
33 34 35 36
            <el-select
              placeholder="请选择预设视频分类"
              @focus="getAssetTypeData"
              multiple
qzhxx's avatar
qzhxx committed
37
              v-model="ruleForm.videoContentCatIdList"
38 39 40 41
              @change="getSelectDep"
            >
              <el-checkbox :style="selfstyle" v-model="checkedThing" @change="selectAllThing">全选</el-checkbox>
              <el-option
qzhxx's avatar
qzhxx committed
42
                v-for="item in videoContentCat"
43 44 45 46 47
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
qzhxx's avatar
qzhxx committed
48
          </el-form-item>
qzhxx's avatar
qzhxx committed
49 50 51 52 53
           <el-form-item >
             <br>
            <span style="color:red">若没有相应的视频分类,请点击</span>
            <el-button type="text" @click="addVideoClass">新建视频分类</el-button>
          </el-form-item>
qzhxx's avatar
qzhxx committed
54
          <el-form-item label="备注" class="w100" prop="remarks">
55
            <el-input type="textarea" v-model="ruleForm.remarks"></el-input>
qzhxx's avatar
qzhxx committed
56 57
          </el-form-item>
        </el-form>
58 59 60 61 62 63 64 65 66 67 68 69 70 71
        <!--新增弹框-->
        <el-dialog
          custom-class="party-dialog"
          title="新建视频分类"
          width="468px"
          :visible.sync="dialogVisible"
          :before-close="close"
        >
          <div class="dialog-content">
            <el-form
              :model="classForm"
              ref="classForm"
              label-width="80px"
              label-position="top"
qzhxx's avatar
qzhxx committed
72
              :rules="rule"
73 74 75 76
              id="ruleo"
              class="party-form"
            >
              <el-form-item label="视频分类名称" prop="name">
qzhxx's avatar
qzhxx committed
77
                <el-input oninput="value = value.trim()" v-model="classForm.name"></el-input>
78
              </el-form-item>
qzhxx's avatar
qzhxx committed
79
              <el-form-item label="备注" prop="remarks">
80 81 82 83 84 85 86 87 88
                <el-input type="textarea" v-model="classForm.remarks"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer btn-group">
            <el-button size="mini" type="primary" @click="save('classForm')">确定</el-button>
            <el-button size="mini" @click="close">取 消</el-button>
          </div>
        </el-dialog>
qzhxx's avatar
qzhxx committed
89
      </div>
90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107
    </div>
    <div class="info-footer">
      <div class="btn-group">
        <div class="btn-group">
          <el-button
            type="primary"
            v-show="type === 'add'"
            class="btn_form_search"
            @click="submitForm('ruleForm')"
          >确定</el-button>
          <el-button
            type="primary"
            v-show="type === 'Update'"
            class="btn_form_search"
            @click="updateForm('ruleForm')"
          >确定</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </div>
qzhxx's avatar
qzhxx committed
108
      </div>
109
    </div>
qzhxx's avatar
qzhxx committed
110 111
  </div>
</template>
112

qzhxx's avatar
qzhxx committed
113 114 115 116
<script>
export default {
  data() {
    return {
117
      type: this.$route.query.type,
qzhxx's avatar
qzhxx committed
118
      dialogVisible: false,
qzhxx's avatar
qzhxx committed
119
      classForm: {},
qzhxx's avatar
qzhxx committed
120 121 122 123
      formLabelWidth: "100px",
      form: {
        name: ""
      },
124
      value1: [],
qzhxx's avatar
qzhxx committed
125
      ruleForm: {
qzhxx's avatar
qzhxx committed
126
        videoContentCatIdList: [],
qzhxx's avatar
qzhxx committed
127
        name: "",
qzhxx's avatar
qzhxx committed
128
        ownerType: "VIDEO_CONTENT"
qzhxx's avatar
qzhxx committed
129
      },
qzhxx's avatar
qzhxx committed
130
      videoContentCat: [
qzhxx's avatar
qzhxx committed
131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146
        {
          value: "Beijing",
          label: "北京"
        },
        {
          value: "Shanghai",
          label: "上海"
        }
      ],

      checkedThing: false,
      selfstyle: {
        textAlign: "right",
        width: "100%",
        paddingRight: "10px"
      },
qzhxx's avatar
qzhxx committed
147 148 149 150 151 152 153 154 155
      rule:{
        name: [
          { required: true, message: "请输入版权方名称", trigger: "blur" },
          { min: 1, max: 20, message: "请输入1到20个字" },
        ],
        remarks:[
          { min: 1, max: 100, message: "请输入1到100个字" },
        ]
      },
qzhxx's avatar
qzhxx committed
156 157
      rules: {
        name: [
qzhxx's avatar
qzhxx committed
158 159
          { required: true, message: "请输入版权方名称", trigger: "blur" },
          { min: 1, max: 20, message: "请输入1到20个字" },
qzhxx's avatar
qzhxx committed
160
        ],
qzhxx's avatar
qzhxx committed
161 162
        videoContentCatIdList:[
          {required: true, message: "请选择视频分类", trigger: "change" }
qzhxx's avatar
qzhxx committed
163
        ],
qzhxx's avatar
qzhxx committed
164 165
        value1:[
          { required: true, message: "请填写版权方有效期", trigger: "change" }
qzhxx's avatar
qzhxx committed
166 167 168
        ],
        remarks:[
          { min: 1, max: 100, message: "请输入1到100个字" },
qzhxx's avatar
qzhxx committed
169
        ]
qzhxx's avatar
qzhxx committed
170 171 172
      }
    };
  },
qzhxx's avatar
qzhxx committed
173 174 175 176 177 178 179 180
  watch:{
    // 'ruleForm.value1'(newVal ,oldVal){
    //   // console.log(newVal,oldVal)
    //   this.ruleForm.expireDateEnd = this.ruleForm.value1[1];
    //   this.ruleForm.expireDateStart = this.ruleForm.value1[0];

    // }
  },
181 182
  mounted() {
    this.init();
183
  },
qzhxx's avatar
qzhxx committed
184
  methods: {
185 186 187 188
    init() {
      if (this.$route.query.type === "Update") {
        this.getInfo();
        this.getAssetTypeData()
189 190 191
      }
    },
    //  获取版权方详情
192
    getInfo() {
193
      let vm = this;
194 195 196 197 198
      vm.$https({
        url: "copyrightOwner/get/" + this.$route.query.id,
        method: "get",
        authType: this.backToken
      })
199
        .then(res => {
qzhxx's avatar
qzhxx committed
200
          let data = res.data.data;
201
          this.ruleForm = data;
qzhxx's avatar
qzhxx committed
202 203 204 205 206
          let arr = []
          arr = [data.expireDateStart, data.expireDateEnd];
          this.ruleForm.value1 = arr
          this.ruleForm = {...this.ruleForm}
          // this.ruleForm.value1 = [data.expireDateStart, data.expireDateEnd];
207 208 209 210 211
        })
        .catch(function(err) {
          console.log(err);
        });
    },
212

qzhxx's avatar
qzhxx committed
213 214 215 216
    // 新建视频分类
    addVideoClass() {
      this.dialogVisible = true;
    },
qzhxx's avatar
qzhxx committed
217
    // 新建视频分类弹窗保存
218
    save(formName) {
219
      this.$refs[formName].validate(valid => {
qzhxx's avatar
qzhxx committed
220 221
        this.classForm.expireDateEnd = this.value1[1];
        this.classForm.expireDateStart = this.value1[0];
222
        if (valid) {
223
          this.$https(
224
            {
qzhxx's avatar
qzhxx committed
225
              url: "videoContentCat/save",
226 227 228
              method: "post",
              authType: this.backToken
            },
qzhxx's avatar
qzhxx committed
229
            this.$qs.stringify(this.classForm)
qzhxx's avatar
qzhxx committed
230
            // this.classForm
231
          )
232
            .then(res => {
qzhxx's avatar
qzhxx committed
233 234 235
              console.log(res)
              if(res.data.resultCode === "200"){
                this.$message({ type: "success", message: "新增分类成功!" });
236
              this.dialogVisible = false;
qzhxx's avatar
qzhxx committed
237 238 239 240
              }else{
                this.$message({ type: "error", message: res.data.message });
              }
             
241 242
            })
            .catch(function(err) {
243 244 245 246
              this.$message({
                type: "fail",
                message: "新增失败!" + err.response.data.msg
              });
247 248 249 250 251 252 253
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
qzhxx's avatar
qzhxx committed
254 255 256 257 258 259 260 261 262
    },
    // 新增关闭
    close() {
      this.dialogVisible = false;
      for (let key in this.classForm) {
        this.classForm[key] = null;
      }
      this.$refs["classForm"].resetFields();
    },
263
    // 新增
qzhxx's avatar
qzhxx committed
264 265
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
qzhxx's avatar
qzhxx committed
266 267
         this.ruleForm.expireDateEnd = this.ruleForm.value1[1];
        this.ruleForm.expireDateStart = this.ruleForm.value1[0];
268
        if (valid) {
269
          this.$https(
270 271 272 273 274 275 276
            {
              url: "copyrightOwner/save",
              method: "post",
              authType: this.backToken
            },
            // this.ruleForm
            this.$qs.stringify(this.ruleForm)
277
          )
278
            .then(res => {
qzhxx's avatar
qzhxx committed
279
              if(res.data.resultCode === "200"){
qzhxx's avatar
qzhxx committed
280
                this.$message({ type: "success", message: "新增视频版权成功!" });
qzhxx's avatar
qzhxx committed
281 282
                history.go(-1);
              }else{
qzhxx's avatar
qzhxx committed
283
                this.$message({ type: "error", message: res.data.message });
qzhxx's avatar
qzhxx committed
284 285 286
              }
              
              
287 288 289 290 291 292 293 294 295 296 297 298 299
            })
            .catch(function(err) {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 修改版权方
    updateForm(formName) {
      this.$refs[formName].validate(valid => {
300
        this.ruleForm.id = this.$route.query.id;
qzhxx's avatar
qzhxx committed
301 302
        this.ruleForm.expireDateEnd = this.ruleForm.value1[1];
        this.ruleForm.expireDateStart = this.ruleForm.value1[0];
303

qzhxx's avatar
qzhxx committed
304
        if (valid) {
305
          this.$https(
306 307 308 309 310 311 312
            {
              url: "copyrightOwner/update",
              method: "put",
              authType: this.backToken
            },
            this.$qs.stringify(this.ruleForm)
            // this.ruleForm
313
          )
314
            .then(res => {
qzhxx's avatar
qzhxx committed
315
               if(res.data.resultCode === "200"){
qzhxx's avatar
qzhxx committed
316
                this.$message({ type: "success", message: "修改视频版权方成功!" });
qzhxx's avatar
qzhxx committed
317 318 319 320
                history.go(-1);
              }else{
                this.$message({ type: "error", message: res.data.message });
              }
321 322 323 324
            })
            .catch(function(err) {
              console.log(err);
            });
qzhxx's avatar
qzhxx committed
325 326 327 328 329 330 331 332 333 334
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      history.go(-1);
    },
335 336 337 338
    // 获取视频分类列表
    getAssetTypeData() {
      let vm = this;
      vm.$https({
qzhxx's avatar
qzhxx committed
339
        url: "videoContentCat/getList",
340 341 342 343 344
        method: "get",
        authType: this.backToken
      })
        .then(res => {
          let data = res.data.data;
qzhxx's avatar
qzhxx committed
345
          this.videoContentCat = data;
346 347 348 349 350 351 352
          // this.value1[0]=data.expireDateEnd
          //this.value1[1]=data.expireDateStart
        })
        .catch(function(err) {
          console.log(err);
        });
    },
qzhxx's avatar
qzhxx committed
353 354
    getSelectDep(videoContentCatIdList) {
      if (videoContentCatIdList.length === this.videoContentCat.length) {
qzhxx's avatar
qzhxx committed
355 356 357 358 359 360 361
        this.checkedThing = true;
      } else {
        this.checkedThing = false;
      }
    },
    selectAllThing() {
      // debugger
qzhxx's avatar
qzhxx committed
362
      this.ruleForm.videoContentCatIdList = [];
qzhxx's avatar
qzhxx committed
363
      if (this.checkedThing) {
qzhxx's avatar
qzhxx committed
364
        this.videoContentCat.map(item => {
qzhxx's avatar
qzhxx committed
365
          this.ruleForm.videoContentCatIdList.push(item.id);
qzhxx's avatar
qzhxx committed
366 367
        });
      } else {
qzhxx's avatar
qzhxx committed
368
        this.ruleForm.videoContentCatIdList = [];
qzhxx's avatar
qzhxx committed
369 370 371 372 373
      }
    }
  }
};
</script>
374

qzhxx's avatar
qzhxx committed
375
<style lang="less">
qzhxx's avatar
qzhxx committed
376
@import "../../../../style/dialog";
qzhxx's avatar
qzhxx committed
377
</style>