anpinjingyuan-ui/src/views/project/index1.vue

<template>
  <div class="app-container">
    <div v-show="mainTabel == false">
      <el-form label-width="88px" ref="form" :model="form">
        <el-row>
          <el-col :span="6">
            <el-form-item label="代码" prop="fNumber">
              <el-input size="small" style="width:200px" v-model="form.fNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="中文名" prop="fName">
              <el-input size="small" style="width:200px" v-model="form.fName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户名称" prop="fCorpid">
              <el-select size="small" style="width:200px" v-model="form.fCorpid" clearable>
                <el-option
                v-for="item in fMblnoOptions"
                :key="item.fId"
                :label="item.fName"
                :value="item.fId"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="责任人" prop="fPerson">
              <el-select size="small" style="width:200px" v-model="form.fPerson" clearable>
                <el-option
                v-for="item in liableOption"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-collapse-transition>
          <div v-show="show">
            <el-row>
              <el-col :span="6">
                <el-form-item label="电话" prop="fTel">
                  <el-input size="small" style="width:200px" v-model="form.fTel"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="项目地址" prop="fAddress">
                  <el-input size="small" style="width:200px" v-model="form.fAddress"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="备注" prop="remark">
                  <el-input size="small" type="textarea" style="width:200px" v-model="form.remark"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-collapse-transition>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['warehouse:project:add']"
          >新增
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate('',3)"
            v-hasPermi="['warehouse:project:add']"
          >修改
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['warehouse:project:export']"
          >导出
          </el-button>
        </el-col>
        <div class="tabSetting">
          <div style="margin-right: 20px">
            <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-button
              v-show="show"
              @click="show = !show"
              icon="el-icon-arrow-up"
              size="mini"
            >展开
            </el-button
            >
            <el-button
              v-show="!show"
              @click="show = !show"
              icon="el-icon-arrow-down"
              size="mini"
            >展开
            </el-button
            >
          </div>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
          <div style="margin: 0 12px">
            <el-button
              icon="el-icon-setting"
              size="mini"
              circle
              @click="showSetting = !showSetting"
            ></el-button>
          </div>
        </div>
      </el-row>
      <el-dialog
        title="自定义列显示"
        :visible.sync="showSetting"
        width="700px"
        v-dialogDrag
      >
        <template slot="title">
          <div class="avue-crud__dialog__header">
          <span class="el-dialog__title">
            <span
              style="
                display: inline-block;
                width: 3px;
                height: 20px;
                margin-right: 5px;
                float: left;
                margin-top: 2px;
              "
            ></span>
          </span>
          </div>
        </template>
        <div>配置排序列数据（拖动调整顺序）</div>
        <div style="margin-left: 17px">
          <el-checkbox
            v-model="allCheck"
            label="全选"
            @change="allChecked"
          ></el-checkbox>
        </div>
        <div style="padding: 4px; display: flex; justify-content: center">
          <draggable
            v-model="setRowList"
            group="site"
            animation="300"
            @start="onStart"
            @end="onEnd"
            handle=".indraggable"
          >
            <transition-group>
              <div
                v-for="item in setRowList"
                :key="item.surface"
                class="listStyle"
              >
                <div style="width: 500px" class="indraggable">
                  <div class="progress" :style="{ width: item.width + 'px' }">
                    <el-checkbox
                      :label="item.name"
                      v-model="item.checked"
                      :true-label="0"
                      :false-label="1"
                    >{{ item.name }}
                    </el-checkbox>
                  </div>
                </div>
                <el-input-number
                  v-model.number="item.width"
                  controls-position="right"
                  :min="1"
                  :max="500"
                  size="mini"
                ></el-input-number>
              </div>
            </transition-group>
          </draggable>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="showSetting = false">取 消</el-button>
        <el-button @click="delRow()" type="danger">重 置</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </span>
      </el-dialog>
      <el-table v-loading="loading" :data="projectList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="序号" type="index" align="center"/>
        <el-table-column
          v-for="(item, index) in getRowList"
          :key="index"
          :label="item.name"
          :width="item.width"
          :prop="item.label"
          align="center"
          sortable
          :fixed="item.fixed"
        >
          <template slot-scope="scope">
            <span v-if="item.label == 'createTime'">{{scope.row.createTime?scope.row.createTime.slice(0,10):scope.row.createTime}}</span>
            <span v-else-if="item.label == 'updateTime'">{{scope.row.updateTime?scope.row.updateTime.slice(0,10):scope.row.updateTime}}</span>
            <span v-else>{{scope.row[item.label]}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          min-width="180"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleUpdate(scope.row, 0)"
              v-hasPermi="['warehouse:project:query']"
            >查看
            </el-button
            >
<!--            <el-button-->
<!--              size="mini"-->
<!--              type="text"-->
<!--              icon="el-icon-view"-->
<!--              @click="handleUpdate(scope.row, 1)"-->
<!--              v-hasPermi="['finance:invoiceApplyFor:query']"-->
<!--              v-if="-->
<!--              scope.row.fBillstatusName == '提交审核' ||-->
<!--              scope.row.fBillstatusName == '审核中'-->
<!--            "-->
<!--            >审批进度-->
<!--            </el-button-->
<!--            >-->
<!--            <el-button-->
<!--              size="mini"-->
<!--              type="text"-->
<!--              icon="el-icon-edit"-->
<!--              @click="handleUpdate(scope.row,2)"-->
<!--              v-hasPermi="['finance:invoiceApplyFor:query']"-->
<!--              v-if="-->
<!--              scope.row.fBillstatusName == '保存' ||-->
<!--              scope.row.fBillstatusName == '暂存' ||-->
<!--              scope.row.fBillstatusName == '审批驳回'-->
<!--            "-->
<!--            >修改-->
<!--            </el-button>-->
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['warehouse:project:remove']"
              v-if="
              scope.row.fBillstatusName == '保存' ||
              scope.row.fBillstatusName == '暂存' ||
              scope.row.fBillstatusName == '审批驳回'
            "
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="form.pageNum"
        :limit.sync="form.pageSize"
        @pagination="getList"
      />
    </div>
    <div v-if="mainTabel == true">
      <el-breadcrumb separator="/" style="display:flex;align-items: center;margin-bottom: 10px">
        <el-breadcrumb-item>项目管理</el-breadcrumb-item>
        <el-breadcrumb-item>项目管理详情页</el-breadcrumb-item>
        <el-breadcrumb-item>
          <el-button plain size="mini" type="danger" icon="el-icon-arrow-left" @click="goBack">
            返回列表
          </el-button>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <el-form label-width="88px" ref="detailform" :model="detailform" :rules="rules">
        <el-row>
          <el-col :span="6">
            <el-form-item label="代码" prop="fNumber">
              <el-input size="small" :disabled="doNot" style="width:200px" v-model="detailform.fNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="中文名" prop="fName">
              <el-input size="small" :disabled="doNot" style="width:200px" v-model="detailform.fName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收款单位" prop="fCorpid">
              <el-select size="small" :disabled="doNot" style="width:200px" v-model="detailform.fCorpid">
                <el-option
                  v-for="item in fMblnoOptions"
                  :key="item.fId"
                  :label="item.fName"
                  :value="item.fId"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="责任人" prop="fPerson">
              <el-select size="small" :disabled="doNot" style="width:200px" v-model="detailform.fPerson">
                <el-option
                  v-for="item in liableOption"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="项目地址" prop="fAddress">
              <el-input size="small" :disabled="doNot" style="width:200px" v-model="detailform.fAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电话" prop="fTel">
              <el-input size="small" :disabled="doNot" style="width:200px" v-model="detailform.fTel"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input size="small" :disabled="doNot" type="textarea"  v-model="detailform.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button v-if="cancelButton === false" size="mini" icon="el-icon-refresh-left" type="danger" @click="cancelTwo">返回首页</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button size="mini" :disabled="doNot" icon="el-icon-plus" type="primary" @click="addList">录入</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button size="mini" :disabled="doNotchange" icon="el-icon-edit" type="info" @click="doNot = false">修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button size="mini" icon="el-icon-download" type="warning">导出</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button size="mini" :disabled="doNot" icon="el-icon-check" type="success" @click="submit">保存</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button size="mini" :disabled="doNot" type="primary" @click="approval">请核</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button size="mini" v-if="approvedBy" type="primary" @click="addOrUpdateHand">审批</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button size="mini" v-if="detailform.fBillstatus >= 4" type="primary" @click="addOrUpdateHandle">查看审批</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button size="mini" v-if="detailform.fBillstatus == 4 && this.lander == this.operator" type="danger" @click="backApproval(1)">撤销审批</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button size="mini" v-if="detailform.fBillstatus == 6 && this.lander == this.before" type="warning" @click="backApproval(2)">撤销项目管理</el-button>
        </el-col>
        <div style="margin: 0 12px;float: right">
          <el-button
            icon="el-icon-setting"
            size="mini"t
            circle
            @click="showSetting = !showSetting"
          ></el-button>
        </div>
      </el-row>
        <el-dialog
          title="自定义列显示"
          :visible.sync="showSetting"
          width="700px"
          v-dialogDrag
        >
          <template slot="title">
            <div class="avue-crud__dialog__header">
          <span class="el-dialog__title">
            <span
              style="
                display: inline-block;
                width: 3px;
                height: 20px;
                margin-right: 5px;
                float: left;
                margin-top: 2px;
              "
            ></span>
          </span>
            </div>
          </template>
          <div>配置排序列数据（拖动调整顺序）</div>
          <div style="margin-left: 17px">
            <el-checkbox
              v-model="allCheck2"
              label="全选"
              @change="allChecked"
            ></el-checkbox>
          </div>
          <div style="padding: 4px; display: flex; justify-content: center">
            <draggable
              v-model="setRowList2"
              group="site"
              animation="300"
              @start="onStart"
              @end="onEnd"
              handle=".indraggable"
            >
              <transition-group>
                <div
                  v-for="item in setRowList2"
                  :key="item.surface"
                  class="listStyle"
                >
                  <div style="width: 500px" class="indraggable">
                    <div class="progress" :style="{ width: item.width + 'px' }">
                      <el-checkbox
                        :label="item.name"
                        v-model="item.checked"
                        :true-label="0"
                        :false-label="1"
                      >{{ item.name }}
                      </el-checkbox>
                    </div>
                  </div>
                  <el-input-number
                    v-model.number="item.width"
                    controls-position="right"
                    :min="1"
                    :max="500"
                    size="mini"
                  ></el-input-number>
                </div>
              </transition-group>
            </draggable>
          </div>
          <span slot="footer" class="dialog-footer">
        <el-button @click="showSetting = false">取 消</el-button>
        <el-button @click="delRow2()" type="danger">重 置</el-button>
        <el-button type="primary" @click="save2()">确 定</el-button>
      </span>
        </el-dialog>
        <el-table v-loading="loading" :data="detailList" @selection-change="handleSelectionChange_s">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="序号" type="index" align="center"/>
          <el-table-column
            v-for="(item, index) in getRowList2"
            :key="index"
            :label="item.name"
            :width="item.width"
            :prop="item.label"
            align="center"
            sortable
            :fixed="item.fixed"
          >
            <template slot-scope="scope">
              <el-select v-if="item.label == 'fMaterial'" @change="change" :disabled="doNot" v-model="scope.row.fMaterial" placehoder="111请输入">
                <el-option
                v-for="item in materialOption"
                :key="item.fId"
                :label="item.fName"
                :value="item.fId"
                />
              </el-select>
              <el-select v-else-if="item.label == 'fMeasure'" :disabled="doNot" v-model="scope.row.fMeasure" placehoder="222请选择">
                <el-option
                  v-for="item in unitOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                />
              </el-select>
              <el-select v-else-if="item.label == 'fStatus'" :disabled="doNot" v-model="scope.row.fStatus" placehoder="222请选择">
                <el-option label="正常" value='0'/>
                <el-option label="停用" value='1'/>
              </el-select>
              <el-input v-else-if="item.label == 'fStudentsWeight'" :disabled="doNot" v-model="scope.row.fStudentsWeight" oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
              ></el-input>
              <el-input v-else-if="item.label == 'fTeachersWeight'" :disabled="doNot" v-model="scope.row.fTeachersWeight" oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
              ></el-input>
              <el-input v-else-if="item.label == 'fCurrencyName'" disabled v-model="scope.row.fCurrencyName"></el-input>
              <el-input v-else v-model="scope.row[item.label]" :disabled="doNot" placehoder="请输入"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            min-width="180"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                :disabled="doNot"
                icon="el-icon-delete"
                @click="deleteRow(scope.$index,detailList)"
                v-hasPermi="['financial:invoiceApplyFor:remove']"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      <div>
      </div>
    </div>
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
    ></add-or-update>
    <approval-comments
      v-if="addOrUpdateVisib"
      ref="ApprovalComments"
      @refreshDataList="returnData"
    ></approval-comments>
  </div>
</template>

<script>
import Vue from 'vue'
import draggable from "vuedraggable";
import { addChange, getChange, listCharge, getCorps, getliable, listmaterial, delProject, addproject} from '@/api/project'
import Cookies from 'js-cookie'
import { addSet, resetModule, select } from '@/api/system/set'
import { getName, queryUserVal, revoke, revokeBill } from '@/api/purchaseIssue'
Vue.directive('dialogDrag', {
  bind(el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    const enlarge = el.querySelector('.enlarge')
    dialogHeaderEl.style.cursor = 'move'

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
    if (enlarge) {
      enlarge.onclick = (e) => {
        dragDom.style.top = '0px'
        dragDom.style.left = '0px'
      }
    }
    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      // 获取到的值带px 正则匹配替换
      let styL, styT

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes('%')) {
        styL =
          +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
        styT =
          +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
      } else {
        styL = +sty.left.replace(/\px/g, '')
        styT = +sty.top.replace(/\px/g, '')
      }

      document.onmousemove = function(e) {
        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX
        const t = e.clientY - disY

        // 移动当前元素

        if (t + styT >= 0) {
          dragDom.style.top = `${t + styT}px`
        }
        dragDom.style.left = `${l + styL}px`
        // 将此时的位置传出去
        // binding.value({x:e.pageX,y:e.pageY})
      }

      document.onmouseup = function(e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})
export default {
  name: 'index1',
  components:{
    draggable
  },
  data() {
    return {
      // 总条数
      total: 0,
      operator:'',
      lander:'',
      before:'',
      approvedBy:false,
      addOrUpdateVisible: false,
      addOrUpdateVisib: false,
      liableOption:[],
      ids:[],
      doNotchange:false,
      doNot:false,
      materialOption:[],
      form:{
        pageNum: 1,
        pageSize: 10,
      },
      detailform:{},
      show: false,
      single:true,
      allCheck: false,
      // 显示搜索条件
      showSearch: true,
      showSetting:false,
      allCheck2: false,
      showSetting2: false,
      mainTabel:false,
      //返回按钮显示
      cancelButton: true,
      setRowList:[],
      getRowList:[],
      setRowList2:[],
      getRowList2:[],
      projectList:[],
      detailList:[],
      unitOptions:[],
      fMblnoOptions:[],
      tableDate: [
        {
          surface: "1",
          label: "fNumber",
          name: "代码",
          checked: 0,
          width: 100,
        },
        {
          surface: "2",
          label: "fName",
          name: "中文名",
          checked: 0,
          width: 100,
        },
        {
          surface: "3",
          label: "fAddress",
          name: "项目地址",
          checked: 0,
          width: 100,
        },
        {
          surface: "4",
          label: "personName",
          name: "责任人",
          checked: 0,
          width: 100,
        },
        {
          surface: "5",
          label: "fStatusName",
          name: "状态",
          checked: 0,
          width: 100,
        },
        {
          surface: "6",
          label: "fAmtdr",
          name: "备注",
          checked: 0,
          width: 100,
        },
        {
          surface: "7",
          label: "createBy",
          name: "录入人",
          checked: 0,
          width: 100,
        },
        {
          surface: "8",
          label: "createTime",
          name: "录入时间",
          checked: 0,
          width: 100,
        },
        {
          surface: "9",
          label: "updateBy",
          name: "最新修改人",
          checked: 0,
          width: 100,
        },
        {
          surface: "10",
          label: "updateTime",
          name: "最新修改时间",
          checked: 0,
          width: 100,
        },
        {
          surface: "11",
          label: "fBillstatusName",
          name: "审核状态",
          checked: 0,
          width: 100,
        },
      ],
      tableDate2: [
        {
          surface: "1",
          label: "fMaterial",
          name: "物料",
          checked: 0,
          width: 100,
          changeable:2
        },
        {
          surface: "2",
          label: "fCurrencyName",
          name: "规格",
          checked: 0,
          width: 100,
          changeable:2
        },
        {
          surface: "3",
          label: "fStudentsWeight",
          name: "学生重量（人）",
          checked: 0,
          width: 100,
          changeable:2
        },
        {
          surface: "4",
          label: "fTeachersWeight",
          name: "教师重量（人）",
          checked: 0,
          width: 100,
          changeable:2
        },
        {
          surface: "5",
          label: "fMeasure",
          name: "计量单位",
          checked: 0,
          width: 100,
          changeable:1
        },
        {
          surface: "6",
          label: "fError",
          name: "误差比列",
          checked: 0,
          width: 100,
          changeable:2
        },
        {
          surface: "7",
          label: "fStatus",
          name: "状态",
          checked: 0,
          width: 100,
          changeable:2
        },
        {
          surface: "8",
          label: "remark",
          name: "备注",
          checked: 0,
          width: 100,
          changeable:2
        },
        // {
        //   surface: "8",
        //   label: "fRemarks",
        //   name: "录入人",
        //   checked: 0,
        //   width: 100,
        //   Changeable:2
        // },
        // {
        //   surface: "9",
        //   label: "fBillstatus",
        //   name: "录入时间",
        //   checked: 0,
        //   width: 100,
        //   Changeable:3
        // },
        // {
        //   surface: "10",
        //   label: "fBillstat",
        //   name: "最新修改人",
        //   checked: 0,
        //   width: 100,
        //   Changeable:2
        // },
        // {
        //   surface: "11",
        //   label: "fBillstatu",
        //   name: "最新修改时间",
        //   checked: 0,
        //   width: 100,
        //   Changeable:3
        // },
      ],
      rules: {
        fCorpid:[{required: true, message: "收款单位不能为空", trigger: "blur"}],
        fPerson:[{required: true, message: "责任人不能为空", trigger: "blur"}],
        fTel:[    {
          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
          message: "请输入正确的手机号码",
          trigger: "blur"
        }]
      },
      loading:true,
      name:''
    }
  },
  activated(){
    this.homePage()
  },
  created(){
    //获取登陆人
    queryUserVal().then((response) => {
      this.lander = response.user.userName;
    })
    this.setRowList = this.getRowList = this.tableDate
    this.setRowList2 = this.getRowList2 = this.tableDate2
    this.getList()
    this.getDicts('data_unitfees').then((response) => {
      if (response.data) {
        this.unitOptions = response.data
      }
    })
    this.corpsRemoteMethod()
    this.liableRemoteMethod()
    this.materialRemoteMethod()
    this.getRow()
  },
  methods: {
    //撤销审批
    backApproval(res) {
      if(res == 1){
        let data = {
          id: this.detailform.fId,
          actId: 510,
          billId: this.detailform.fId,
        };
        revoke(data).then((response) => {
          if (response.code === 200) {
            this.msgSuccess("撤销审批成功");
            this.mainTabel = false
            this.getList();
          }
        });
      }else if(res == 2){
        let data ={
          fId:this.detailform.fId
        }
        revokeBill(data).then(res=>{
          if(res.code == 200){
            this.$message.success("撤销成功");
            this.getList()
            this.mainTabel = false
          }
        })
      }
    },
    //物料带出单位
    change(scope){
      for(let item in this.detailList){
        for(let li in this.materialOption){
          if(this.detailList[item].fMaterial == this.materialOption[li].fId){
            this.$set(this.detailList[item],'fMeasure',JSON.stringify(this.materialOption[li].fFeeunitid))
            this.$set(this.detailList[item],'fCurrencyName',this.materialOption[li].fCurrency)
          }
        }
      }
    },
    addOrUpdateHand() {
      this.addOrUpdateVisib = true;
      this.$nextTick(() => {
        this.$refs.ApprovalComments.init(this.detailform.fId,510);
      });
    },
    homePage(){
      let date = this.$route.query
      if (this.$route.query.list){
        this.cancelButton = false;
        let scope = {
          row:{
            fId:JSON.parse(this.$route.query.data).billId
          }
        }
        this.handleUpdate(scope.row)
        this.approvedBy = true
      }else{
        this.mainTabel = false
        this.cancelButton = true
        this.approvedBy = false
      }
    },
    // 查看审批流
    getDataList() {
      this.addOrUpdateVisible = false;
    },
    returnData() {
      this.addOrUpdateVisib = false;
      this.open = false;
      this.cancelTwo();
    },
    addOrUpdateHandle() {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(this.detailform.fId,510);
      });
    },
    //首页审批跳转关闭返回首页
    cancelTwo() {
      this.open = false
      let view = {
        fullPath: "/project",
        hash: "",
        matched: Array(2),
        meta: Object,
        name: "Project",
        params: Object,
        path: "/project",
        query: Object,
        title: "项目管理"
      }
      this.$router.push({ path: '/index' })
      this.$store
        .dispatch('tagsView/delView', view)
        .then(({ visitedViews }) => {
          if (this.isActive(view)) {
            this.toLastView(visitedViews, view)
          }
        })
      Global.$emit('removeCache', 'closeSelectedTag', view)
    },

    //请核
    approval(){
      this.$refs['detailform'].validate((valid) => {
        if (valid) {
          if(this.detailList.length != 0){
            let formData = new window.FormData();
            formData.append('tProject', JSON.stringify(this.detailform))
            formData.append('tCtnpriceItems', JSON.stringify(this.detailList))
            addproject(formData).then(res => {
              this.$message.success("操作成功")
              this.doNot = true
              this.getList()
              this.mainTabel = false
            })
          }else{
            this.$message.error("请维护明细")
          }
        }
      })
    },
    /** 远程模糊查询用户 */
    corpsRemoteMethod(name) {
      let queryParams = {fTypeid:3 }
      getCorps(queryParams).then((response) => {
        console.log(response)
        this.fMblnoOptions = response.data
      })
    },
    /** 获取责任人*/
    liableRemoteMethod(name) {
      let queryParams = { fName: name }
      getliable(queryParams).then((response) => {
        this.liableOption = response.rows
      })
    },
    /** 货物物料*/
    materialRemoteMethod(name) {
      let queryParams = { fName: name }
      listmaterial(queryParams).then((response) => {
        this.materialOption = response.rows
      })
    },
    //刷新
    getList() {
      this.loading = false
      listCharge(this.form).then(response => {
        if (response.rows) {
          this.projectList = response.rows
        }
        this.total = response.total;
      })
    },
    handleAdd() {
      this.detailform = {}
      this.detailList = []
      this.doNot = false
      this.mainTabel = true
    },
    handleUpdate(row, res) {
      const fId = row.fId || this.ids
      getChange(fId).then(response => {
        if (response.data.projectItemsList) {
          this.detailform = response.data.tProject
          this.operator = this.detailform.createBy
        }
        if (response.data.tProject) {
          this.detailList = response.data.projectItemsList
          for (let li in this.detailList) {
            this.$set(this.detailList[li], 'fStatus', JSON.stringify(this.detailList[li].fStatus))
            this.$set(this.detailList[li], 'fMeasure', JSON.stringify(this.detailList[li].fMeasure))
          }
        }
        if(this.detailform.fBillstatus >= 4){
          this.doNot = true
          this.doNotchange = true
        }else{
          this.doNot = true
          this.doNotchange = false
        }
          let data = {
            actId: 510,
            id: this.detailform.fId
          }
          getName(data).then(response => {
            if (response.data.length != 0) {
              this.before = response.data[0].userName
            }
          })
        this.mainTabel = true
      })
    },
    handleExport() {

    },
    handleQuery() {
      this.getList();
    },
    resetQuery() {
      this.form = {
        fNumber:null,
        fName:null,
        fCorpid:null,
        fPerson:null,
        fTel:null,
        fAddress:null,
        remark:null,
      }
      this.getList()
    },
    addList() {
      this.detailList.push({
        fMaterial: null,
        fStudentsWeight: null,
        fTeachersWeight: null,
        fMeasure: null,
        fError: null,
        fStatus: '0',
        remark: null,
      })
    },
    submit() {
      this.$refs['detailform'].validate((valid) => {
        if (valid) {
          let formData = new window.FormData()
          formData.append('tProject', JSON.stringify(this.detailform))
          formData.append('tCtnpriceItems', JSON.stringify(this.detailList))
          addChange(formData).then(response => {
            this.$message.success("操作成功")
            if (response.data.tProject) {
              this.detailform = response.data.tProject
            }
            if (response.data.tCtnpriceItems) {
              this.detailList = response.data.tCtnpriceItems
            }
            this.getList()
          })
        }
      })
    },
    goBack() {
      if (this.doNot == true && !this.$route.query.data) {
        this.mainTabel = false
      }else if(this.$route.query.data){
        this.cancelTwo()
        this.$router.push({path:'/index'})
      } else{
          this.$confirm('返回列表，是否保存?', '提示', {
            confirmButtonText: '保存',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              this.submit(Cookies.get('sysType'))
              this.mainTabel = false
            })
            .catch(() => {
              this.mainTabel = false
              this.getList()
            })
      }
    },
    //列设置全选
    allChecked() {
      if (this.allCheck == true) {
        this.setRowList.map((e) => {
          return (e.checked = 0)
        })
      } else {
        this.setRowList.map((e) => {
          return (e.checked = 1)
        })
      }
    },
    //查询列数据
    getRow() {
      let that = this
      this.data = {
        tableName: '物资主列表',
        userId: Cookies.get('userName')
      }
      select(this.data).then((res) => {
        if (res.data.length != 0) {
          this.getRowList = res.data.filter((e) => e.checked == 0)
          this.setRowList = res.data
          this.setRowList = this.setRowList.reduce((res, item) => {
            res.push({
              surface: item.surface,
              label: item.label,
              name: item.name,
              checked: item.checked,
              width: item.width,
              fixed: item.fixed
            })
            return res
          }, [])
        }
      })
    },
    //保存列设置
    save() {
      this.showSetting = false
      this.data = {
        tableName: '物资主列表',
        userId: Cookies.get('userName'),
        sysTableSetList: this.setRowList
      }
      addSet(this.data).then((res) => {
        this.getRowList = this.setRowList
      })
    },
    //重置列表
    delRow() {
      this.data = {
        tableName: '物资主列表',
        userId: Cookies.get('userName')
      }
      resetModule(this.data).then(res => {
        if (res.code == 200) {
          this.showSetting = false
          this.setRowList = this.getRowList = this.$options.data().tableDate
        }
      })
    },
    //查询列数据
    getRow2() {
      let that = this;
      this.data = {
        tableName: "弹窗列表物资",
        userId: Cookies.get("userName"),
      };
      select(this.data).then((res) => {
        if (res.data.length != 0) {
          this.getRowList2 = res.data.filter((e) => e.checked == 0);
          this.setRowList2 = res.data;
          this.setRowList2 = this.setRowList2.reduce((res, item) => {
            res.push({
              surface: item.surface,
              label: item.label,
              name: item.name,
              checked: item.checked,
              width: item.width,
              fixed: item.fixed,
            });
            return res;
          }, []);
        }
      });
    },
    //保存列设置
    save2() {
      this.showSetting = false;
      this.data = {
        tableName: "弹窗列表物资",
        userId: Cookies.get("userName"),
        sysTableSetList: this.setRowList2,
      };
      addSet(this.data).then((res) => {
        this.getRowList2 = this.setRowList2.filter((e) => e.checked == 0);
      });
    },
    //重置列表
    delRow2() {
      this.data = {
        tableName: "弹窗列表物资",
        userId: Cookies.get("userName"),
      };
      resetModule(this.data).then((res) => {
        if (res.code == 200) {
          this.showSetting = false;
          this.setRowList2 = this.getRowList2 = this.$options.data().tableDate2
          // this.$refs.MainList.resetTwo(this.$options.data().tableDate2)
        }
      });
    },

    //开始拖拽事件
    onStart() {
      this.drag = true
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false
    },
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.fId)
      this.single = selection.length != 1
    },
    handleSelectionChange_s(selection) {

    },
    check() {
      this.doNot = true

    },
    //删除从表行
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    //删除主列表行
    handleDelete(row){
      const fId = row.fId
      this.$confirm('是否确认删除用户编号为"' + fId + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delProject(fId);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      })

    }
  }
}
</script>

<style lang="scss" scoped>
.tabSetting {
  display: flex;
  justify-content: flex-end;
}
.listStyle {
  display: flex;
  border-top: 1px solid #dcdfe6;
  border-left: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
}
.listStyle:last-child {
  border-bottom: 1px solid #dcdfe6;
}
.progress {
  display: flex;
  align-items: center;
  padding: 2px;
  background-color: rgba(0, 0, 0, 0.05);
  height: 100%;
}
.avue-crud__dialog__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.el-dialog__title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  word-wrap: break-word;
}
.avue-crud__dialog__menu {
  padding-right: 20px;
  float: left;
}
.avue-crud__dialog__menu i {
  color: #909399;
  font-size: 15px;
}
.el-icon-full-screen {
  cursor: pointer;
}
.el-icon-full-screen:before {
  content: "\e719";
}
.app-container ::v-deep .el-form-item {
  margin-bottom: 4px;
}
</style>