admin_home/src/views/news/addBook.vue

<template>


  <div class="mainBox">
    <div class="layerBox">
      <tableTitle :name="tableDivTitle" />
      <el-form :model="form" ref="form" :rules="formRules" label-position="left" label-width="135px">
        <div class="formDiv">

          <el-form-item label="站点名称：" prop="website_id" class="custom-align-right" v-if="userType == 10000">
            <el-select v-model="form.website_id" placeholder="请选择站点名称" filterable clearable @change="get_WebSite_id">
              <el-option v-for="item in websiteOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="栏目名称：" prop="cat_arr_id" class="custom-align-right">
            <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的栏目名称" :props="parentData"
              filterable clearable></el-cascader>
          </el-form-item>
          <el-form-item label="书刊音像标题：" prop="title" class="custom-align-right">
            <el-input v-model="form.title" autocomplete="off" placeholder="请输入书刊音像标题"></el-input>
          </el-form-item>
          <el-form-item label="行政区划：" prop="city_arr_id" class="custom-align-right">
            <el-cascader :key="cascaderKey" v-model="form.city_arr_id" placeholder="请选择行政区划" :props="cityData"
              filterable clearable></el-cascader>
          </el-form-item>
          <!-- <el-form-item label="行政职能：" prop="department_arr_id" class="custom-align-right">
            <el-cascader :key="searchDepartmentKey" v-model="form.department_arr_id" placeholder="请选择行政职能"
              popper-class="my_cascader" :props="searchDepartmentData" filterable clearable></el-cascader>
          </el-form-item> -->

          <el-form-item label="市场价：" prop="price" class="custom-align-right">
            <el-input type="number" v-model="form.price" autocomplete="off" placeholder="请输入商品单价">
              <template #suffix>
                元
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="现售价：" prop="market_price" class="custom-align-right">
            <el-input type="number" v-model="form.market_price" autocomplete="off" placeholder="请输入现售价">
              <template #suffix>
                元
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="页数：" prop="page" class="custom-align-right">
            <el-input type="number" v-model="form.page" autocomplete="off" placeholder="请输入页数">
            </el-input>
          </el-form-item>

          <el-form-item label="开本：" prop="format" class="custom-align-right">
            <el-input v-model="form.format" autocomplete="off" placeholder="请输入开本">
            </el-input>
          </el-form-item>
          <el-form-item label="纸张：" prop="paper" class="custom-align-right">
            <el-input v-model="form.paper" autocomplete="off" placeholder="请输入纸张">
            </el-input>
          </el-form-item>
          <el-form-item label="包装：" prop="package" class="custom-align-right">
            <el-input v-model="form.package" autocomplete="off" placeholder="请输入包装">
            </el-input>
          </el-form-item>
          <el-form-item label="出版社：" prop="publishing_house" class="custom-align-right">
            <el-input v-model="form.publishing_house" autocomplete="off" placeholder="请输入出版社">
            </el-input>
          </el-form-item>

          <el-form-item label="出版时间：" prop="publish_" class="custom-align-right">
            <el-date-picker v-model="form.publish_time" placeholder="请选择出版时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="ISBN：" prop="ISBN" class="custom-align-right">
            <el-input v-model="form.ISBN" autocomplete="off" placeholder="请输入ISBN">
            </el-input>
          </el-form-item>

          <el-form-item label="国内统一刊号CN：" prop="CN" class="custom-align-right">
            <el-input v-model="form.CN" autocomplete="off" placeholder="请输入国内统一刊号CN">
            </el-input>
          </el-form-item>
          <el-form-item label="缩略图：" class="custom-align-right" prop="">
            <div class="uploaderBox" @mouseenter="hovering = true" mouseleave="hovering = false">
              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
                <!-- 预览图片 -->
                <img v-if="img_url" :src="img_url" class="avatar">
                <div v-else class="chooseImgDiv">
                  <div>
                    <img src="@/assets/public/upload/noImage.png">
                    <div>选择图片</div>
                  </div>
                </div>
              </el-upload>
              <input type="hidden" v-model="form.img_url">
              <span class="photo_tips">推荐图片长宽比例为 3:4，大小不能超过 500 K。</span>
              <div v-if="hovering && img_url" class="delete-button" @click="handleDelete">
                <i class="el-icon-delete"></i>
              </div>
            </div>
          </el-form-item>


          <el-form-item label="商品关键词：" prop="keyword" class="custom-align-right">
            <template #label>
              <span class="askBox">
                商品关键词：
                <el-tooltip class="item" effect="dark" content="商品关键词，如：三农市场网、全国三农、信息一体化。" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </span>
            </template>
            <tagInput :initialTags="tags" @tags-updated="updateTags"></tagInput>
          </el-form-item>
          <el-form-item label="商品描述：" prop="description" class="custom-align-right">
            <el-input v-model="form.description" maxlength="300" autocomplete="off" placeholder="请输入商品描述"
              type="textarea" :rows="10"></el-input>
          </el-form-item>
          <el-form-item label="是否为原创：" prop="is_original" class="custom-align-right">
            <el-radio-group v-model="form.is_original" @change="changeIsOriginal">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-if="form.is_original == 0">
            <el-form-item label="来源名称：" prop="source" class="custom-align-right">
              <el-input v-model="form.source" autocomplete="off" placeholder="请输入来源名称"></el-input>
            </el-form-item>
            <el-form-item label="来源链接：" prop="source_url" class="custom-align-right">
              <el-input v-model="form.source_url" autocomplete="off" placeholder="请输入来源链接"></el-input>
            </el-form-item>
            <div class="disclaimerBox">
              <div class="disclaimerTitle">
                <img src="@/assets/public/check.png" />同意《免责声明》：
              </div>
              <div class="disclaimerText">
                本文来源于网络转载，仅供学习交流使用，不构成商业目的。版权归原作者所有，如涉及作品内容、版权和其他问题，请在30日内与本站联系，我们将在第一时间处理。</div>
            </div>
          </div>
          <div v-if="form.is_original == 1">
            <el-form-item label="来源名称：" prop="source" class="custom-align-right">
              <el-input v-model="form.source" autocomplete="off" placeholder="请输入来源名称" disabled="disabled"></el-input>
            </el-form-item>
          </div>

          <el-form-item label="详情说明：" prop="detail" class="custom-align-right">
            <!--这里是富文本-->
            <myEditor ref="myEditor" v-model="form.detail"></myEditor>
          </el-form-item>




        </div>
      </el-form>
    </div>
    <div class="bottomBtnBox" v-if="readStatus == false">
      <el-button type="info" @click="returnPage">返回</el-button>
      <el-button type="primary" @click="editToServe" v-if="editStatus == true">确定</el-button>
      <el-button type="primary" @click="addToServe" v-else>发布</el-button>
    </div>
  </div>
</template>

<script>
//表格标题
import tableTitle from './components/tableTitle';
//引入公用样式
import '@/styles/global.less';
//引入富文本编辑器
import myEditor from '../../components/edit/myEditor.vue';
//引入tag标签组件
import tagInput from '../../components/InputTag/index.vue';

//格式化时间
import { formatLocalDate } from '@/utils/public';

export default {
  components: {
    tableTitle,
    myEditor,
    tagInput
  },
  data() {
    //0.全局操作 start ------------------------------------------------------------>
    //表单验证
    const validateNull = (rule, value, callback) => {
      console.log(value, '-------------------------------')
      if (value == '' || value == undefined || value == null) {
        callback(new Error('该项不能为空！'))
      } else {
        callback()
      }
    }
    const validateEmpty = (rule, value, callback) => {
      console.log(value, '-------------------------------')
      if (value.length == 0) {
        callback(new Error('该项不能为空！'))
      } else {
        callback()
      }
    }
    const validateArray = (rule, value, callback) => {
      if (value.length == 0) {
        callback(new Error('该项不能为空！'))
      } else {
        callback()
      }
    }
    const validateRadio = (rule, value, callback) => {
      if (value != '1' || value != '0') {
        callback()
      } else {
        callback()
      }
    }
    let self = this;
    //0.全局操作 end ------------------------------------------------------------>
    return {
      websiteOptions: [], //网站列表
      formLabelWidth: '80px',//表单的长度
      //1.表单项 start ------------------------------------------------------------>
      editStatus: false,
      readStatus: false,
      tableDivTitle: "添加书刊音像",
      searchCascaderKey: 0, //列表缓存key
      hovering: false, // 鼠标悬浮状态 悬浮时显示删除
      website_id: '', //网站id,
      file: '',
      userType: 1, //用户类型 1：普通用户，
      img_url: '', //图片路径
      pickerOptions: {
        selectableRange: '1900-01-01 to 2100-12-31', // 允许选择的日期范围
      },
      tags: [], // 存储标签的数q

      //提交表单
      form: {
        //1.1使用了外链
        title: '',//书刊音像标题
        price: '',//市场价
        market_price: '',//现售价
        page: '',//页数
        format: '',//开本
        paper: '',//纸张
        package: '',//包装
        publishing_house: '',//出版社
        publish_time: '',//出版时间
        ISBN: '',//ISBN
        CN: '',//国内统一刊号CN
        img_url: '',//缩略图路径
        city_arr_id: [],//行政区划
        city_id: '',//城市id
        detail: "",
        // department_arr_id: [],//部门id
        // department_id: '',//部门id
        website_id: '',//网站id
        cat_arr_id: [],//导航池id
        cat_id: '',//导航池id
        description: '',//商品描述
        keyword: [],//商品关键词
        is_original: 1,//是否为原创 0非 1是
        source: "本网",//来源名称
        source_url: "",//来源地址
        status: 0,//状态 0待发布 1已发布 404已删除  如果是普通用户，这里始终为0
      },
      //1.2 表单验证规则
      formRules: {
        title: [{ required: true, trigger: 'blur', validator: validateEmpty }],
        type: [{ required: true, trigger: 'blur', validator: validateEmpty }],
        city_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
        // department_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
        address: [{ required: true, trigger: 'blur', validator: validateEmpty }],
        website_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
        cat_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
        //是否原创不能为空
        is_original: [{ required: true, trigger: 'blur', validator: validateRadio }],
        //来源名称和地址不能为空
        source: [{ required: true, trigger: 'blur', validator: validateEmpty }],
        source_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
      },
      //1.3富文本编辑器配置
      showHtml: false, //用于保存源码内容
      editorHtml: '',
      cascaderKey: 0,//弹窗用的key
      websiteData: {
        lazy: true,
        checkStrictly: true,
        async lazyLoad(node, resolve) {
          const { level, data } = node;
          if (data && data.children && data.children.length !== 0) {
            return resolve(node)
          }
          console.log(level)
          let parentId = level == 0 ? 0 : data.value
          let parames = {
            'page': 1,
            'pageSize': 1000,
          }
          self.$store.dispatch('news/websiteList', parames).then(res => {
            if (res.data) {
              const nodes = res.data.rows.map(item => ({
                value: item.id,
                label: item.website_name,
                leaf: level >= 3,
                children: []
              }))
              console.log(nodes, 'leaf')
              resolve(nodes)
            }
          })
        },
      },

      cityData: {
        checkStrictly: true,
        lazy: true,
        async lazyLoad(node, resolve) {
          const { level, data } = node;
          if (data && data.children && data.children.length !== 0) {
            return resolve(node)
          }
          console.log(level, '====level-----')
          let parentId = level == 0 ? 0 : data.value
          let parames = {
            'pid': parentId
          }
          self.$store.dispatch('pool/getcityList', parames).then(res => {
            if (res.data) {
              const nodes = res.data.map(item => ({
                value: item.id,
                label: item.name,
                leaf: level >= 3,
                children: []
              }))
              resolve(nodes)
            }
          })
        }
      },


      //获取父级导航池
      parentKey: 0,//获取父级导航
      parentData: {
        checkStrictly: true,
        lazy: true,
        async lazyLoad(node, resolve) {
          console.log(resolve, 'node')
          const { level, data } = node;
          if (data && data.children && data.children.length !== 0) {
            return resolve(node)
          }
          console.log(level, 'level--1--');
          let pid = level == 0 ? 0 : data.value
          let website_id = self.form.website_id == '' ? 2 : self.form.website_id;
          console.log(website_id, 'website_id--111-----');
          let parames = {
            'website_id': website_id,
            'pid': pid
          }
          self.$store.dispatch('news/getWebsiteNavList', parames).then(res => {
            if (res.data) {
              const nodes = res.data.map(item => ({
                value: item.category_id,
                label: item.alias,
                leaf: level >= 3,
                children: []
              }))
              resolve(nodes)
            } else {
              //输出报错原因
              console.log(res.msg, 'getWebsiteNavList--1--');

            }
          })
        }
      },
      //行政职能部门
      searchDepartmentKey: 0, //列表缓存key
      searchDepartmentData: {
        checkStrictly: true,
        lazy: true,
        async lazyLoad(node, resolve) {
          const { level, data } = node;
          if (data && data.children && data.children.length !== 0) {
            return resolve(node)
          }
          console.log(level)
          let parentId = level == 0 ? 0 : data.value
          let parames = {
            'pid': parentId
          }
          self.$store.dispatch('pool/getDepartment', parames).then(res => {
            if (res.data) {
              const nodes = res.data.map(item => ({
                value: item.id,
                label: item.name,
                leaf: level >= 3,
                children: []
              }))
              resolve(nodes)
            }
          })
        }
      },
      inputList: [
        { value: '' }
      ]
      //表单项 end ------------------------------------------------------------>
    };
  },
  methods: {
    //获取行政人员
    async fetchWebsiteOptions() {
      try {
        const response = await this.$store.dispatch('news/websiteList', { page: 1, pageSize: 1000 });
        console.log(response, 'response');
        if (response && response.data) {
          this.websiteOptions = response.data.rows.map(item => ({
            value: item.id,
            label: item.website_name,
          }));
        }
      } catch (error) {
        console.error('获取网站列表失败:', error);
      }
    },
    //获取用户身份信息
    getUserInfo() {
      this.$store.dispatch('public/getInfo').then(res => {
        console.log(res)
        this.userType = res.data.type_id;

        //个人会员=1 政务会员=2 企业会员=3 调研员=4 管理员=10000 游客=20000
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '网络错误，请重试！'
        });
      })
    },
    get_WebSite_id(val){
      // this.form.website_id = val; //赋值
      console.log(val, 'val')
    },
    //1.提交表单 start ------------------------------------------------------------>
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error('上传缩略图只能是 JPG 或 PNG 格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传缩略图大小不能超过 2MB!');
        return false;
      }
      const formData = new FormData();
      formData.append('file', file);
      this.$store.dispatch('pool/uploadFile', formData).then(res => {
        this.img_url = res.data.imgUrl;//显示缩略图
        this.form.img_url = res.data.imgUrl;//提供表单地址
        console.log(res.data.imgUrl)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '网络错误，请重试！'
        });
      })
      // 阻止默认的上传行为
      return false;
    },
    deleteImage(index) { // 删除图片
      this.file.splice(index, 1);
    },
    //1.2 提交表单
    addToServe() {
      //先进行验证
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.publish_time) {
            this.form.publish_time = formatLocalDate(this.form.publish_time);
          }
          // if (this.form.department_arr_id.length == 0) {
          //   this.form.department_id = 0;
          // }
          if (this.form.city_arr_id.length == 0) {
            this.form.city_id = 0;
          }
          if (this.form.cat_arr_id.length == 0) {
            this.form.cat_id = 0;
          }
          if (typeof this.form.city_arr_id == 'object') {
            this.form.city_id = this.form.city_arr_id.at(-1) || 0;
          }
          if (typeof this.form.department_arr_id == 'object') {
            this.form.department_id = this.form.department_arr_id.at(-1) || 0;
          }
          if (typeof this.form.cat_arr_id == 'object') {
            this.form.cat_id = this.form.cat_arr_id.at(-1) || 0;
          }
          if (this.userType == 10000) {
            this.form.status = 2
          } else {
            this.form.status = 1
          }
          this.form.price == '' ? this.form.price = 0 : this.form.price = this.form.price;
          this.form.market_price == '' ? this.form.market_price = 0 : this.form.market_price = this.form.market_price;
          this.form.page == '' ? this.form.page = 0 : this.form.page = this.form.page;
          console.log(this.form, 'this.form');
          
          this.$store.dispatch('news/addBook', this.form).then(res => {
            if (res.code == 200) {
              //汇报结果
              if (this.userType == 10000) {
                this.$message({
                  type: 'success',
                  message: '已成功添加书刊音像！'
                });
                //返回列表页
                this.returnPage()
              } else {
                this.$message({
                  type: 'success',
                  message: '待管理员审核!'
                });
                //返回列表页
                this.returnPage()
              }
              this.cleatForm();
            } else {
              this.$message({
                type: 'error',
                message: "书刊音像发布失败，请稍后再试！"
              });
            }
          })
        }
      })
    },
    formatDate(date) {
      if (date instanceof Date) {
        return date.toISOString().slice(0, 19).replace('T', ' ');
      } else if (typeof date === 'string') {
        // 将 ISO 8601 格式的字符串转换为 MySQL 期望的格式
        const parsedDate = new Date(date);
        return parsedDate.toISOString().slice(0, 19).replace('T', ' ');
      } else {
        return date;
      }
    },
    //1.3 清理表单
    cleatForm() {
    },
    //1.4 修改是否原创
    changeIsOriginal() {
      if (this.form.is_original == 1) {
        this.form.source = "本网";
      } else {
        this.form.source = "";
        this.form.source_url = "";
      }
    },
    //提交表单 end ------------------------------------------------------------>

    //2.跳转操作 start ------------------------------------------------------------>
    returnPage() {
      this.$router.push({
        path: '/bookList',
      });
    },
    //跳转操作 end ------------------------------------------------------------>

    //3.回显操作 ------------------------------------------------------------>
    //3.1回显数据
    getMainData() {
      let data = {
        id: this.$route.query.id
      };
      this.$store.dispatch('news/getBookInfo', data).then(res => {
        console.log(res);
        this.form.name = res.data.name;
        // 回显导航池
        this.form.cat_arr_id = Array.isArray(res.data.cat_arr_id) ? res.data.cat_arr_id : JSON.parse(res.data.cat_arr_id);
        this.form.city_arr_id = Array.isArray(res.data.city_arr_id) ? res.data.city_arr_id : JSON.parse(res.data.city_arr_id);
        this.parentKey += 1; // 触发级联选择器重新加载
        this.loadCascaderPath(this.form.cat_arr_id); // 加载路径数据
        //回显推荐等级
        this.form.title = res.data.title;
        this.form.website_id = res.data.website_id;
        // this.form.department_arr_id = Array.isArray(res.data.department_arr_id) ? res.data.department_arr_id : JSON.parse(res.data.department_arr_id);
        this.form.city_id = res.data.city_id;
        this.form.department_id = res.data.department_id;
        this.form.cat_id = res.data.cat_id == '' ? 0 : res.data.cat_id;
        this.form.img_url = res.data.img_url;
        this.img_url = res.data.img_url;
        this.form.price = res.data.price == '' || res.data.price == 0 ? '' : res.data.price;
        this.form.market_price = res.data.market_price == '' || res.data.market_price == 0 ? '' : res.data.market_price;
        this.form.page = res.data.page == '' || res.data.page == 0 ? '' : res.data.page;
        this.form.format = res.data.format;
        this.form.paper = res.data.paper;
        this.form.package = res.data.package;
        this.form.publishing_house = res.data.publishing_house;
        this.form.ISBN = res.data.ISBN;
        this.form.CN = res.data.CN;
        this.form.description = res.data.description;
        this.form.detail = res.data.detail;
        this.tags = res.data.keyword ? res.data.keyword.split(",") : [];
        this.form.keyword = res.data.keyword;
        this.form.publish_time = res.data.publish_time;
        this.form.is_original = res.data.is_original;
        this.form.source = res.data.source;
        this.form.source_url = res.data.source_url;
        // this.form.re_user_ids = Array.isArray(res.data.re_user_ids) ? res.data.re_user_ids : JSON.parse(res.data.re_user_ids);
      })
    },
    async loadCascaderPath(path) {
      for (let i = 0; i < path.length; i++) {
        const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
        const level = i; // 当前层级的索引
        // self.$store.dispatch('news/getWebsiteNavList', parames).then(res => {
        //     if (res.data) {
        //       const nodes = res.data.map(item => ({
        //         value: item.category_id,
        //         label: item.name,
        //         leaf: level >= 3,
        //         children: []
        //       }))
        //       resolve(nodes)
        await this.$store.dispatch('pool/categoryList', { pid: parentId })
          .then((res) => {
            const nodes = res.data.map(item => ({
              value: item.id,
              label: item.name,
              leaf: level >= 3, // 假设4层结构，设置叶子节点标记
            }));
            // 级联选择器加载数据
            if (level === path.length - 1) {
              this.form.cat_arr_id = path; // 确保最后一级路径正确设置
              this.parentKey += 1; // 强制刷新 cascader
            }
          });
      }
    },
    //1.3提交修改
    editToServe() {
      console.log(this.form)
      //添加要修改的id
      this.form.id = this.editId;
      //先进行验证
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.publish_time) {
            this.form.publish_time = formatLocalDate(this.form.publish_time);
          }
          // if (this.form.department_arr_id.length == 0) {
          //   this.form.department_id = 0;
          // }
          if (this.form.city_arr_id.length == 0) {
            this.form.city_id = 0;
          }
          if (this.form.cat_arr_id.length == 0) {
            this.form.cat_id = 0;
          }
          if (typeof this.form.city_arr_id == 'object') {
            this.form.city_id = this.form.city_arr_id.at(-1) || 0;
          }
          if (typeof this.form.department_arr_id == 'object') {
            this.form.department_id = this.form.department_arr_id.at(-1) || 0;
          }
          if (typeof this.form.cat_arr_id == 'object') {
            this.form.cat_id = this.form.cat_arr_id.at(-1) || 0;
          }
          if (this.userType == 10000) {
            this.form.status = 2
          } else {
            this.form.status = 1
          }
          this.form.price == '' ? this.form.price = 0 : this.form.price = this.form.price;
          this.form.market_price == '' ? this.form.market_price = 0 : this.form.market_price = this.form.market_price;
          this.form.page == '' ? this.form.page = 0 : this.form.page = this.form.page;

          this.$store.dispatch('news/updateBook', this.form).then(res => {
            if (res.code != 200) {
              this.$message.error("修改失败，请稍后再试！");
            } else {
              //汇报结果
              if (this.userType == 10000) {
                this.$message({
                  type: 'success',
                  message: '已成功编辑书刊音像！'
                });
                //返回列表页
                this.returnPage()
              } else {
                this.$message({
                  type: 'success',
                  message: '待管理员审核!'
                });
                //返回列表页
                this.returnPage()
              }
              this.cleatForm();
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '网络错误，请重试！'
            });
          })
        }
      })
    },
    //商品关键词
    updateTags(newTags) {
      this.tags = newTags;
      this.form.keyword = newTags.join(',');
    },
    handleDelete() {
      // 删除图片
      this.img_url = ''; // 清空图片 URL
      this.form.img_url = ''; // 清空表单中的图片 URL
    },

  },
  watch: {

    '$route'(to, from) {
      console.log(from, '---------------------------------------');
      // 监听路由参数中的 id 变化，若变化则更新页面状态并获取数据
      if (to.query.id) {
        this.getMainData();
      }
    },
    //website_id
    'form.website_id'(newVal, oldVal) {
      if (newVal != oldVal) {
        this.parentKey += 1; // 触发级联选择器重新加载
      }
    }

  },
  mounted() {
    //1.判断是新建还是回显
    if (this.$route.query.id != undefined) {
      this.editId = this.$route.query.id;
      this.editStatus = true;
      this.tableDivTitle = "编辑书刊音像";
      console.log("编辑书刊音像")
      this.getMainData();
    } else {
      this.editStatus = false;
      console.log("添加书刊音像！")
    }
    if (this.$route.query.read == 1) {
      this.readStatus = true;;
    } else {
      this.readStatus = false;
    }
    this.fetchWebsiteOptions();
    this.getUserInfo();

    //复制内容到富文本 start ------------------------------------------------------------>
    //复制富文本 end ------------------------------------------------------------>
  },
};
</script>
<style scoped lang="less">
//执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
::v-deep .custom-form-item>.el-form-item__label {
  line-height: 140px !important;
}

::v-deep .custom-textarea .el-textarea__inner {
  resize: none;
  /* 禁止用户拖拽调整大小 */
}

::v-deep .custom-align-right .el-form-item__label {
  text-align: right;
  /* 设置标签文字右对齐 */
}

::v-deep .el-select {
  width: 100%;
  /* 禁止用户拖拽调整大小 */
}

::v-deep .el-input-group__prepend {
  color: black !important;
}

.formLabelFloatBox {
  margin-bottom: 10px;
  position: relative;

  .formLabeladdIcon {
    position: absolute;
    right: 45px;
    top: 5px;
    width: 38px;
    height: 24px;
  }

  .formLabelDelIcon {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 38px;
    height: 24px;
  }
}

//该项不能为空几个字的位置
::v-deep .el-form-item__error {
  color: #ff4949;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: relative;
  // top: 22%;
  // left: 93%;
}

//输入框距离底部的距离
::v-deep .el-form-item {
  margin-bottom: 5px;
}

//图片提示文字样式
.photo_tips {
  font-size: 12px;
  color: #999;
}

//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>