yos_web/src/WebsiteManagement/caseManage/modules/detailInfo.vue

<template>
  <div>
    <el-button
      size="small"
      type="text"
      @click="detailBtn((dialogFormVisible = true))"
      >详情</el-button
    >
    <el-drawer
      title="案例管理"
      :visible.sync="dialogFormVisible"
      size="60%"
      direction="rtl"
      append-to-body
      :show-close="false"
      :with-header="false"
      @close="onClose"
    >
      <div style="display: flex; justify-content: space-between; padding: 10px">
        <div>案例管理</div>
        <div>
          <edit
            v-if="tool.checkAuth($route.name, 'update')"
            :sat_sharematerialid="data.sat_sharematerialid"
            @editSuccess="detailBtn"
            class="inline-16"
            :disabled="form.status == '发布'"
          ></edit>
          <el-button
            v-if="tool.checkAuth($route.name, 'delete')"
            :type="form.status == '发布' ? '' : 'primary'"
            size="small"
            @click="delBtn"
            :disabled="form.status == '发布'"
            >删除</el-button
          >
        </div>
      </div>
      <div class="drawer__panel" style="margin-bottom: 0px !important">
        <el-row :gutter="10">
          <el-form
            :model="form"
            :rules="rules"
            ref="form"
            size="mini"
            label-position="top"
          >
            <el-col :span="24">
              <el-form-item label="标题" prop="title">
                <el-input
                  v-model="form.title"
                  placeholder="请输入标题"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="分类" prop="sat_notice_classid">
                <el-select
                  v-model="form.sat_sharematerial_classid"
                  clearable
                  placeholder="请选择分类"
                  style="width: 100%"
                  disabled
                >
                  <el-option
                    v-for="item in classData"
                    :key="item.sat_sharematerial_classid"
                    :label="item.classname"
                    :value="item.sat_sharematerial_classid"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态" prop="status">
                <el-radio-group v-model="form.status" disabled>
                  <el-radio label="新建">新建</el-radio>
                  <el-radio label="发布">发布</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="排序" prop="sequence">
                <el-input
                  v-model="form.sequence"
                  placeholder="请输入排序"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="封面" prop="cover">
                <previewImage
                  v-if="form.cover"
                  style="width: 256px"
                  :image="form.image"
                ></previewImage>
                <upload
                  v-else
                  btntype="image"
                  :folderid="folderid"
                  accept=".JPG,.PNG"
                  :bindData="{
                    ownertable: 'sat_sharematerial',
                    ownerid: form.sat_sharematerialid,
                    usetype: 'cover',
                  }"
                ></upload>
                <p class="info">
                  注：建议上传图片大小130x80像素，大小不超过2M，格式为JPG/PNG
                </p>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <div>
          <div style="font-size: 16px; font-weight: bold; margin-bottom: 10px">
            关联产品
          </div>
          <addProduct
            :sat_sharematerialid="form.sat_sharematerialid"
            style="margin-bottom: 10px"
            :disabled="true"
          ></addProduct>
          <tableNewLayout
            ref="tableRef"
            :checkbox="false"
            :custom="true"
            :data="list"
            :layout="tablecols"
            :opwidth="200"
            :width="true"
            height="300px"
          >
            <template v-slot:customcol="scope">
              <div v-if="scope.column.columnname === 'itemclassfullname'">
                {{
                  scope.column.data.itemclass
                    ? scope.column.data.itemclass.length > 0
                      ? scope.column.data.itemclass[0].itemclassfullname
                      : ""
                    : ""
                }}
              </div>
              <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
            </template>
            <template v-slot:opreation="scope">
              <el-button type="text" disabled>删除</el-button>
            </template>
          </tableNewLayout>
          <div class="container normal-panel" style="text-align: right">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="20"
              layout="total,sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
        <p style="font-size: 14px; margin-top: 10px">内容</p>
        <div style="margin-top: 10px">
          <myEditor
            ref="editor"
            :content="form.content"
            :id="form.sat_sharematerialid"
          ></myEditor>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import edit from "./edit";
import upload from "@/components/upload/hw_obs_upload.vue";
import previewImage from "@/components/previewImage/index.vue";
import myEditor from "@/components/my-editor/Editor.vue";
import tableNewLayout from "@/components/dynamic-newTable/index2";
import addProduct from "@/WebsiteManagement/caseManage/modules/addProduct";
export default {
  name: "detailInfo",
  props: ["data"],
  components: {
    edit,
    upload,
    previewImage,
    myEditor,
    tableNewLayout,
    addProduct,
  },
  data() {
    return {
      dialogFormVisible: false,
      tablecols: [],
      list: [],
      currentPage: 0,
      total: 0,
      form: {
        title: "",
        notes: "",
        content: "",
        sat_sharematerialid: "",
        status: "",
        sequence: "",
        image: "",
        cover: "",
      },
      rules: {
        title: [{ required: true, message: "请输入标题名称", trigger: "blur" }],
        cover: [{ required: true, message: "请上传封面", trigger: "change" }],
      },
      folderid: JSON.parse(sessionStorage.getItem("folderid")).appfolderid,
      productParam: {
        id: "20240801134003",
        content: {
          sat_sharematerialid: "",
          pageNumber: 1,
          pageSize: 20,
          where: {
            condition: "",
          },
        },
      },
      classData: [],
    };
  },
  methods: {
    async detailBtn() {
      const res = await this.$api.requested({
        id: 20240801133703,
        content: {
          sat_sharematerialid: this.data.sat_sharematerialid,
        },
      });
      if (res.code == 0) {
        this.tool.showMessage(res, () => {});
      } else {
        this.form = Object.assign({}, this.form, res.data);
        this.$refs.editor.html = res.data.content;
        this.queryFileLink();
        this.productParam.content.sat_sharematerialid =
          res.data.sat_sharematerialid;
        this.productData((this.productParam.content.pageNumber = 1));
        this.classList();
      }
    },
    /*获取分类*/
    async classList() {
      let param = {
        id: "20240808105003",
        content: {
          where: {
            condition: "",
          },
        },
      };
      const res = await this.$api.requested(param);
      this.classData = res.data;
    },
    // 获取封面信息
    async queryFileLink() {
      this.dialogEditVisible = true;
      const res = await this.$api.requested({
        classname: "system.attachment.Attachment",
        method: "queryFileLink",
        content: {
          ownertable: "sat_sharematerial",
          ownerid: this.form.sat_sharematerialid,
          usetype: "cover", //传空返回有所
        },
      });
      this.form.image = res.data[0];
      this.form.cover = res.data[0].url;
      /*res.data[0] ? this.image = res.data[0].url : this.image = { url: '' }*/
    },
    onClose() {
      this.$emit("onSuccess");
    },
    async delBtn() {
      this.$confirm("确定删除当前案例吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await this.$api.requested({
            id: 20240801133503,
            content: {
              sat_sharematerialids: [this.data.sat_sharematerialid],
            },
          });
          this.tool.showMessage(res, () => {
            this.dialogFormVisible = false;
            this.$emit("onSuccess");
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async productData() {
      const res = await this.$api.requested(this.productParam);
      this.list = res.data;
      this.total = res.total;
      this.currentPage = res.pageNumber;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.productParam.content.pageSize = val;
      this.productData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.productParam.content.pageNumber = val;
      this.productData();
    },
  },
  created() {
    this.tablecols = this.tool.tabelCol(
      this.$route.name
    ).productTable.tablecols;
  },
};
</script>

<style scoped>
</style>