- <template>
- <div class="app-container">
- <el-form
- :model="queryParams"
- ref="queryRef"
- :inline="true"
- v-show="showSearch"
- >
- <el-form-item label="" prop="platformName">
- <el-input
- v-model="queryParams.platformName"
- placeholder="请输入项目名称"
- clearable
- style="width: 200px"
- @keyup.enter="handleQuery"
- />
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="Search" @click="handleQuery"
- >搜索</el-button
- >
- <el-button icon="Refresh" @click="resetQuery">重置</el-button>
- </el-form-item>
- </el-form>
-
- <el-row :gutter="10" class="mb8">
- <el-col :span="1.5">
- <el-button type="primary" plain icon="Plus" @click="handleAdd"
- >新增</el-button
- >
- </el-col>
-
- <el-col :span="1.5">
- <el-button
- type="danger"
- plain
- icon="Delete"
- :disabled="multiple"
- @click="handleDelete"
- >删除</el-button
- >
- </el-col>
- <right-toolbar
- v-model:showSearch="showSearch"
- @queryTable="getList"
- ></right-toolbar>
- </el-row>
-
- <el-table
- v-loading="loading"
- :data="platformJumpList"
- border
- @selection-change="handleSelectionChange"
- >
- <el-table-column type="selection" width="55" align="center" />
- <el-table-column label="序号" align="center" type="index" width="70" />
- <el-table-column
- label="项目名称"
- align="center"
- prop="platformName"
- :show-overflow-tooltip="true"
- />
- <el-table-column label="地址" align="center" prop="platformLinkAddress">
- </el-table-column>
- <el-table-column
- label="所属类型"
- align="center"
- prop="category"
- width="100"
- >
- <template #default="scope">
- <dict-tag :options="category_type" :value="scope.row.category" />
- </template>
- </el-table-column>
- <el-table-column label="状态" align="center" prop="status" width="100">
- <template #default="scope">
- <dict-tag :options="platformJump_state" :value="scope.row.status" />
- </template>
- </el-table-column>
- <el-table-column
- label="浏览次数"
- align="center"
- prop="browseNum"
- width="100"
- >
- </el-table-column>
- <el-table-column
- label="是否显示"
- align="center"
- prop="isShow"
- width="100"
- >
- <!-- <template #default="scope">
- <dict-tag :options="is_state" :value="scope.row.isShow" />
- </template> -->
- <template #default="scope">
- <el-switch
- v-model="scope.row.isShow"
- :active-value="1"
- :inactive-value="0"
- @change="handleStatusChange(scope.row)"
- ></el-switch>
- </template>
- </el-table-column>
- <el-table-column
- label="创建人"
- align="center"
- prop="createBy"
- width="100"
- />
- <el-table-column
- label="创建时间"
- align="center"
- prop="createTime"
- width="200"
- >
- </el-table-column>
- <el-table-column
- label="操作"
- align="center"
- class-name="small-padding fixed-width"
- width="240"
- >
- <template #default="scope">
- <el-button
- link
- type="primary"
- icon="Edit"
- @click="handleUpdate(scope.row)"
- >修改</el-button
- >
- <el-button
- link
- type="primary"
- icon="Delete"
- @click="handleDelete(scope.row)"
- >删除</el-button
- >
- <el-button
- link
- type="primary"
- icon="View"
- @click="handleAddConfigPerson(scope.row)"
- >配置人员</el-button
- >
- </template>
- </el-table-column>
- </el-table>
-
- <pagination
- v-show="total > 0"
- :total="total"
- v-model:page="queryParams.pageNum"
- v-model:limit="queryParams.pageSize"
- @pagination="getList"
- />
-
- <!-- 添加或修改案例对话框 -->
- <el-dialog :title="title" v-model="open" width="900px" append-to-body>
- <el-form
- ref="platformJumpRef"
- :model="form"
- :rules="rules"
- label-width="120px"
- >
- <el-row>
- <el-col :span="24">
- <el-form-item label="项目名称" prop="platformName">
- <el-input
- v-model="form.platformName"
- placeholder="请输入项目名称"
- />
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="项目地址" prop="platformLinkAddress">
- <el-input
- v-model="form.platformLinkAddress"
- placeholder="请输入项目地址"
- />
- </el-form-item>
- </el-col>
-
- <el-col :span="12">
- <el-form-item label="是否显示">
- <el-radio-group v-model="form.isShow">
- <el-radio
- v-for="dict in is_state"
- :key="dict.value"
- :label="dict.value"
- >{{ dict.label }}</el-radio
- >
- </el-radio-group>
- </el-form-item>
- </el-col>
-
- <el-col :span="12">
- <el-form-item label="所属类别" prop="category">
- <el-select v-model="form.category" placeholder="请选择">
- <el-option
- v-for="dict in category_type"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="状态" prop="status">
- <el-select v-model="form.status" placeholder="请选择">
- <el-option
- v-for="dict in platformJump_state"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="项目商务" prop="projectBusiness">
- <el-select v-model="form.projectBusiness" placeholder="请选择">
- <el-option
- v-for="dict in chargeUser_list"
- :key="dict.userId"
- :label="dict.nickName"
- :value="dict.userId"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="技术负责人" prop="technicalLeader">
- <el-select v-model="form.technicalLeader" placeholder="请选择">
- <el-option
- v-for="dict in chargeUser_list"
- :key="dict.userId"
- :label="dict.nickName"
- :value="dict.userId"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="工程项目经理" prop="projectManager">
- <el-select v-model="form.projectManager" placeholder="请选择">
- <el-option
- v-for="dict in chargeUser_list"
- :key="dict.userId"
- :label="dict.nickName"
- :value="dict.userId"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="软件负责人" prop="softwareManager">
- <el-select v-model="form.softwareManager" placeholder="请选择">
- <el-option
- v-for="dict in chargeUser_list"
- :key="dict.userId"
- :label="dict.nickName"
- :value="dict.userId"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="运维人员" prop="maintenancePersonnel">
- <el-select
- v-model="form.maintenancePersonnel"
- placeholder="请选择"
- >
- <el-option
- v-for="dict in chargeUser_list"
- :key="dict.userId"
- :label="dict.nickName"
- :value="dict.userId"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="首页图片" prop="picture">
- <ImageUpload
- :isBackName="true"
- v-model:modelValue="form.picture"
- ></ImageUpload>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <template #footer>
- <div class="dialog-footer">
- <el-button type="primary" @click="submitForm">确 定</el-button>
- <el-button @click="cancel">取 消</el-button>
- </div>
- </template>
- </el-dialog>
- <!-- 详情 -->
- <el-dialog
- title="配置人员"
- v-model="configOpen"
- width="700px"
- append-to-body
- >
- <el-transfer
- v-model="addConfigPerson.userId"
- filterable
- :titles="['所有人员', '已选人员']"
- :filter-method="filterMethod"
- filter-placeholder="搜索人员"
- :data="chargeUser_list"
- :props="{
- key: 'userId',
- label: 'nickName',
- }"
- style="margin-top: 20px"
- />
- <template #footer>
- <div class="dialog-footer">
- <el-button type="primary" @click="submitConfigPersonForm"
- >确 定</el-button
- >
- <el-button @click="configOpen = false">关 闭</el-button>
- </div>
- </template>
- </el-dialog>
- </div>
- </template>
-
- <script setup name="caseManagement">
- import {
- pageCase,
- getCase,
- delCase,
- addCase,
- updateCase,
- } from "@/api/system/caseManagement";
- import {
- listPlatformJumpUser,
- addPlatformJumpUser,
- } from "@/api/system/platformJumpUser";
- import { listUser } from "@/api/system/user";
- import { fileList } from "@/api/system/file.js";
-
- const { proxy } = getCurrentInstance();
- const is_state = proxy.fixDict["isState"]; //是否字典
- const platformJump_state = proxy.fixDict["platformJumpState"];
- const { category_type } = proxy.useDict("category_type");
-
- const platformJumpList = ref([]);
- const open = ref(false);
- const loading = ref(true);
- const showSearch = ref(true);
- const ids = ref([]);
- const single = ref(true);
- const multiple = ref(true);
- const total = ref(0);
- const title = ref("");
- const configOpen = ref(false);
- const chargeUser_list = ref([]); //人员
- const currentRow = ref({}); //当前数据
- const data = reactive({
- form: {
- isShow: "1",
- status: 0,
- },
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- platformName: undefined,
- },
- rules: {
- platformName: [
- { required: true, message: "项目名称不能为空", trigger: "blur" },
- ],
- platformLinkAddress: [
- { required: true, message: "项目地址不能为空", trigger: "blur" },
- ],
- category: [
- { required: true, message: "所属类别不能为空", trigger: "change" },
- ],
- projectBusiness: [
- { required: true, message: "项目商务不能为空", trigger: "change" },
- ],
- },
- addConfigPerson: { userId: [], queryParams: { nickName: "" } }, //详情弹框
- });
-
- const { queryParams, form, rules, addConfigPerson } = toRefs(data);
-
- //查询负责人列表
- function getUserList() {
- listUser().then((res) => {
- chargeUser_list.value = res.data;
- });
- }
-
- /** 查询案例列表 */
- function getList() {
- loading.value = true;
- pageCase(queryParams.value).then((response) => {
- platformJumpList.value = response.data;
- total.value = response.total;
- loading.value = false;
- });
- }
- // 多选框选中数据
- function handleSelectionChange(selection) {
- ids.value = selection.map((item) => item.id);
- single.value = selection.length != 1;
- multiple.value = !selection.length;
- }
- /** 取消按钮 */
- function cancel() {
- open.value = false;
- reset();
- }
- /** 表单重置 */
- function reset() {
- form.value = {
- id: undefined,
- category: "",
- completedAddress: "",
- maintenancePersonnel: "",
- platformCode: "",
- platformLinkAddress: "",
- platformName: "",
- platformValidateMethod: "",
- platformValidateUrl: "",
- projectBusiness: "",
- projectManager: "",
- softwareManager: "",
- status: 0,
- technicalLeader: "",
- uncompletedAddress: "",
- isShow: "1",
- picture: [],
- };
- proxy.resetForm("platformJumpRef");
- }
- /** 搜索按钮操作 */
- function handleQuery() {
- queryParams.value.pageNum = 1;
- getList();
- }
- /** 重置按钮操作 */
- function resetQuery() {
- proxy.resetForm("queryRef");
- handleQuery();
- }
-
- /** 新增按钮操作 */
- function handleAdd() {
- reset();
- open.value = true;
- title.value = "添加案例";
- }
- /**修改按钮操作 */
- function handleUpdate(row) {
- reset();
- const id = row.id || ids.value;
- getCase(id).then((response) => {
- response.data.isShow = response.data.isShow.toString();
- form.value = response.data;
- open.value = true;
- title.value = "修改案例";
- getFileList(row);
- });
- }
-
- //获取图片
- function getFileList(row) {
- fileList({ refId: row.id, refType: "projectDemo" }).then((res) => {
- form.value.picture = res.data;
- });
- }
-
- /** 提交按钮 */
- function submitForm() {
- proxy.$refs["platformJumpRef"].validate((valid) => {
- if (valid) {
- form.value.fileSaveRequestList = [];
- if (form.value.picture) {
- form.value.fileSaveRequestList = form.value.picture.map((item) => {
- return {
- name: item.name,
- refField: "home.picture",
- refType: "projectDemo",
- url: item.url,
- };
- });
- }
-
- if (form.value.id != undefined) {
- updateCase(form.value).then((response) => {
- proxy.$modal.msgSuccess("修改成功");
- open.value = false;
- getList();
- });
- } else {
- addCase(form.value).then((response) => {
- proxy.$modal.msgSuccess("新增成功");
- open.value = false;
- getList();
- });
- }
- }
- });
- }
- /** 删除按钮操作 */
- function handleDelete(row) {
- const id = row.id || ids.value;
- proxy.$modal
- .confirm('是否确认删除案例编号为"' + id + '"的数据项?')
- .then(function () {
- return delCase(id);
- })
- .then(() => {
- getList();
- proxy.$modal.msgSuccess("删除成功");
- })
- .catch(() => {});
- }
-
- //配置人员
- function handleAddConfigPerson(row) {
- configOpen.value = true;
- currentRow.value = row;
- listPlatformJumpUser({ jumpId: row.id }).then((res) => {
- let data = res.data;
- addConfigPerson.value.userId = data.map((item) => {
- return Number(item.userAccount);
- });
- });
- }
-
- //提交配置人员选择
- function submitConfigPersonForm() {
- let data = addConfigPerson.value.userId.map((val) => {
- return {
- jumpId: currentRow.value.id,
- userAccount: val,
- };
- });
- addPlatformJumpUser(data, currentRow.value.id).then((res) => {
- configOpen.value = false;
- proxy.$modal.msgSuccess(`配置成功`);
- });
- }
-
- //隐藏操作
- function handleStatusChange(row) {
- let text = row.isShow == 0 ? "隐藏" : "显示";
- form.value = row;
- fileList({ refId: row.id, refType: "news" }).then((res) => {
- form.value.picture = res.data;
- proxy.$modal
- .confirm(`是否确认${text}案例?`)
- .then(function () {
- form.value.isShow = row.isShow == 0 ? 0 : 1;
- form.value.fileSaveRequestList = [];
- if (form.value.picture) {
- form.value.fileSaveRequestList = form.value.picture.map((item) => {
- return {
- name: item.name,
- refField: "home.picture",
- refType: "news",
- url: item.url,
- };
- });
- }
- return updateCase(form.value);
- })
- .then(() => {
- getList();
- proxy.$modal.msgSuccess(`${text}成功`);
- })
- .catch(() => {
- row.isShow = row.isShow == 0 ? 1 : 0;
- });
- });
- }
-
- getList();
- getUserList();
- </script>