proginn-frontend/components/sign/works.vue

<template>
  <div class="works" id="works">
    <header>
      <h5>作品</h5>
      <span>
        <el-button @click="handleAdd" type="text" icon="el-icon-plus"></el-button>
      </span>
    </header>
    <div v-if="works.length > 0">
      <template v-for="(item, idx) in works">
        <div v-if="editingItem.indexOf(idx) < 0" :key="`works_${idx}`" class="show">
          <span class="star">
            <img src="~@/assets/img/sign/star.png" srcset="~@/assets/img/sign/star@2x.png" alt />
            赞({{works[idx].hit}})
          </span>
          <span class="image" v-if="works[idx].image_list && works[idx].image_list[0]">
            <img :src="works[idx].image_list[0].url" alt />
          </span>
          <span class="des">
            <h4>
              <span>{{item.name}}</span>
              <el-button @click="editItem(idx)" type="text">修改</el-button>
            </h4>
            <p style="word-break: break-all">{{item.description}}</p>
          </span>
        </div>
        <work-form
          v-else
          :key="`works_edit_${idx}`"
          :idx="idx"
          :work="works[idx]"
          :industries="industries"
          :functions="functions"
          :handleCancel="handleCancel"
          :onSubmit="onSubmit"
          :handleDelete="handleDelete"
        ></work-form>
      </template>
    </div>
    <div v-else class="empty">点击右上角“添加”按钮添加作品(至少添加3项）</div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import qs from "qs";
import workForm from "./work-form";
export default {
  data() {
    return {
      // editing: true,
      editingItem: [],
      init: {
        name: "",
        industry_id: "",
        function_ops: "",
        duty: "",
        description: "",
        url: "",
        image_list: [],
      },
      works: [],
      current: null,
      originWorks: [],
      industries: [],
      functions: [],
    };
  },
  components: {
    workForm,
  },
  computed: {
    ...mapState(["userinfo"]),
  },
  watch: {},
  async mounted() {
    await this.getIndustry();
    this.getFunction();
    this.getData();
  },
  methods: {
    async onSubmit(work, idx) {
      const queryParams = {
        ...work,
        // id: 1, //传ID是更新，不传ID是新增
        // name: "作品名称",
        // duty: "作品指责",
        // description: "作品描述",
        function_ops: work.function_ops.join(","), //是多个ID，用英文逗号分割，关键功能
        industry_id: parseInt(work.industry_id[1]), //id,是int类型啊，不是文字
        // url: "https://a.com",
        image_list: work.image_list.map((it) => it.url).join(","), //是图片地址，多个图片用逗号分割，
      };
      const res = await this.$axios.$post(`/api/user_works/save`, queryParams);
      if (res.status === 1) {
        this.$message.success("保存成功！");
        this.init = {
          name: "",
          industry_id: "",
          function_ops: "",
          duty: "",
          description: "",
          url: "",
          image_list: [],
        };
        this.editingItem = [];
        this.getData();
      }
    },
    async getData() {
      const res = await this.$axios.$post("/api/user_works/get_list");
      const data = !res.data ? [] : res.data;
      this.works = data.map((it) => {
        const image_list = it.image_list
          ? it.image_list.split(",").map((it) => ({ name: it, url: it }))
          : [];
        let industry_id;
        this.industries.map((item1) => {
          return item1.children.map((item2) => {
            if (item2.value == it.industry_id) {
              industry_id = [item1.value, item2.value];
            }
          });
        });
        console.log(industry_id);
        return {
          ...it,
          industry_id,
          function_ops: it.function_ops ? it.function_ops.split(",") : [],
          image_list,
        };
      });
    },
    async getIndustry() {
      const res = await this.$axios.$post("/api/user_works/get_industry");
      const data = !res.data ? [] : res.data;
      this.industries = data.map((it) => ({
        label: it.name,
        value: it.id,
        children: it.child.map((it) => ({
          label: it.name,
          value: it.id,
        })),
      }));
      return this.industries;
    },
    async getFunction() {
      const res = await this.$axios.$post("/api/user_works/get_function");
      const data = !res.data ? [] : res.data;
      this.functions = data.map((it) => ({
        label: it.outsourcefunc_name,
        value: it.outsourcefunc_id,
      }));
    },
    async fetchWork(keyword) {
      // console.log(keyword);
      // this.loadingWork = true;
      // const res = await this.$axios.$post("/api/simple_data/select_skill", {
      //   keyword
      // });
      // this.loadingWork = false;
      // const data = res.data || [];
      // this.skillList = data.map(it => ({ value: it.id, label: it.name }));
    },
    handleAdd() {
      if (this.userinfo && this.userinfo.realname_verify_status === "0") {
        this.$message.error("请先进行实名认证");
        return;
      }
      if (this.editingItem.length > 0 && !this.works[this.editingItem[0]].id) {
        this.$message.error("请先保存现有修改");
        return;
      }
      // this.works.push(this.init);
      // this.editingItem = [this.works.length - 1];
      window.location.href= "/otherpage/works/create";
    },
    async handleDelete(work, idx) {
      const deleteComplete = () => {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        this.works.splice(idx, 1);
        this.editingItem = [];
      };
      this.$confirm("确认删除该作品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          if (work.wid) {
            const res = await this.$axios.$post(`/api/user_works/delete`, {
              id: work.wid,
            });
            if (res.status === 1) {
              deleteComplete();
              // this.$message.success(res.info);
              this.getData();
            }
          } else {
            deleteComplete();
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleCancel(work, idx) {
      this.editingItem = [];
      if (!work.wid) {
        this.works.splice(idx, 1);
      }
    },
    editItem(idx) {
      // this.editingItem = [idx];
      window.location.href= "/otherpage/works/create?wid="+this.works[idx].wid;
    },
  },
};
</script>

<style lang="scss" scoped>
.works {
  header .el-icon-plus {
    font-size: 18px;
  }
  .show {
    display: flex;
    justify-content: space-between;
    padding: 23px 33px 23px 20px;
    border-bottom: 1px solid #ebeef5;
    &:last-of-type {
      /* border: 0; */
      margin-bottom: 30px;
    }
    .star {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100px;
      img {
        margin-bottom: 5px;
        width: 26px;
        height: 26px;
      }
    }
    .image {
      margin-right: 10px;
      width: 100px;
      height: 100px;
      overflow: hidden;
    }
    .des {
      flex: 1;
    }
    h4 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 24px;
      font-size: 14px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: #308eff;
      line-height: 24px;
    }
    p {
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 24px;
    }
  }

  .empty {
    margin: 112px auto 104px;
    font-size: 27px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: rgba(205, 205, 205, 1);
    line-height: 38px;
  }
  footer p {
    margin-top: 15px;
    width: 766px;
    font-size: 12px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(145, 154, 167, 1);
    line-height: 17px;
  }
}
</style>