测试完成

WXL (wul)

昨天 d3c60e18b95b50751f8088fa2d23cd8ff7f173bc

 src/views/knowledge/questionnaire/smsConfig/index.vue

@@ -1,64 +1,6 @@
<template>
  <div class="smsConfig-management">
    <!-- 左侧栏 -->
    <div class="sidecolumn">
      <div class="sidecolumn-top">
        <div class="top-wj">模板分类</div>
        <div class="top-tj" @click="Newcategory">+添加</div>
      </div>
      <div class="center-ss">
        <el-input
          placeholder="请输入内容"
          v-model="sidecolumnval"
          class="input-with-select"
          size="medium"
        >
        </el-input>
      </div>
      <div class="head-container" style="margin-top: 20px">
        <el-tree
          :data="deptOptions"
          :props="defaultProps"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree"
          node-key="id"
          default-expand-all
          highlight-current
          @node-click="handleNodeClick"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span class="tree-node-label">{{ node.label }}</span>
            <span v-if="data.id > 0">
              <el-button
                type="text"
                icon="el-icon-delete"
                circle
                size="mini"
                @click="() => remove(node, data)"
              >
              </el-button>
            </span>
            <span v-if="data.id > 0">
              <el-button
                type="text"
                circle
                size="mini"
                @click="() => altertag(node, data)"
              >
                <span class="button-textxg">
                  <i class="el-icon-edit-outline"></i>
                </span>
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
    </div>

    <!-- 右侧数据 -->
    <div class="leftvlue">
      <div class="leftvlue-bg">
    <div class="main-content">
        <el-row :gutter="20">
          <el-col :span="24" :xs="24">
            <el-form
@@ -67,8 +9,18 @@
              size="small"
              :inline="true"
              v-show="showSearch"
              label-width="98px"
            label-width="88px"
            >
            <el-form-item label="模板编号" prop="templetno">
              <el-input
                v-model="queryParams.templetno"
                placeholder="请输入模板编号"
                clearable
                style="width: 200px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>

              <el-form-item label="模板名称" prop="templetname">
                <el-input
                  v-model="queryParams.templetname"
@@ -79,31 +31,14 @@
                />
              </el-form-item>

              <el-form-item label="短信签名" prop="signature">
            <el-form-item label="部门名称" prop="deptName">
                <el-input
                  v-model="queryParams.signature"
                  placeholder="请输入短信签名"
                v-model="queryParams.deptName"
                placeholder="请输入部门名称"
                  clearable
                  style="width: 200px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>

              <el-form-item label="启用状态" prop="isenable">
                <el-select
                  v-model="queryParams.isenable"
                  placeholder="请选择状态"
                  clearable
                  style="width: 200px"
                >
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
@@ -112,12 +47,14 @@
                  icon="el-icon-search"
                  size="medium"
                  @click="handleQuery"
                >搜索</el-button>
                >搜索</el-button
              >
                <el-button
                  icon="el-icon-refresh"
                  size="medium"
                  @click="resetQuery"
                >重置</el-button>
                >重置</el-button
              >
              </el-form-item>
            </el-form>

@@ -131,7 +68,8 @@
                  icon="el-icon-plus"
                  size="medium"
                  @click="handleAdd"
                >新增</el-button>
                >新增</el-button
              >
              </el-col>
              <el-col :span="1.5">
                <el-button
@@ -141,7 +79,8 @@
                  size="medium"
                  :disabled="multiple"
                  @click="handleDelete"
                >删除</el-button>
                >删除</el-button
              >
              </el-col>
            </el-row>

@@ -154,20 +93,21 @@
              <el-table-column type="selection" width="50" align="center" />

              <el-table-column
              label="模板编号"
              align="center"
              key="templetno"
              prop="templetno"
              width="140"
              :show-overflow-tooltip="true"
            />

            <el-table-column
                label="模板名称"
                align="center"
                key="templetname"
                prop="templetname"
                width="160"
                :show-overflow-tooltip="true"
              />

              <el-table-column
                label="短信签名"
                align="center"
                key="signature"
                prop="signature"
                width="120"
              />

              <el-table-column
@@ -180,43 +120,52 @@
              />

              <el-table-column
                label="模板类型"
              label="部门名称"
                align="center"
                key="templettype"
                prop="templettype"
              key="deptName"
              prop="deptName"
                width="120"
              >
                <template slot-scope="scope">
                  <dict-tag :options="typeOptions" :value="scope.row.templettype" />
                </template>
              </el-table-column>

              <el-table-column
                label="启用状态"
                align="center"
                key="isenable"
                prop="isenable"
                width="100"
              >
                <template slot-scope="scope">
                  <dict-tag :options="statusOptions" :value="scope.row.isenable" />
                </template>
              </el-table-column>

              <el-table-column
                label="备注"
                align="center"
                key="remark"
                prop="remark"
                width="180"
                :show-overflow-tooltip="true"
              />

              <el-table-column
                label="创建时间"
              label="病区名称"
                align="center"
                key="createTime"
                prop="createTime"
              key="wardName"
              prop="wardName"
              width="140"
              :show-overflow-tooltip="true"
            />

            <el-table-column
              label="用户工号"
              align="center"
              key="userName"
              prop="userName"
              width="120"
            />

            <el-table-column
              label="用户昵称"
              align="center"
              key="nickName"
              prop="nickName"
              width="120"
            />

            <el-table-column
              label="是否上传"
              align="center"
              key="isupload"
              prop="isupload"
              width="90"
            />

            <el-table-column
              label="上传时间"
              align="center"
              key="uploadTime"
              prop="uploadTime"
                width="160"
              />

@@ -224,7 +173,7 @@
                label="操作"
                fixed="right"
                align="center"
                width="240"
              width="200"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
@@ -269,7 +218,6 @@
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 添加/修改短信模板弹框 -->
    <el-dialog
@@ -285,36 +233,19 @@
        label-width="100px"
        size="medium"
      >
        <el-form-item label="模板分类" prop="categoryid">
          <el-select
            v-model="form.categoryid"
            placeholder="请选择模板分类"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in categoryOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        <el-form-item label="模板编号" prop="templetno">
          <el-input
            v-model="form.templetno"
            placeholder="请输入模板编号"
            maxlength="50"
          />
        </el-form-item>

        <el-form-item label="模板名称" prop="templetname">
          <el-input
            v-model="form.templetname"
            placeholder="请输入模板名称"
            maxlength="50"
          />
        </el-form-item>

        <el-form-item label="短信签名" prop="signature">
          <el-input
            v-model="form.signature"
            placeholder="请输入短信签名（如：【丽水人民医院】）"
            maxlength="20"
            maxlength="100"
          />
        </el-form-item>

@@ -329,118 +260,77 @@
          />
        </el-form-item>

        <el-form-item label="模板类型" prop="templettype">
        <el-form-item label="科室" prop="deptCode">
          <el-select
            v-model="form.templettype"
            placeholder="请选择模板类型"
            v-model="form.deptCode"
            placeholder="请选择科室"
            filterable
            clearable
            style="width: 100%"
            @change="handleDeptChange"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
              v-for="dept in departmentOptions"
              :key="dept.value"
              :label="dept.label"
              :value="dept.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="启用状态" prop="isenable">
          <el-radio-group v-model="form.isenable">
            <el-radio
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.value"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
            maxlength="200"
            show-word-limit
        <el-form-item label="病区" prop="wardCode">
          <el-select
            v-model="form.wardCode"
            placeholder="请选择病区"
            filterable
            clearable
            style="width: 100%"
            @change="handleWardChange"
          >
            <el-option
              v-for="ward in wardOptions"
              :key="ward.value"
              :label="ward.label"
              :value="ward.value"
          />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelForm">取 消</el-button>
        <el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
        <el-button type="primary" @click="submitForm" :loading="submitLoading"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 模板预览弹框 -->
    <el-dialog
      title="短信模板预览"
      :visible.sync="previewVisible"
      width="40%"
    >
    <el-dialog title="短信模板预览" :visible.sync="previewVisible" width="40%">
      <div class="preview-box">
        <div class="preview-item">
          <div class="preview-label">模板编号：</div>
          <div class="preview-value">{{ previewData.templetno || "-" }}</div>
        </div>
        <div class="preview-item">
          <div class="preview-label">模板名称：</div>
          <div class="preview-value">{{ previewData.templetname }}</div>
          <div class="preview-value">{{ previewData.templetname || "-" }}</div>
        </div>
        <div class="preview-item">
          <div class="preview-label">短信签名：</div>
          <div class="preview-value">{{ previewData.signature }}</div>
          <div class="preview-label">部门名称：</div>
          <div class="preview-value">{{ previewData.deptName || "-" }}</div>
        </div>
        <div class="preview-item">
          <div class="preview-label">模板类型：</div>
          <div class="preview-value">
            <dict-tag :options="typeOptions" :value="previewData.templettype" />
          <div class="preview-label">病区名称：</div>
          <div class="preview-value">{{ previewData.wardName || "-" }}</div>
          </div>
        </div>
        <div class="preview-item">
          <div class="preview-label">启用状态：</div>
          <div class="preview-value">
            <dict-tag :options="statusOptions" :value="previewData.isenable" />
          </div>
        </div>

        <el-divider></el-divider>
        <div class="preview-content">
          <div class="preview-content-label">短信内容预览：</div>
          <div class="preview-content-box">
            {{ previewData.templetcontent || '暂无内容' }}
            {{ previewData.templetcontent || "暂无内容" }}
          </div>
        </div>
        <div class="preview-item" v-if="previewData.remark">
          <div class="preview-label">备注：</div>
          <div class="preview-value">{{ previewData.remark }}</div>
        </div>
      </div>
    </el-dialog>

    <!-- 添加类别弹框 -->
    <el-dialog title="类别编辑" width="30%" :visible.sync="dialogFormVisible">
      <div style="text-align: center; margin-bottom: 20px">
        <el-radio-group v-model="radio">
          <el-radio-button label="主分类"></el-radio-button>
          <el-radio-button label="子分类"></el-radio-button>
        </el-radio-group>
      </div>
      <el-divider></el-divider>
      <el-form :model="classifyform">
        <el-form-item label="请选择模板大类" v-if="radio == '子分类'">
          <el-select v-model="classifyform.pid" placeholder="请选择">
            <el-option
              v-for="item in deptOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请输入类别名称">
          <el-input v-model="classifyform.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="getDeptTree()">取 消</el-button>
        <el-button type="primary" @click="submitsidecolumn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
@@ -484,35 +374,10 @@
      previewVisible: false,
      // 预览数据
      previewData: {},
      // 类别弹框
      dialogFormVisible: false,
      // 类别form
      classifyform: {},
      // 主/子分类
      radio: "主分类",
      // 类别搜索
      sidecolumnval: "",
      // 树数据
      deptOptions: [],
      // 分类下拉选项
      categoryOptions: [],
      // 树props
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 状态选项
      statusOptions: [
        { label: "启用", value: "0" },
        { label: "停用", value: "1" },
      ],
      // 类型选项
      typeOptions: [
        { label: "验证码", value: "0" },
        { label: "通知", value: "1" },
        { label: "营销", value: "2" },
        { label: "随访", value: "3" },
      ],
      // 科室选项
      departmentOptions: [],
      // 病区选项
      wardOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
@@ -528,24 +393,40 @@
        templetcontent: [
          { required: true, message: "请输入模板内容", trigger: "blur" },
        ],
        signature: [
          { required: true, message: "请输入短信签名", trigger: "blur" },
        ],
        isenable: [
          { required: true, message: "请选择启用状态", trigger: "change" },
        ],
      },
    };
  },
  watch: {
    // 监听类别搜索
    sidecolumnval(val) {
      this.$refs.tree.filter(val);
  computed: {
    // 从 store getters 获取科室选项
    computedDepartmentOptions() {
      if (this.$store.getters.belongDepts) {
        return this.$store.getters.belongDepts.map((dept) => ({
          label: dept.deptName,
          value: dept.deptCode,
        }));
      }
      return [];
    },
    // 从 store getters 获取病区选项
    computedWardOptions() {
      console.log(
        this.$store.getters.belongWards,
        "this.$store.getters.belongWards"
      );

      if (this.$store.getters.belongWards) {
        return this.$store.getters.belongWards.map((ward) => ({
          label: ward.districtName,
          value: ward.districtCode,
        }));
      }
      return [];
    },
  },
  created() {
    this.getList();
    this.getDeptTree();
    this.departmentOptions = this.computedDepartmentOptions;
    this.wardOptions = this.computedWardOptions;
  },
  methods: {
    /** 查询列表 */
@@ -581,14 +462,7 @@
    handleAdd() {
      this.dialogTitle = "新增短信模板";
      this.dialogVisible = true;
      this.form = {
        isenable: "0",
        templettype: "1",
      };
      // 如果有树选中分类，默认带入
      if (this.queryParams.categoryid) {
        this.form.categoryid = this.queryParams.categoryid;
      }
      this.form = {};
      this.$nextTick(() => {
        if (this.$refs.formRef) {
          this.$refs.formRef.clearValidate();
@@ -618,6 +492,30 @@
      getSmstemplet(templetid).then((response) => {
        this.previewData = response.data;
      });
    },

    /** 科室选择变化 - 自动填充科室名称 */
    handleDeptChange(value) {
      const selectedDept = this.departmentOptions.find(
        (dept) => dept.value === value
      );
      if (selectedDept) {
        this.form.deptName = selectedDept.label;
      } else {
        this.form.deptName = "";
      }
    },

    /** 病区选择变化 - 自动填充病区名称 */
    handleWardChange(value) {
      const selectedWard = this.wardOptions.find(
        (ward) => ward.value === value
      );
      if (selectedWard) {
        this.form.wardName = selectedWard.label;
      } else {
        this.form.wardName = "";
      }
    },

    /** 提交表单 */
@@ -677,260 +575,21 @@
        })
        .catch(() => {});
    },

    // 表单重置
    reset() {
      this.form = {
        templetid: undefined,
        templetname: undefined,
        signature: undefined,
        templetcontent: undefined,
        templettype: "1",
        isenable: "0",
        categoryid: undefined,
        remark: undefined,
      };
      this.resetForm("form");
    },

    /** 查询分类树 */
    getDeptTree() {
      // 模拟分类树数据 - 实际项目中应替换为真实API
      this.deptOptions = [
        {
          id: 1,
          name: "随访短信",
          children: [
            { id: 11, name: "出院随访" },
            { id: 12, name: "复诊提醒" },
            { id: 13, name: "健康宣教" },
          ],
        },
        {
          id: 2,
          name: "通知短信",
          children: [
            { id: 21, name: "预约通知" },
            { id: 22, name: "报告通知" },
          ],
        },
        {
          id: 3,
          name: "验证码",
          children: [
            { id: 31, name: "登录验证" },
            { id: 32, name: "注册验证" },
          ],
        },
      ];
      this.categoryOptions = this.flattenTree(this.deptOptions);
    },

    /** 扁平化树数据用于下拉选择 */
    flattenTree(tree) {
      let result = [];
      tree.forEach((item) => {
        result.push({ id: item.id, name: item.name });
        if (item.children && item.children.length) {
          result = result.concat(item.children);
        }
      });
      return result;
    },

    /** 筛选节点 */
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },

    /** 点击树节点 */
    handleNodeClick(data) {
      if (data.children && data.children.length) return;
      this.queryParams.categoryid = data.id;
      this.getList();
    },

    // 分类树-----------------------
    /** 新建分类 */
    Newcategory() {
      this.classifyform = {};
      this.radio = "主分类";
      this.dialogFormVisible = true;
    },

    /** 修改分类 */
    altertag(node, data) {
      this.dialogFormVisible = true;
      if (data.children && data.children.length) {
        this.radio = "主分类";
      } else {
        this.radio = "子分类";
      }
      this.classifyform = { ...data };
    },

    /** 提交分类 */
    submitsidecolumn() {
      if (this.classifyform.id) {
        // 修改分类 - 实际项目中应替换为真实API
        const index = this.deptOptions.findIndex(
          (obj) => obj.id === this.classifyform.id
        );
        if (index > -1) {
          this.deptOptions[index].name = this.classifyform.name;
          this.$set(this.deptOptions, index, this.deptOptions[index]);
        }
        this.$modal.msgSuccess("修改成功");
        this.dialogFormVisible = false;
        return;
      }

      if (this.radio === "主分类" && this.classifyform.name) {
        // 新增主分类
        const newId = Math.max(...this.deptOptions.map((d) => d.id), 0) + 1;
        this.deptOptions.push({
          id: newId,
          name: this.classifyform.name,
          children: [],
        });
        this.$modal.msgSuccess("新增成功");
        this.dialogFormVisible = false;
      } else if (
        this.radio === "子分类" &&
        this.classifyform.pid &&
        this.classifyform.name
      ) {
        // 新增子分类
        const parent = this.deptOptions.find(
          (obj) => obj.id === this.classifyform.pid
        );
        if (parent) {
          const newChildId =
            Math.max(...parent.children.map((c) => c.id), parent.id * 10) + 1;
          parent.children.push({
            id: newChildId,
            name: this.classifyform.name,
          });
        }
        this.$modal.msgSuccess("新增成功");
        this.dialogFormVisible = false;
      } else {
        this.$modal.msgError("请填写完整信息");
      }
      this.classifyform = {};
    },

    /** 删除分类 */
    remove(node, data) {
      if (data.children && data.children.length) {
        this.$modal
          .confirm(
            '是否确认删除一级分类"' + data.name + '"？删除后其下分类将无法使用'
          )
          .then(() => {
            const index = this.deptOptions.findIndex(
              (obj) => obj.id === data.id
            );
            if (index > -1) {
              this.deptOptions.splice(index, 1);
            }
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      } else {
        this.$modal
          .confirm('是否确认删除分类项为"' + data.name + '"的数据项？')
          .then(() => {
            this.deptOptions.forEach((parent) => {
              const idx = parent.children.findIndex(
                (child) => child.id === data.id
              );
              if (idx > -1) {
                parent.children.splice(idx, 1);
              }
            });
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.smsConfig-management {
  display: flex;
  padding: 20px;
}

.sidecolumn {
  width: 380px;
  min-height: 100vh;
  text-align: center;
  margin-top: 20px;
  margin: 20px;
.main-content {
  padding: 30px;
  background: #fff;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);

  .sidecolumn-top {
    display: flex;
    justify-content: space-between;
    .top-wj {
      font-size: 20px;
    }
    .top-tj {
      font-size: 18px;
      color: rgb(0, 89, 255);
      cursor: pointer;
    }
  }

  /* 核心：设置固定宽度，超出部分显示省略号 */
  .tree-node-label {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }

  /* 可选：鼠标悬停时取消限制，显示全文 */
  .custom-tree-node:hover .tree-node-label {
    max-width: none;
    white-space: normal;
    overflow: visible;
  }

  .center-ss {
    margin-top: 30px;
    .input-with-select {
      height: 40px !important;
    }
  }

  .bottom-fl {
    margin-top: 30px;
    display: center !important;
  }
}

.leftvlue {
  width: 80%;
  margin-top: 20px;
  padding: 30px;
  background: #ffff;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);

  .mulsz {
    font-size: 20px;
  }
}

// 预览弹框样式
@@ -980,46 +639,8 @@
  }
}

// 深度选择器
::v-deep .el-input--medium .el-input__inner {
  height: 40px !important;
}

::v-deep .el-tree-node__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 46px;
  font-size: 20px;
  cursor: pointer;
}

::v-deep .el-tree {
  position: relative;
  cursor: default;
  border-radius: 5px;
  background: #eff8fe;
  color: #606266;
  border: 1px solid #bbe1fa;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
}

::v-deep
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #7799fb;
  color: #fff;
}

::v-deep .el-button--mini.is-circle {
  padding: 7px;
  margin: 0;
  color: red;
}

// 按钮文字颜色