添加项目展示字段

zhangzengfei

2021-11-24 dccd5c9cfc33d33ea405e3a5311c7c85d9c09f68

 src/views/project/index.vue

@@ -2,20 +2,49 @@
  <div class="table-container">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-form ref="form" :model="queryForm" :inline="true" @submit.native.prevent>
        <el-form
          ref="form"
          :model="queryForm"
          :inline="true"
          @submit.native.prevent
        >
          <el-form-item>
            <el-input v-model="queryForm.title" placeholder="名称" />
            <el-input
              v-model="queryForm.name"
              placeholder="名称"
              clearable=""
            />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="queryForm.address"
              v-model="queryForm.type"
              placeholder="类型"
              class="handle-select mr10"
              size="mini"
              clearable=""
            >
              <el-option key="1" label="系统" value="系统"></el-option>
              <el-option key="2" label="应用" value="应用"></el-option>
              <el-option key="3" label="算法" value="算法"></el-option>
              <el-option
                v-for="(v, k) in typeOptions"
                :key="k"
                :label="v"
                :value="k"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="queryForm.arch"
              placeholder="架构"
              class="handle-select mr10"
              size="mini"
              clearable=""
            >
              <el-option
                v-for="(v, k) in archOptions"
                :key="k"
                :label="v"
                :value="k"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
@@ -24,14 +53,18 @@
              type="primary"
              native-type="submit"
              @click="handleQuery"
            >查询</el-button>
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel>
        <el-button icon="el-icon-plus" type="primary" @click="handleAdd">
          添加</el-button>
        <el-button icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button>
          添加</el-button
        >
        <el-button icon="el-icon-delete" type="danger" @click="handleDelete"
          >删除</el-button
        >
      </vab-query-form-right-panel>
    </vab-query-form>

@@ -47,7 +80,11 @@
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.pkgList" :show-header="false" style="width: 100%">
          <el-table
            :data="props.row.pkgList"
            :show-header="false"
            style="width: 100%"
          >
            <el-table-column prop="fileName"></el-table-column>
            <el-table-column prop="version" width="150"></el-table-column>
            <el-table-column prop="commit" width="150"></el-table-column>
@@ -55,40 +92,94 @@

            <el-table-column prop="state" width="150">
              <template #default="{ row }">
                <el-tag>{{ packageState[row.state] }}</el-tag>
                <el-tag :type="row.state == 0 ? 'success' : 'danger'">{{
                  packageState[row.state]
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column width="120">
            <el-table-column width="300">
              <template #default="scope">
                <el-button size="small" @click="handlePublish(scope.row)">发布</el-button>
                <el-button
                  v-show="props.row.type == 'os'"
                  size="small"
                  @click="handlePublish(scope.row)"
                  >发布</el-button
                >
                <el-button size="small" @click="handleDownload(scope.row)"
                  >下载</el-button
                >
                <el-button
                  size="small"
                  :disabled="scope.row.state === 0"
                  @click="handleRebuild(scope.row)"
                  >重置</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <!-- <el-table-column show-overflow-tooltip type="selection" width="55"></el-table-column> -->
      <el-table-column show-overflow-tooltip label="序号" width="95">
      <el-table-column show-overflow-tooltip label="序号" width="50">
        <template #default="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="name" label="项目名称"></el-table-column>
      <el-table-column show-overflow-tooltip prop="srcUrl" label="项目地址"></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="name"
        label="名称"
        width="150"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="desc"
        label="描述"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="srcUrl"
        label="地址"
        width="500"
      ></el-table-column>
      <el-table-column show-overflow-tooltip prop="branch" label="分支">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="type" label="类型">
        <template #default="{ row }">
          <el-tag>{{ row.type | typeFilter }}</el-tag>
          <el-tag>{{ typeOptions[row.type] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="arch" label="架构">
        <template #default="{ row }">
          <el-tag>{{ archOptions[row.arch] }}</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column show-overflow-tooltip label="当前版本" prop="latestVersion"></el-table-column> -->
      <el-table-column label="状态">
        <template #default="{ row }">
          <el-tag>{{ row.state | stateFilter }}</el-tag>
          <el-tag :type="row.state == 2 ? 'danger' : 'success'">{{
            projectState[row.state]
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createdAt" width="200"></el-table-column>
      <el-table-column
        label="创建时间"
        prop="createdAt"
        width="150"
      ></el-table-column>
      <el-table-column label="操作" width="180px">
        <template #default="{ row }">
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" style="color: red" @click="handleDeleteRow(row)">删除</el-button>
          <el-button type="text" style="color: deepskyblue" @click="handlePack(row)">打包</el-button>
          <el-button
            type="text"
            style="color: red"
            @click="handleDeleteRow(row)"
            >删除</el-button
          >
          <el-button
            type="text"
            style="color: deepskyblue"
            @click="handlePack(row)"
            >打包</el-button
          >
        </template>
      </el-table-column>
    </el-table>
@@ -106,166 +197,176 @@
</template>

<script>
import { getList, deletePrj, getPkgList, buildPkg } from '@/api/project'
import { publish } from '@/api/package'
import { getList, deletePrj, getPkgList, buildPkg } from "@/api/project";
import { publish, download, rebuild } from "@/api/package";

import TableEdit from './components/ProjectEdit.vue'
import TableEdit from "./components/ProjectEdit.vue";

export default {
  name: 'ComprehensiveTable',
  name: "ComprehensiveTable",
  components: {
    TableEdit,
  },
  filters: {
    stateFilter(state) {
      const stateMap = ['下载中', '同步完成', '同步失败']

      return stateMap[state]
    },
    typeFilter(type) {
      const typeMap = {
        sys: '系统包',
        app: '应用包',
        algo: '算法包',
      }
      return typeMap[type]
    },
  },
  data() {
    return {
      imgShow: true,
      list: [],
      listLoading: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      layout: "total, sizes, prev, pager, next, jumper",
      archOptions: {
        amd64: "x86_64",
        arm64: "arm_64",
      },
      typeOptions: {
        os: "OS基础包",
        sys: "系统包",
        app: "应用包",
        algo: "算法包",
      },
      projectState: ["下载中", "同步完成", "同步失败"],
      packageState: [
        '完成',
        '已提交',
        '排队中',
        '打包中',
        '编译失败',
        '打包失败',
        "打包完成",
        "已 提 交",
        "排 队 中",
        "打 包 中",
        "编译失败",
        "打包失败",
      ],
      total: 0,
      background: true,
      selectRows: '',
      elementLoadingText: '正在加载...',
      selectRows: "",
      elementLoadingText: "正在加载...",
      queryForm: {
        pageNo: 1,
        pageSize: 20,
        title: '',
      },
    }
    };
  },
  computed: {
    height() {
      return this.$baseTableHeight()
      return this.$baseTableHeight();
    },
  },
  created() {
    this.fetchData()
    this.fetchData();
  },
  beforeDestroy() { },
  mounted() { },
  beforeDestroy() {},
  mounted() {},
  methods: {
    setSelectRows(val) {
      this.selectRows = val
      this.selectRows = val;
    },
    handleAdd() {
      this.$refs['edit'].showEdit()
      this.$refs["edit"].showEdit();
    },
    handleEdit(row) {
      this.$refs['edit'].showEdit(row)
      this.$refs["edit"].showEdit(row);
    },
    handleDelete(row) {
      if (this.selectRows.length > 0) {
        const ids = this.selectRows.map((item) => item.id).join()
        this.$baseConfirm('你确定要删除选中项吗', null, async () => {
          const { msg } = await doDelete({ ids: ids })
          this.$baseMessage(msg, 'success')
          this.fetchData()
        })
        const ids = this.selectRows.map((item) => item.id).join();
        this.$baseConfirm("你确定要删除选中项吗", null, async () => {
          const { msg } = await doDelete({ ids: ids });
          this.$baseMessage(msg, "success");
          this.fetchData();
        });
      } else {
        this.$baseMessage('未选中任何行', 'error')
        return false
        this.$baseMessage("未选中任何行", "error");
        return false;
      }
    },
    handleDeleteRow(row) {
      if (row.id) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const { msg } = await deletePrj(row.id)
          this.$baseMessage(msg, 'success')
          this.fetchData()
        })
        this.$baseConfirm("你确定要删除当前项吗", null, async () => {
          const { msg } = await deletePrj(row.id);
          this.$baseMessage(msg, "success");
          this.fetchData();
        });
      }
    },
    handleSizeChange(val) {
      this.queryForm.pageSize = val
      this.fetchData()
      this.queryForm.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.queryForm.pageNo = val
      this.fetchData()
      this.queryForm.pageNo = val;
      this.fetchData();
    },
    handleQuery() {
      this.queryForm.pageNo = 1
      this.fetchData()
      this.queryForm.pageNo = 1;
      this.fetchData();
    },
    async fetchData() {
      this.listLoading = true
      const { data, total } = await getList(this.queryForm)
      this.listLoading = true;
      const { data, total } = await getList(this.queryForm);

      if (data) {
        data.forEach((item) => {
          item.pkgList = []
        })
          item.pkgList = [];
        });

        this.list = data
        this.list = data;
      }

      this.total = total
      this.total = total;
      setTimeout(() => {
        this.listLoading = false
      }, 500)
        this.listLoading = false;
      }, 500);
    },

    async expandChange(row, expandRows) {
      console.log(row)
      if (expandRows.length == 0) {
        console.log('fold')
        return
        return;
      }

      const { data, total } = await getPkgList(row.id)
      const { data, total } = await getPkgList(row.id);
      this.list.forEach((item, idx) => {
        if (item.id === row.id) {
          this.list[idx].pkgList = data
          this.list[idx].pkgList = data.reverse();
        }
      })
      });
    },
    handlePack(row) {
      this.$prompt('请输入版本号', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      this.$prompt("请输入版本号", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /[\d+][\.\d+]*/,
        inputErrorMessage: '版本号格式不正确,例 1.0.0, 10.1.100',
        inputErrorMessage: "版本号格式不正确,例 1.0.0, 10.1.100",
      })
        .then(({ value }) => {
          buildPkg(row, value).then((rsp) => {
            console.log(rsp)
            this.expandChange(row, 1)
          })
            this.expandChange(row, 1);
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入',
          })
        })
            type: "info",
            message: "取消输入",
          });
        });
    },
    handlePublish(row) {
      publish(row).then((rsp) => {
        console.log(rsp)
      })
        if (rsp && rsp.success) {
          this.$baseMessage(rsp.msg, "success");
        }
      });
    },
    handleDownload(row) {
      download({ path: row.filePath }).then((rsp) => {
        if (rsp && rsp.success) {
          window.location = rsp.data;
        }
      });
    },
    handleRebuild(row) {
      rebuild(row).then((rsp) => {
        if (rsp && rsp.success) {
          this.$baseMessage(rsp.msg, "success");
        } else {
          this.$baseMessage("保存失败", "error");
        }
      });
    },
  },
}
};
</script>