index.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" size="small" label-width="100px">
  4. <el-form-item label="省" prop="provinceId">
  5. <el-select v-model="queryParams.provinceId" placeholder="请选择省" @change="getCityData" filterable style="width: 200px;">
  6. <el-option v-for="(item,index) in provinceDataList" :key="index" :label="item.name" :value="item.id"></el-option>
  7. </el-select>
  8. </el-form-item>
  9. <el-form-item label="市" prop="cityId">
  10. <el-select v-model="queryParams.cityId" placeholder="请选择市" @change="getDistrictData" filterable style="width: 200px;">
  11. <el-option v-for="(item, index) in cityDataList" :key="index" :label="item.name" :value="item.id"></el-option>
  12. </el-select>
  13. </el-form-item>
  14. <el-form-item label="区" prop="districtId">
  15. <el-select v-model="queryParams.districtId" placeholder="请选择区" filterable style="width: 200px;">
  16. <el-option v-for="(item, index) in districtDataList" :key="index" :label="item.name" :value="item.id"></el-option>
  17. </el-select>
  18. </el-form-item>
  19. <el-form-item label="登录名称" prop="userName">
  20. <el-input v-model="queryParams.userName" clearable style="width: 200px;" placeholder="请输入登录名称"></el-input>
  21. </el-form-item>
  22. <el-form-item label="状态" prop="status">
  23. <el-select v-model="queryParams.status" placeholder="请选择" filterable style="width: 200px;">
  24. <el-option label="启用" value="0"></el-option>
  25. <el-option label="停用" value="1"></el-option>
  26. </el-select>
  27. </el-form-item>
  28. <el-form-item>
  29. <el-button type="primary" @click="handleQuery">搜索</el-button>
  30. <el-button @click="resetQuery">重置</el-button>
  31. </el-form-item>
  32. </el-form>
  33. <h3 class="toolbar">
  34. <span class="title">列表</span>
  35. <div class="tool">
  36. <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
  37. </div>
  38. </h3>
  39. <el-table v-loading="loading" :data="list" border>
  40. <el-table-column label="账户" prop="nickName" align="center" />
  41. <el-table-column label="登录名称" prop="userName" align="center"></el-table-column>
  42. <el-table-column label="手机号" prop="phonenumber" align="center" width="150" />
  43. <el-table-column label="负责地区" prop="remark" align="center"></el-table-column>
  44. <el-table-column label="创建时间" align="center" prop="createTime" width="160"></el-table-column>
  45. <el-table-column label="状态" align="center" key="status">
  46. <template slot-scope="scope">
  47. <el-switch
  48. v-model="scope.row.status"
  49. active-value="0"
  50. inactive-value="1"
  51. @change="handleStatusChange(scope.row)"
  52. ></el-switch>
  53. </template>
  54. </el-table-column>
  55. <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
  56. <template slot-scope="scope">
  57. <el-button type="text" @click="handleUpdate(scope.row)">修改</el-button>
  58. <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
  59. <el-button type="text" @click="handleResetPwd(scope.row)">重置密码</el-button>
  60. </template>
  61. </el-table-column>
  62. </el-table>
  63. <pagination
  64. v-show="total>0"
  65. :total="total"
  66. :page.sync="queryParams.pageNum"
  67. :limit.sync="queryParams.pageSize"
  68. @pagination="getList"/>
  69. <add-tax-user ref="addTax" v-if="addTaxVisible" @refreshData="getList()"></add-tax-user>
  70. </div>
  71. </template>
  72. <script>
  73. import {getProvinceDataApi,getRegionChildrenApi} from "@/api/common/common"
  74. import {entStateOptions, getLabel, authStateOptions} from '@/utils/dataFormat'
  75. import {listTaxAdminApi,deleteTaxApi} from '@/api/admin/tax/tax'
  76. import { changeUserStatus } from "@/api/system/user";
  77. import AddTaxUser from './components/AddTaxUser'
  78. import { resetUserPwd } from "@/api/system/user";
  79. export default {
  80. components: {
  81. AddTaxUser
  82. },
  83. data () {
  84. return {
  85. loading: false,
  86. addTaxVisible: false,
  87. type: '',
  88. provinceDataList: [],
  89. cityDataList: [],
  90. districtDataList: [],
  91. entStateOptions: entStateOptions,
  92. authStateOptions: authStateOptions,
  93. // 模板状态
  94. // statusOptions: accessStatus,
  95. dateRange: [],
  96. queryParams: {
  97. pageNum: 1,
  98. pageSize: 10,
  99. provinceId: undefined,
  100. cityId: undefined,
  101. districtId: undefined,
  102. userName: undefined,
  103. status: undefined
  104. },
  105. list: [],
  106. total: 0,
  107. open: false,
  108. openInfo: false,
  109. }
  110. },
  111. created() {
  112. this.getList()
  113. this.getProvinceData()
  114. },
  115. methods: {
  116. //选择省份
  117. getCityData() {
  118. this.queryParams.cityId = ''
  119. this.queryParams.districtId = ''
  120. getRegionChildrenApi(this.queryParams.provinceId).then(res => {
  121. if(res.code == 200) {
  122. this.cityDataList = res.data
  123. }
  124. })
  125. },
  126. //选择市
  127. getDistrictData() {
  128. this.queryParams.districtId = ''
  129. getRegionChildrenApi(this.queryParams.cityId).then(res => {
  130. if(res.code == 200) {
  131. this.districtDataList = res.data
  132. }
  133. })
  134. },
  135. getProvinceData() {
  136. getProvinceDataApi().then(res => {
  137. if(res.code == 200) {
  138. this.provinceDataList = res.data
  139. }
  140. })
  141. },
  142. getList() {
  143. this.loading = true;
  144. listTaxAdminApi(this.queryParams).then(response => {
  145. this.list = response.data.records;
  146. this.total = response.data.total;
  147. this.loading = false;
  148. });
  149. },
  150. handleAdd() {
  151. this.type = 'add'
  152. this.addTaxVisible = true
  153. this.$nextTick(() => {
  154. this.$refs.addTax.init(this.type)
  155. })
  156. },
  157. handleUpdate(row) {
  158. this.type = 'update'
  159. this.addTaxVisible = true
  160. this.$nextTick(() => {
  161. this.$refs.addTax.init(this.type, row.userId)
  162. })
  163. },
  164. // 用户状态修改
  165. handleStatusChange(row) {
  166. let text = row.status === "0" ? "启用" : "停用";
  167. this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function() {
  168. return changeUserStatus(row.userId, row.status);
  169. }).then(() => {
  170. this.$modal.msgSuccess(text + "成功");
  171. }).catch(function() {
  172. row.status = row.status === "0" ? "1" : "0";
  173. });
  174. },
  175. /** 重置密码按钮操作 */
  176. handleResetPwd(row) {
  177. this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
  178. confirmButtonText: "确定",
  179. cancelButtonText: "取消",
  180. closeOnClickModal: false,
  181. inputPattern: /^.{5,20}$/,
  182. inputErrorMessage: "用户密码长度必须介于 5 和 20 之间"
  183. }).then(({ value }) => {
  184. resetUserPwd(row.userId, value).then(response => {
  185. this.$modal.msgSuccess("修改成功,新密码是:" + value);
  186. });
  187. }).catch(() => {});
  188. },
  189. handleDelete(row) {
  190. const id = row.userId;
  191. this.$confirm('是否确认删除该数据?', "警告", {
  192. confirmButtonText: "确定",
  193. cancelButtonText: "取消",
  194. type: "warning"
  195. }).then(function() {
  196. return deleteTaxApi(id);
  197. }).then(() => {
  198. this.queryParams.pageNum = 1;
  199. this.getList();
  200. this.msgSuccess("删除成功");
  201. })
  202. },
  203. // 重置
  204. resetQuery() {
  205. this.dateRange = [];
  206. this.resetForm("queryForm");
  207. this.handleQuery();
  208. },
  209. // 搜索
  210. handleQuery() {
  211. this.queryParams.pageNum = 1;
  212. this.getList();
  213. },
  214. statusFormat(row, col, val, index) {
  215. return getLabel(accessStatus, val)
  216. },
  217. entSateFormat(row, col, val, index) {
  218. return getLabel(entStateOptions, val)
  219. },
  220. authStateFormat(row, col, val, index) {
  221. return getLabel(authStateOptions, val)
  222. }
  223. }
  224. }
  225. </script>
  226. <style>
  227. </style>