qukaidi vor 4 Jahren
Ursprung
Commit
e58836a69f
1 geänderte Dateien mit 796 neuen und 0 gelöschten Zeilen
  1. 796 0
      src/views/analysis/stock/index.vue

+ 796 - 0
src/views/analysis/stock/index.vue

@@ -0,0 +1,796 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="testParams"
+      ref="testParams"
+      :inline="true"
+      v-show="showSearch"
+      label-width="88px"
+    >
+      <el-form-item label="货权方" prop="fCorpid">
+        <el-input
+          v-model="testParams.fCorpid"
+          placeholder="请输入货权方"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="货物名称" prop="fgoodsid">
+        <el-select v-model="testParams.fgoodsid" placeholder="请选择">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="提单号" prop="fmblno">
+        <el-input
+          v-model="testParams.fmblno"
+          placeholder="请输入提单号"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="入库日期" prop="fbsdate">
+        <el-date-picker
+          clearable
+          size="small"
+          v-model="testParams.fbsdate"
+          type="date"
+          value-format="timestamp"
+          placeholder="选择入库日期"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="cyan"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索
+        </el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      v-loading="loading"
+      :data="testDate"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="index" label="序号" align="center" />
+      <el-table-column label="货主" align="center" prop="hz" />
+      <el-table-column label="提单号" align="center" prop="tdh" />
+      <el-table-column label="报关单号" align="center" prop="bgdh" />
+      <el-table-column label="客户存货单号" align="center" prop="khkhdh" />
+      <el-table-column label="经营单位" align="center" prop="jydw" />
+      <el-table-column label="到港日期" align="center" prop="dgrq" />
+      <el-table-column label="入库日期" align="center" prop="rkrq" />
+      <el-table-column label="仓库" align="center" prop="ck" />
+      <el-table-column label="库位" align="center" prop="kw" />
+      <el-table-column label="货物名称" align="center" prop="hwmc" />
+      <el-table-column label="包装规格" align="center" prop="bzgg" />
+      <el-table-column label="计费单位" align="center" prop="jfdw" />
+      <el-table-column label="入库毛重" align="center" prop="rkmz" />
+      <el-table-column label="入库净重" align="center" prop="rkjz" />
+      <el-table-column label="入库尺码" align="center" prop="rucm" />
+      <el-table-column label="入库件数" align="center" prop="rkjs" />
+      <el-table-column label="出库毛重" align="center" prop="ckmz" />
+      <el-table-column label="出库净重" align="center" prop="ckjz" />
+      <el-table-column label="出库尺码" align="center" prop="ckcm" />
+      <el-table-column label="出库件数" align="center" prop="ckjs" />
+      <el-table-column label="结余毛重" align="center" prop="jymz" />
+      <el-table-column label="结余净重" align="center" prop="jyjz" />
+      <el-table-column label="结余尺码" align="center" prop="jycm" />
+      <el-table-column label="结余件数" align="center" prop="jyjs" />
+    </el-table>
+  </div>
+</template>
+
+<script>
+import {
+  listWarehousebills,
+  getWarehousebills,
+  delWarehousebills,
+  addWarehousebills,
+  updateWarehousebills,
+  exportWarehousebills,
+} from "@/api/warehouseBusiness/warehouseInStock";
+
+import { listCorps } from "@/api/basicdata/corps";
+
+import { listWarehouse } from "@/api/basicdata/warehouse";
+
+import { listGoods } from "@/api/basicdata/goods";
+
+import { listUser, queryUserVal } from "@/api/system/user";
+
+export default {
+  name: "Warehousebills",
+  components: {},
+  data() {
+    return {
+      testDate: [
+        {
+          hz: "易车配",
+          tdh: "M098765",
+          bgdh: "6789593",
+          khkhdh: "CH098",
+          jydw: "易车配",
+          dgrq: "2020/1/1",
+          rkrq: "2020/1/4",
+          ck: "1号库",
+          kw: "K1",
+          hwmc: "棉花",
+          bzgg: "5*5",
+          jfdw: "尺码",
+          rkmz: "1000",
+          rkjz: "900",
+          rucm: "100",
+          rkjs: "5",
+          ckmz: "1312",
+          ckjz: "22",
+          ckcm: "123",
+          ckjs: "12",
+          jymz: "213",
+          jyjz: "321",
+          jycm: "321",
+          jyjs: "44",
+        },
+        {
+          hz: "中外运",
+          tdh: "Z089222",
+          bgdh: "8890879",
+          khkhdh: "CH200",
+          jydw: "中棉",
+          dgrq: "2020/1/1",
+          rkrq: "2020/1/4",
+          ck: "1号库",
+          kw: "K1",
+          hwmc: "棉花",
+          bzgg: "5*5",
+          jfdw: "尺码",
+          rkmz: "1000",
+          rkjz: "900",
+          rucm: "100",
+          rkjs: "5",
+          ckmz: "10",
+          ckjz: "10",
+          ckcm: "10",
+          ckjs: "10",
+          jymz: "10",
+          jyjz: "10",
+          jycm: "10",
+          jyjs: "10",
+        },
+      ],
+      testParams: {
+          fCorpid:"",
+          fmblno:"",
+          fbsdate:"",
+          fgoodsid: ""
+      },
+      options:[
+          {
+            value: "选项1",
+            label: "棉花",
+          },
+          {
+            value: "选项2",
+            label: "钢铁",
+          }
+        ],
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      userVal: {
+        userName: null,
+        nickName: null,
+        deptId: null,
+      },
+      queryForm: {},
+      dataList: [],
+      warehouseCrList: [],
+      warehouseDrList: [],
+      browseStatus: false,
+      relevantAttachments: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 仓库主(出入库)表格数据
+      warehousebillsList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 货权方(客户数据)
+      fMblnoOptions: [],
+      // 货权方(客户数据)
+      fSbuOptions: [],
+      // 操作员
+      userOptions: [],
+      // 操作员
+      goodsOptions: [],
+      // 制单部门
+      deptOptions: [],
+      // 仓库(仓库数据)
+      warehouseOptions: [],
+      // 贸易方式(数据字典),对应t_trademodels 字典
+      fTrademodeidOptions: [],
+      // 计费单位(数据字典),下拉选择毛重或净重字典
+      fFeetunitOptions: [],
+      // 结算方式(数据字典),下拉选择字典
+      fStltypeOptions: [],
+      // 是否过磅(数据字典)默认 F ,过磅T 否者F 下拉选择字典
+      fIfweighOptions: [],
+      // 是否质押(数据字典),默认 F ,质押T 否者F 下拉选择字典
+      fIfpledgeOptions: [],
+      // 是否破损(数据字典),默认F否则T字典
+      fIfdamageOptions: [],
+      // 单据类型(数据字典)SJRK字典
+      fBilltypeOptions: [],
+      // 状态(数据字典),N 入字典
+      fBillstatusOptions: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        fBillno: null,
+        createBy: null,
+        createTime: null,
+        fCustomsdeclartion: null,
+        fOriginalbillno: null,
+        fDeptid: null,
+        fBsdeptid: null,
+        fContacts: null,
+        fTel: null,
+        fCorpid: null,
+        fTocorpid: null,
+        fStltypeid: null,
+        fBscorpno: null,
+        fWarehouseid: null,
+        fStorekeeper: null,
+        fBsdate: null,
+        fPlanqty: null,
+        fPlangrossweight: null,
+        fPlannetweight: null,
+        fPlanvolumn: null,
+        fQty: null,
+        fGrossweight: null,
+        fNetweight: null,
+        fVolumn: null,
+        fTrademodeid: null,
+        fSbu: null,
+        fFeetunit: null,
+        fMblno: null,
+        fVslvoy: null,
+        fEta: null,
+        fCustomno: null,
+        fIfweigh: null,
+        fIfpledge: null,
+        fIfdamage: null,
+        fBankcorpid: null,
+        fBilltype: null,
+        fBillstatus: null,
+        fCreateby: null,
+        fCreatetime: null,
+        fGoodsid: null,
+        fCntrtype: null,
+        fCntqty: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        fDeptid: [
+          { required: true, message: "制单部门不能为空", trigger: "blur" },
+        ],
+        fBsdeptid: [
+          { required: true, message: "业务所属部门不能为空", trigger: "blur" },
+        ],
+        fCorpid: [
+          {
+            required: true,
+            message:
+              "客户名称,t_corps 中的no或 name,模糊查找选择后,存储id,显示name不能为空",
+            trigger: "blur",
+          },
+        ],
+        fTocorpid: [
+          {
+            required: true,
+            message:
+              "货转客户名称,t_corps 中的no或 name,模糊查找选择后,存储id,显示name,自有在货权转移是该字段有效不能为空",
+            trigger: "blur",
+          },
+        ],
+        fBscorpno: [
+          {
+            required: true,
+            message:
+              "客户存货编号,格式编号客户编号+YYYY +NNNN,编号不能断号,要连续、如果删除该编号,下次新建单据,优先使用,每年从001开始不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    this.getList();
+    this.getDicts("data_trademodes").then((response) => {
+      this.fTrademodeidOptions = response.data;
+    });
+    this.getDicts("data_unitfees").then((response) => {
+      this.fFeetunitOptions = response.data;
+    });
+    this.getDicts("data_stltype_type").then((response) => {
+      this.fStltypeOptions = response.data;
+    });
+    this.getDicts("data_ifweigh_status").then((response) => {
+      this.fIfweighOptions = response.data;
+    });
+    this.getDicts("data_ifpledge_status").then((response) => {
+      this.fIfpledgeOptions = response.data;
+    });
+    this.getDicts("data_ifdamage_status").then((response) => {
+      this.fIfdamageOptions = response.data;
+    });
+    this.getDicts("data_billtype_type").then((response) => {
+      this.fBilltypeOptions = response.data;
+    });
+    this.getDicts("sys_common_status").then((response) => {
+      this.fBillstatusOptions = response.data;
+    });
+  },
+  methods: {
+    // 添加list
+    addRelevant() {
+      console.log(JSON.stringify(this.dataList));
+      this.dataList.push({
+        fbsdate: null,
+        fgoodsid: null,
+        fcntrtype: null,
+        fCntqty: null,
+        fplangrossweight: null,
+        fplanvolumn: null,
+        fplanqty: null,
+        fgrossweight: null,
+        fqty: null,
+        fPackagespecs: null,
+        fwarehouselocid: null,
+        fBoxno: null,
+        fGoodsval: null,
+        ftruckno: null,
+        remark: null,
+      });
+    },
+    addRelevt() {
+      this.relevantAttachments.push({
+        attachName: null,
+        opUserName: null,
+        opDate: null,
+        attachId: null,
+      });
+    },
+    // 收款信息
+    addCollection() {
+      var obj = {};
+      this.warehouseDrList.push(obj);
+    },
+    addpayment() {
+      var obj = {};
+      this.warehouseCrList.push(obj);
+    },
+    queryUser() {
+      queryUserVal().then((response) => {
+        if (response.user !== null) {
+          this.userVal = response.user;
+          this.$set(this.form, "fDeptid", this.userVal.deptId);
+          this.$set(this.form, "createBy", this.userVal.userName);
+          this.$set(this.form, "createTime", Date.parse(new Date()));
+        }
+        if (response.dept !== null) {
+          this.deptOptions = [];
+          this.deptOptions.push(response.dept);
+        }
+      });
+    },
+    /** 查询仓库主(出入库)列表 */
+    getList() {
+      this.loading = true;
+      listWarehousebills(this.queryParams).then((response) => {
+        this.warehousebillsList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 贸易方式(数据字典),对应t_trademodels 字典翻译
+    fTrademodeidFormat(row, column) {
+      return this.selectDictLabel(this.fTrademodeidOptions, row.fTrademodeid);
+    },
+    // 计费单位(数据字典),下拉选择毛重或净重字典翻译
+    fFeetunitFormat(row, column) {
+      return this.selectDictLabel(this.fFeetunitOptions, row.fFeetunit);
+    },
+    // 是否过磅(数据字典)默认 F ,过磅T 否者F 下拉选择字典翻译
+    fIfweighFormat(row, column) {
+      return this.selectDictLabel(this.fIfweighOptions, row.fIfweigh);
+    },
+    // 是否质押(数据字典),默认 F ,质押T 否者F 下拉选择字典翻译
+    fIfpledgeFormat(row, column) {
+      return this.selectDictLabel(this.fIfpledgeOptions, row.fIfpledge);
+    },
+    // 是否破损(数据字典),默认F否则T字典翻译
+    fIfdamageFormat(row, column) {
+      return this.selectDictLabel(this.fIfdamageOptions, row.fIfdamage);
+    },
+    // 单据类型(数据字典)SJRK字典翻译
+    fBilltypeFormat(row, column) {
+      return this.selectDictLabel(this.fBilltypeOptions, row.fBilltype);
+    },
+    // 状态(数据字典),N 入字典翻译
+    fBillstatusFormat(row, column) {
+      return this.selectDictLabel(this.fBillstatusOptions, row.fBillstatus);
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        fId: null,
+        fBillno: null,
+        fCustomsdeclartion: null,
+        fOriginalbillno: null,
+        fDeptid: null,
+        fBsdeptid: null,
+        fContacts: null,
+        fTel: null,
+        fCorpid: null,
+        fTocorpid: null,
+        fStltypeid: null,
+        fBscorpno: null,
+        fWarehouseid: null,
+        fStorekeeper: null,
+        fBsdate: null,
+        fPlanqty: null,
+        fPlangrossweight: null,
+        fPlannetweight: null,
+        fPlanvolumn: null,
+        fQty: null,
+        fGrossweight: null,
+        fNetweight: null,
+        fVolumn: null,
+        fTrademodeid: null,
+        fSbu: null,
+        fFeetunit: null,
+        fMblno: null,
+        fVslvoy: null,
+        fEta: null,
+        fCustomno: null,
+        fIfweigh: null,
+        fIfpledge: null,
+        fIfdamage: null,
+        fBankcorpid: null,
+        fBilltype: null,
+        fBillstatus: null,
+        delFlag: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null,
+        fCreateby: null,
+        fCreatetime: null,
+        fGoodsid: null,
+        fCntrtype: null,
+        fCntqty: null,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+        this.testParams={
+          fCorpid:null,
+          fmblno:null,
+          fbsdate:null,
+          fgoodsid:null,
+      },
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.fId);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    checkType() {},
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.queryUser();
+      this.open = true;
+      this.title = "入库单";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const fId = row.fid || this.ids;
+      getWarehousebills(row.fid).then((response) => {
+        this.form = response.data.warehousebills;
+        this.$set(this.form, "fCorpid", response.data.warehousebills.fcorpid);
+        this.$set(
+          this.form,
+          "fWarehouseid",
+          response.data.warehousebills.fwarehouseid
+        );
+        this.$set(
+          this.form,
+          "fContacts",
+          response.data.warehousebills.fcontacts
+        );
+        this.$set(this.form, "fTel", response.data.warehousebills.ftel);
+        this.$set(this.form, "fMblno", response.data.warehousebills.fmblno);
+        this.$set(
+          this.form,
+          "fBsdate",
+          Date.parse(response.data.warehousebills.fbsdate)
+        );
+        this.$set(
+          this.form,
+          "fStorekeeper",
+          response.data.warehousebills.fstorekeeper
+        );
+        this.$set(this.form, "createBy", response.data.warehousebills.createBy);
+        this.$set(this.form, "fDeptid", response.data.warehousebills.fdeptid);
+        this.$set(
+          this.form,
+          "fDilldate",
+          Date.parse(response.data.warehousebills.fbilldate)
+        );
+        this.$set(this.form, "fVslvoy", response.data.warehousebills.fvslvoy);
+        this.$set(
+          this.form,
+          "fEta",
+          Date.parse(response.data.warehousebills.feta)
+        );
+        this.$set(
+          this.form,
+          "createTime",
+          Date.parse(response.data.warehousebills.createTime)
+        );
+        this.$set(
+          this.form,
+          "fTrademodeid",
+          response.data.warehousebills.ftrademodeid + ""
+        );
+        this.$set(
+          this.form,
+          "fBillingway",
+          response.data.warehousebills.fbillingway + ""
+        );
+        this.$set(
+          this.form,
+          "fFeetunit",
+          response.data.warehousebills.ffeetunit + ""
+        );
+        this.$set(
+          this.form,
+          "fBscorpno",
+          response.data.warehousebills.fbscorpno
+        );
+        this.$set(
+          this.form,
+          "fCustomno",
+          response.data.warehousebills.fcustomno
+        );
+        this.$set(
+          this.form,
+          "fStltypeid",
+          response.data.warehousebills.fstltypeid + ""
+        );
+        this.$set(
+          this.form,
+          "fIfweigh",
+          response.data.warehousebills.fifweigh + ""
+        );
+        this.$set(
+          this.form,
+          "fIfdamage",
+          response.data.warehousebills.fifdamage + ""
+        );
+        this.$set(this.form, "fSbu", response.data.warehousebills.fsbu);
+        this.$set(
+          this.form,
+          "fIfpledge",
+          response.data.warehousebills.fifpledge + ""
+        );
+        this.$set(
+          this.form,
+          "fBankcorpid",
+          response.data.warehousebills.fbankcorpid
+        );
+        this.$set(this.form, "remark", response.data.warehousebills.remark);
+        this.deptOptions = [];
+        this.deptOptions.push(response.data.dept);
+        this.fMblnoOptions = [];
+        this.fMblnoOptions.push(response.data.fCorps);
+        if (response.data.fSbu !== null) {
+          this.fSbuOptions = [];
+          this.fSbuOptions.push(response.data.fSbu);
+        }
+        if (response.data.warehouse !== null) {
+          this.warehouseOptions = [];
+          this.warehouseOptions.push(response.data.warehouse);
+        }
+        if (
+          typeof response.data.warehouseBillsItem !== "undefined" &&
+          response.data.warehouseBillsItem !== null
+        ) {
+          this.dataList = response.data.warehouseBillsItem;
+          if (response.data.goodsList !== null) {
+            this.goodsOptions = [];
+            this.goodsOptions = response.data.goodsList;
+          }
+        }
+        this.open = true;
+        this.title = "修改仓库主(出入库)";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          // let formData = new FormData()
+          // console.log(JSON.stringify(this.form));
+          // formData.append('tWarehouseBills', JSON.stringify(this.formData))
+          let formData = new window.FormData();
+          // 附件数据
+          formData.append("tWarehouseBills", JSON.stringify(this.form));
+          console.log(JSON.stringify(this.form));
+          // 附件数据
+          formData.append("tWhgenleg", null);
+          // // 费用明细付款
+          formData.append(
+            "tWarehousebillsfeesCr",
+            JSON.stringify(this.warehouseCrList)
+          );
+          // // 收款
+          formData.append(
+            "tWarehousebillsfeesDr",
+            JSON.stringify(this.warehouseDrList)
+          );
+          // // 库存明细
+          formData.append(
+            "tWarehousebillsitems",
+            JSON.stringify(this.dataList)
+          );
+          // 附件数据
+          // formData.append('tWhgenleg', dataForm)
+          // // 费用明细付款
+          // formData.append('tWarehousebillsfeesCr', dataForm)
+          // // 收款
+          // formData.append('tWarehousebillsfeesDr"', dataForm)
+          // // 库存明细
+          // formData.append('tWarehousebillsitems', dataForm)
+          addWarehousebills(formData).then((response) => {
+            console.log(response);
+            this.msgSuccess("新增成功");
+            this.open = false;
+            this.getList();
+          });
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const fIds = row.fId || this.ids;
+      this.$confirm(
+        '是否确认删除仓库主(出入库)编号为"' + fIds + '"的数据项?',
+        "警告",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(function () {
+          return delWarehousebills(fIds);
+        })
+        .then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm("是否确认导出所有仓库主(出入库)数据项?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(function () {
+          return exportWarehousebills(queryParams);
+        })
+        .then((response) => {
+          this.download(response.msg);
+        });
+    },
+    deleteRow(index, rows) {
+      rows.splice(index, 1);
+    },
+    /* 远程模糊查询用户 */
+    corpsRemoteMethod(name) {
+      if (name == null || name === "") {
+        return false;
+      }
+      let queryParams = { pageNum: 1, pageSize: 10, fName: name };
+      listCorps(queryParams).then((response) => {
+        this.fMblnoOptions = response.rows;
+      });
+    },
+    /* 远程模糊查询商品 */
+    goodsRemoteMethod(name) {
+      if (name == null || name === "") {
+        return false;
+      }
+      let queryParams = { pageNum: 1, pageSize: 10, fName: name };
+      listGoods(queryParams).then((response) => {
+        this.goodsOptions = response.rows;
+      });
+    },
+    /* 远程模糊查询经营单位 */
+    fSbuRemoteMethod(name) {
+      if (name == null || name === "") {
+        return false;
+      }
+      let queryParams = { pageNum: 1, pageSize: 10, fName: name };
+      listCorps(queryParams).then((response) => {
+        this.fSbuOptions = response.rows;
+      });
+    },
+    /* 远程模糊查询仓库 */
+    warehouseRemoteMethod(name) {
+      if (name == null || name === "") {
+        return false;
+      }
+      let queryParams = { pageNum: 1, pageSize: 10, fName: name };
+      listWarehouse(queryParams).then((response) => {
+        this.warehouseOptions = response.rows;
+      });
+    },
+    /* 远程模糊查询操作用户 */
+    userRemoteMethod(name) {
+      if (name == null || name === "") {
+        return false;
+      }
+      let queryParams = { pageNum: 1, pageSize: 10, userName: name };
+      listUser(queryParams).then((response) => {
+        this.userOptions = response.rows;
+      });
+    },
+  },
+};
+</script>