dySdDesignerVue_Admin/src/views/design/designTemplate/index.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        @keyup.enter="handleSearch"
        class="w200px mr5px"
        v-model="queryForm.keyWord"
        placeholder="关键字搜索"
      />
      <el-button type="primary" @click="handleSearch">
        <i-ep-search />
        搜索
      </el-button>
      <div class="w100px ml10px" style="display: inline-block">
        <el-checkbox
          style="position: absolute; top: 11px"
          v-model="disableLock"
          label="已禁用"
          border
        ></el-checkbox>
      </div>
      <el-button @click="openDesignModule()" color="#11a983">
        <i-ep-plus />
        增加设计模板
      </el-button>
      <el-button type="primary" @click="refreshTableInfo">
        <i-ep-refresh />
      </el-button>
    </div>
    <div class="table-con">
      <el-table
        :max-height="tableHeight"
        v-loading="loading"
        :data="tableData"
        highlight-current-row
        border
      >
        <el-table-column label="操作" width="250">
          <template #default="{ row }">
            <el-button link @click="openDesignModule(row.id)" type="primary">
              <i-ep-edit />
              编辑
            </el-button>
            <el-button link @click="openDialog(row.id)" type="info">
              <i-ep-edit />
              缩略图
            </el-button>
            <el-button
              v-if="row.voidFlag == 0"
              link
              @click="handleDisable(row.id, 1)"
              type="warning"
              >禁用
            </el-button>
            <el-button
              v-if="row.voidFlag == 1"
              type="success"
              link
              @click="handleDisable(row.id, 0)"
              >启用
            </el-button>
          </template>
        </el-table-column>
        <el-table-column type="index" label="#" width="50">
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="templateName" label="模板名称" />
        <el-table-column prop="viewThumbPath" width="320" label="缩略图">
          <template #default="{ row }">
            <el-image
              style="width: 200px; height: 200px"
              :src="row.viewThumbPath"
              fit="contain"
            />
          </template>
        </el-table-column>
        <el-table-column prop="voidFlag" width="120" label="状态">
          <template #default="{ row }">
            <el-tag v-if="row.voidFlag == 0" type="success"> 正常</el-tag>
            <el-tag v-else="row.voidFlag == 1" type="danger"> 停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="canvasHeight" width="150" label="画布高(mm)" />
        <el-table-column prop="canvasWidth" width="150" label="画布宽(mm)" />
        <el-table-column prop="createTime" label="创建时间" width="155">
          <template #default="{ row }">
            <span v-if="row.createTime">
              {{ $filters.getTime(row.createTime) }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryPage.pageIndex"
        v-model:limit="queryPage.pageSize"
        @pagination="getTableData"
      />
    </div>
    <child-dialog ref="childDialog" @dialogChange="dialogChange"></child-dialog>
  </div>
</template>
<script setup lang="ts">
import { useTable } from "@/hooks/useTable";
import {
  queryDesignTemplates,
  saveCurrentUserTokenInfo,
  voidDesignTemplate,
} from "@/api/design";
import ChildDialog from "./compt/childDialog.vue";

const childDialog = ref<any>();
const disableLock = ref("");

function generateUUID() {
  return "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0,
      v = c == "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}

//增加编辑
function openDialog(item?: any) {
  childDialog.value.dialogVisible = true;
  if (item) {
    childDialog.value.dialogTitle = "编辑";
    nextTick(() => {
      childDialog.value.getItemData(item);
    });
  }
}

function openDesignModule(item?: any) {
  //todo 转跳外部模板编辑地址
  const param = {
    virtualCode: generateUUID(),
  };
  saveCurrentUserTokenInfo(param).then((response) => {
    if (response.httpCode == 200) {
      if (item) {
        window.open("http://192.168.1.44:9191/?virtualCode=" + param.virtualCode + "&template=" + item, "_blank");
      } else {
        window.open("http://192.168.1.44:9191/?virtualCode=" + param.virtualCode, "_blank");
      }
    }
  });
}

//禁用删除
function handleDisable(id, status) {
  ElMessageBox.confirm("确认操作?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    const postData = {
      id: id,
      voidFlag: status,
    };
    const params = {
      template: JSON.stringify(postData),
    };
    voidDesignTemplate(params).then((response) => {
      if (response.httpCode == 200) {
        ElMessage.success("操作成功");
        getTableData();
      }
    });
  });
}

//修改成功后传递事件
function dialogChange() {
  getTableData();
}

const queryForm = reactive({
  keyWord: "",
  voidFlag: 0,
});
watch(
  () => disableLock.value,
  (disableLock) => {
    console.log(disableLock);
    if (disableLock) {
      queryForm.voidFlag = 1;
      getTableData();
    } else {
      queryForm.voidFlag = 0;
      getTableData();
    }
  }
);
const {
  tableData,
  queryPage,
  total,
  loading,
  getTableData,
  tableHeight,
  handleSearch, //搜索
  refreshTableInfo, //刷新
} = useTable(queryDesignTemplates, queryForm);
</script>