index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
  4. <el-form-item label="所属销售" prop="companyUserId">
  5. <el-select v-model="queryParams.companyUserId" remote placeholder="请选择" filterable clearable style="width: 100%;" @keyup.enter.native="handleQuery">
  6. <el-option
  7. v-for="dict in companyUserList"
  8. :key="`${dict.nickName} - ${dict.userName}`"
  9. :label="`${dict.nickName} - ${dict.userName}`"
  10. :value="dict.userId">
  11. </el-option>
  12. </el-select>
  13. </el-form-item>
  14. <el-form-item label="微信昵称" prop="nickName">
  15. <el-input
  16. v-model="queryParams.nickName"
  17. placeholder="请输入微信昵称"
  18. clearable
  19. size="small"
  20. @keyup.enter.native="handleQuery"
  21. />
  22. </el-form-item>
  23. <el-form-item label="微信号" prop="weixinId">
  24. <el-input
  25. v-model="queryParams.weixinId"
  26. placeholder="请输入微信号"
  27. clearable
  28. size="small"
  29. @keyup.enter.native="handleQuery"
  30. />
  31. </el-form-item>
  32. <el-form-item label="状态" prop="status">
  33. <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
  34. <el-option v-for="dict in personalWechatStatusOptions"
  35. :key="dict.dictValue"
  36. :label="dict.dictLabel"
  37. :value="dict.dictValue"
  38. />
  39. </el-select>
  40. </el-form-item>
  41. <el-form-item label="所属分组" prop="groupId">
  42. <el-input
  43. v-model="queryParams.groupId"
  44. placeholder="请输入所属分组"
  45. clearable
  46. size="small"
  47. @keyup.enter.native="handleQuery"
  48. />
  49. </el-form-item>
  50. <el-form-item label="小程序用户id" prop="fsUserId">
  51. <el-input
  52. v-model="queryParams.fsUserId"
  53. placeholder="请输入小程序用户id"
  54. clearable
  55. size="small"
  56. @keyup.enter.native="handleQuery"
  57. />
  58. </el-form-item>
  59. <el-form-item label="个微账户ID" prop="accountId">
  60. <el-input
  61. v-model="queryParams.accountId"
  62. placeholder="请输入个微账户ID"
  63. clearable
  64. size="small"
  65. @keyup.enter.native="handleQuery"
  66. />
  67. </el-form-item>
  68. <el-form-item>
  69. <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  70. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  71. </el-form-item>
  72. </el-form>
  73. <el-row :gutter="10" class="mb8">
  74. <el-col :span="1.5">
  75. <el-button
  76. type="primary"
  77. icon="el-icon-plus"
  78. size="mini"
  79. @click="handleAdd"
  80. v-hasPermi="['system:user:add']"
  81. >新增</el-button>
  82. </el-col>
  83. <el-col :span="1.5">
  84. <el-button
  85. type="success"
  86. icon="el-icon-edit"
  87. size="mini"
  88. :disabled="single"
  89. @click="handleUpdate"
  90. v-hasPermi="['system:user:edit']"
  91. >修改</el-button>
  92. </el-col>
  93. <el-col :span="1.5">
  94. <el-button
  95. type="danger"
  96. icon="el-icon-delete"
  97. size="mini"
  98. :disabled="multiple"
  99. @click="handleDelete"
  100. v-hasPermi="['system:user:remove']"
  101. >删除</el-button>
  102. </el-col>
  103. <el-col :span="1.5">
  104. <el-button
  105. type="warning"
  106. icon="el-icon-download"
  107. size="mini"
  108. @click="handleExport"
  109. v-hasPermi="['system:user:export']"
  110. >导出</el-button>
  111. </el-col>
  112. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  113. </el-row>
  114. <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
  115. <el-table-column type="selection" width="55" align="center" />
  116. <el-table-column label="ID" align="center" prop="userId" />
  117. <el-table-column label="所属销售" align="center" prop="companyUserName" />
  118. <el-table-column label="微信昵称" align="center" prop="nickName" />
  119. <el-table-column label="微信号" align="center" prop="weixinId" />
  120. <el-table-column label="状态" align="center" prop="statusText" />
  121. <el-table-column label="备注" align="center" prop="remark" />
  122. <el-table-column label="头像" align="center" prop="avatar" />
  123. <el-table-column label="所属分组" align="center" prop="groupId" />
  124. <el-table-column label="小程序用户id" align="center" prop="fsUserId" />
  125. <el-table-column label="个微账户ID" align="center" prop="accountId" />
  126. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  127. <template slot-scope="scope">
  128. <el-button
  129. size="mini"
  130. type="text"
  131. icon="el-icon-edit"
  132. @click="handleUpdate(scope.row)"
  133. v-hasPermi="['system:user:edit']"
  134. >修改</el-button>
  135. <el-button
  136. size="mini"
  137. type="text"
  138. icon="el-icon-delete"
  139. @click="handleDelete(scope.row)"
  140. v-hasPermi="['system:user:remove']"
  141. >删除</el-button>
  142. </template>
  143. </el-table-column>
  144. </el-table>
  145. <pagination
  146. v-show="total>0"
  147. :total="total"
  148. :page.sync="queryParams.pageNum"
  149. :limit.sync="queryParams.pageSize"
  150. @pagination="getList"
  151. />
  152. <!-- 添加或修改【个人微信】对话框 -->
  153. <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  154. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  155. <el-form-item label="所属销售" style="height: 50px;">
  156. <el-select v-model="form.companyUserId" remote placeholder="请选择" filterable clearable style="width: 100%;">
  157. <el-option
  158. v-for="dict in companyUserList"
  159. :key="`${dict.nickName} - ${dict.userName}`"
  160. :label="`${dict.nickName} - ${dict.userName}`"
  161. :value="dict.userId">
  162. </el-option>
  163. </el-select>
  164. </el-form-item>
  165. <el-form-item label="微信昵称" prop="nickName">
  166. <el-input v-model="form.nickName" placeholder="请输入微信昵称" />
  167. </el-form-item>
  168. <el-form-item label="微信号" prop="weixinId">
  169. <el-input v-model="form.weixinId" placeholder="请输入微信号" />
  170. </el-form-item>
  171. <el-form-item label="状态">
  172. <el-select v-model="statusModel" placeholder="请选择状态" clearable size="small">
  173. <el-option v-for="dict in personalWechatStatusOptions"
  174. :key="dict.dictValue"
  175. :label="dict.dictLabel"
  176. :value="dict.dictValue"
  177. />
  178. </el-select>
  179. </el-form-item>
  180. <el-form-item label="备注" prop="remark">
  181. <el-input v-model="form.remark" placeholder="请输入备注" />
  182. </el-form-item>
  183. <el-form-item label="头像" prop="avatar">
  184. <el-input v-model="form.avatar" placeholder="请输入头像" />
  185. </el-form-item>
  186. <el-form-item label="所属分组" prop="groupId">
  187. <el-input v-model="form.groupId" placeholder="请输入所属分组" />
  188. </el-form-item>
  189. <el-form-item label="小程序用户id" prop="fsUserId">
  190. <el-input v-model="form.fsUserId" placeholder="请输入小程序用户id" />
  191. </el-form-item>
  192. <el-form-item label="个微账户ID" prop="accountId">
  193. <el-input v-model="form.accountId" placeholder="请输入个微账户ID" />
  194. </el-form-item>
  195. </el-form>
  196. <div slot="footer" class="dialog-footer">
  197. <el-button type="primary" @click="submitForm">确 定</el-button>
  198. <el-button @click="cancel">取 消</el-button>
  199. </div>
  200. </el-dialog>
  201. </div>
  202. </template>
  203. <script>
  204. import { listWxUser, getWxUser, delWxUser, addWxUser, updateWxUser, exportWxUser } from "@/api/wxUser/wxUser";
  205. import {getUserList} from "@/api/company/companyUser";
  206. export default {
  207. name: "User",
  208. data() {
  209. return {
  210. // 遮罩层
  211. loading: true,
  212. // 选中数组
  213. ids: [],
  214. // 非单个禁用
  215. single: true,
  216. // 非多个禁用
  217. multiple: true,
  218. // 显示搜索条件
  219. showSearch: true,
  220. // 总条数
  221. total: 0,
  222. // 【个人微信】表格数据
  223. userList: [],
  224. // 弹出层标题
  225. title: "",
  226. // 是否显示弹出层
  227. open: false,
  228. // 查询参数
  229. queryParams: {
  230. pageNum: 1,
  231. pageSize: 10,
  232. companyId: null,
  233. companyUserId: null,
  234. nickName: null,
  235. weixinId: null,
  236. status: null,
  237. avatar: null,
  238. groupId: null,
  239. fsUserId: null,
  240. accountId: null
  241. },
  242. personalWechatStatusOptions: [],
  243. // 表单参数
  244. form: {},
  245. companyUserList: [],
  246. // 表单校验
  247. rules: {
  248. weixinId: [
  249. { required: true, message: "微信号不能为空", trigger: "blur" }
  250. ],
  251. status: [
  252. { required: true, message: "状态不能为空", trigger: "blur" }
  253. ]
  254. }
  255. };
  256. },
  257. created() {
  258. this.getList();
  259. getUserList().then(res=>{
  260. if(res.code === 200) {
  261. this.companyUserList = res.data
  262. }
  263. })
  264. // 获取个人微信状态字典
  265. this.getDicts('personal_wechat_status').then(response => {
  266. this.personalWechatStatusOptions = response.data;
  267. })
  268. },
  269. computed:{
  270. /**
  271. * 处理 el-radio-group v-model 可能需要字符串类型的问题
  272. * 假设 form.status 的实际类型是 Number
  273. */
  274. statusModel: {
  275. get() {
  276. // 读取时转为字符串
  277. return this.form.status?.toString();
  278. },
  279. set(newVal) {
  280. // 写入时根据需要转回 Number 或保持 String,取决于后端接口
  281. // 如果后端 status 字段是 Number 类型:
  282. this.form.status = newVal === null || newVal === undefined || newVal === '' ? null : Number(newVal);
  283. // 如果后端 status 字段是 String 类型:
  284. // this.form.status = newVal;
  285. }
  286. }
  287. },
  288. methods: {
  289. /** 查询【个人微信】列表 */
  290. getList() {
  291. this.loading = true;
  292. listWxUser(this.queryParams).then(response => {
  293. this.userList = response.rows;
  294. this.total = response.total;
  295. this.loading = false;
  296. });
  297. },
  298. // 取消按钮
  299. cancel() {
  300. this.open = false;
  301. this.reset();
  302. },
  303. // 表单重置
  304. reset() {
  305. this.form = {
  306. userId: null,
  307. companyId: null,
  308. companyUserId: null,
  309. nickName: null,
  310. weixinId: null,
  311. status: '1',
  312. remark: null,
  313. createTime: null,
  314. avatar: null,
  315. groupId: null,
  316. fsUserId: null,
  317. accountId: null
  318. };
  319. this.resetForm("form");
  320. },
  321. /** 搜索按钮操作 */
  322. handleQuery() {
  323. this.queryParams.pageNum = 1;
  324. this.getList();
  325. },
  326. /** 重置按钮操作 */
  327. resetQuery() {
  328. this.resetForm("queryForm");
  329. this.handleQuery();
  330. },
  331. // 多选框选中数据
  332. handleSelectionChange(selection) {
  333. this.ids = selection.map(item => item.userId)
  334. this.single = selection.length!==1
  335. this.multiple = !selection.length
  336. },
  337. /** 新增按钮操作 */
  338. handleAdd() {
  339. this.reset();
  340. this.open = true;
  341. this.title = "添加【个人微信】";
  342. },
  343. /** 修改按钮操作 */
  344. handleUpdate(row) {
  345. this.reset();
  346. const userId = row.userId || this.ids
  347. getWxUser(userId).then(response => {
  348. this.form = response.data;
  349. this.open = true;
  350. this.title = "修改【个人微信】";
  351. });
  352. },
  353. /** 提交按钮 */
  354. submitForm() {
  355. this.$refs["form"].validate(valid => {
  356. if (valid) {
  357. if (this.form.userId != null) {
  358. updateWxUser(this.form).then(response => {
  359. if (response.code === 200) {
  360. this.msgSuccess("修改成功");
  361. this.open = false;
  362. this.getList();
  363. }
  364. });
  365. } else {
  366. addWxUser(this.form).then(response => {
  367. if (response.code === 200) {
  368. this.msgSuccess("新增成功");
  369. this.open = false;
  370. this.getList();
  371. }
  372. });
  373. }
  374. }
  375. });
  376. },
  377. /** 删除按钮操作 */
  378. handleDelete(row) {
  379. const userIds = row.userId || this.ids;
  380. this.$confirm('是否确认删除【个人微信】编号为"' + userIds + '"的数据项?', "警告", {
  381. confirmButtonText: "确定",
  382. cancelButtonText: "取消",
  383. type: "warning"
  384. }).then(function() {
  385. return delUser(userIds);
  386. }).then(() => {
  387. this.getList();
  388. this.msgSuccess("删除成功");
  389. }).catch(function() {});
  390. },
  391. /** 导出按钮操作 */
  392. handleExport() {
  393. const queryParams = this.queryParams;
  394. this.$confirm('是否确认导出所有【个人微信】数据项?', "警告", {
  395. confirmButtonText: "确定",
  396. cancelButtonText: "取消",
  397. type: "warning"
  398. }).then(function() {
  399. return exportUser(queryParams);
  400. }).then(response => {
  401. this.download(response.msg);
  402. }).catch(function() {});
  403. }
  404. }
  405. };
  406. </script>