add.vue 10.3 KB
Newer Older
qzhxx's avatar
qzhxx committed
1
<template>
2 3 4 5 6 7 8 9
  <div class="info">
    <div class="info-header">新建版权方</div>
    <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 15
          ref="ruleForm"
          label-width="140px"
          class="party-form form-inline"
qzhxx's avatar
qzhxx committed
16
        >
17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
          <el-form-item label="版权方名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="版权方有效期" required>
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item class="addTip">
            <span>若没有相应的视频分类,请点击</span>
            <el-button type="text" @click="addVideoClass">新建视频分类</el-button>
          </el-form-item>
          <el-form-item class="selectH100" label="请选择预设视频分类">
            <el-select
              placeholder="请选择预设视频分类"
              @focus="getAssetTypeData"
              multiple
              v-model="ruleForm.assetTypeIdList"
              @change="getSelectDep"
            >
              <el-checkbox :style="selfstyle" v-model="checkedThing" @change="selectAllThing">全选</el-checkbox>
              <el-option
                v-for="item in assetType"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
qzhxx's avatar
qzhxx committed
50 51
          </el-form-item>
          <el-form-item label="备注">
52
            <el-input type="textarea" v-model="ruleForm.remarks"></el-input>
qzhxx's avatar
qzhxx committed
53 54
          </el-form-item>
        </el-form>
55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
        <!--新增弹框-->
        <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"
              :rules="rules"
              id="ruleo"
              class="party-form"
            >
              <el-form-item label="视频分类名称" prop="name">
                <el-input v-model="classForm.name"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <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
86
      </div>
87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
    </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
105
      </div>
106
    </div>
qzhxx's avatar
qzhxx committed
107 108
  </div>
</template>
109

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

      checkedThing: false,
      selfstyle: {
        textAlign: "right",
        width: "100%",
        paddingRight: "10px"
      },
      rules: {
        name: [
146
          { required: true, message: "请输入版权方名称", trigger: "blur" }
147
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
qzhxx's avatar
qzhxx committed
148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change"
          }
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change"
          }
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" }
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
      }
    };
  },
180 181
  mounted() {
    this.init();
182
  },
qzhxx's avatar
qzhxx committed
183
  methods: {
184 185 186 187
    init() {
      if (this.$route.query.type === "Update") {
        this.getInfo();
        this.getAssetTypeData()
188 189 190
      }
    },
    //  获取版权方详情
191
    getInfo() {
192
      let vm = this;
193 194 195 196 197
      vm.$https({
        url: "copyrightOwner/get/" + this.$route.query.id,
        method: "get",
        authType: this.backToken
      })
198
        .then(res => {
qzhxx's avatar
qzhxx committed
199
          let data = res.data.data;
200
          // this.assetType = data
201 202
          this.ruleForm = data;
          this.value1 = [data.expireDateStart, data.expireDateEnd];
203 204 205 206 207 208 209 210

          // this.ruleForm.assetTypeIdList[0] = data.expireDateStart
          // this.ruleForm.assetTypeIdList[1] = data.expireDateEnd
        })
        .catch(function(err) {
          console.log(err);
        });
    },
211

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

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

qzhxx's avatar
qzhxx committed
360
<style lang="less">
qzhxx's avatar
qzhxx committed
361
@import "../../../../style/dialog";
qzhxx's avatar
qzhxx committed
362
</style>